/**
 * The three-tool bar, on its own.
 *
 * These rules already existed inside platform.css, and that is exactly why the bar was
 * broken: `SZP_Tools::links_panel()` prints on `woocommerce_after_shop_loop`, which fires
 * on every shop archive, while `SZP_Tools::assets()` only enqueued the marketplace bundle
 * on a product page or on a page carrying one of the tool shortcodes. Measured on
 * /product-category/wood-sheets-substructure/osb-sheet/: the markup was there, the
 * stylesheet was not, so `<b>` and `<small>` fell back to inline and the title ran
 * straight into the description — «ماشین‌حساب مصالحیک سطح، یک سیستم…».
 *
 * Loading the 100KB+ bundle on every category page to fix a 2KB bar would have been the
 * wrong trade, so the bar's own rules live here and ship wherever the bar does.
 *
 * Everything is scoped `html body` for the same reason szp-auth.css is: this sheet has to
 * win against a theme that styles anchors globally, and it must not depend on being
 * loaded after platform.css on the pages that have both.
 */

html body .szp-product-tools {
  margin: clamp(24px, 4vw, 44px) 0 0;
  padding: 0;
}

html body .szp-toolsbar-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
html body .szp-toolsbar-head h2 {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  font-weight: 800;
  line-height: 1.8;
  color: var(--szp-v17-navy, #0b1d31);
}
html body .szp-toolsbar-head p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.9;
  color: var(--szp-v17-muted, #647286);
}

/*
 * Three columns that become one on a phone. `auto-fit` with a floor of 210px was the old
 * behaviour and it is kept, because it degrades to two-then-one on its own rather than
 * needing a breakpoint per layout.
 */
html body .szp-product-tools-links,
html body .szp-tools-switch {
  display: grid;
  gap: clamp(10px, 1.6vw, 14px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .szp-tools-switch-item {
  /* Grid, not inline: this is the rule whose absence produced the run-together text. */
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 96px;
  padding: 16px 18px;
  border-radius: 16px;
  text-decoration: none;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(13, 35, 55, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 18px rgba(13, 35, 55, .07);
  transition: transform .16s ease, box-shadow .2s ease, border-color .18s ease;
}

html body .szp-tools-switch-item b {
  display: block;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.8;
  color: var(--szp-v17-navy, #0b1d31);
}
html body .szp-tools-switch-item small {
  display: block;
  font-size: .79rem;
  font-weight: 500;
  line-height: 1.95;
  color: var(--szp-v17-muted, #647286);
  /* The ledes are one or two lines; letting a long one push the card taller than its
     neighbours is what made the row look ragged. */
  overflow-wrap: anywhere;
}

html body .szp-tools-switch-item:hover {
  transform: translateY(-2px);
  border-color: rgba(243, 112, 35, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 12px 26px rgba(13, 35, 55, .12);
}
html body .szp-tools-switch-item:active { transform: translateY(0); }
html body .szp-tools-switch-item:focus-visible {
  outline: 3px solid #f4a25f;
  outline-offset: 3px;
}
html body .szp-tools-switch-item.is-current {
  border-color: rgba(243, 112, 35, .5);
  background: rgba(255, 248, 242, .9);
}

@media (max-width: 600px) {
  html body .szp-tools-switch-item {
    min-height: 0;
    padding: 13px 15px;
  }
  html body .szp-tools-switch-item small { font-size: .76rem; line-height: 1.85; }
}

@media (prefers-reduced-motion: reduce) {
  html body .szp-tools-switch-item { transition: none; }
  html body .szp-tools-switch-item:hover { transform: none; }
}

/* The theme paints anchors inside shop loops; the bar is not one of those. */
html body .szp-product-tools a.szp-tools-switch-item,
html body .szp-product-tools a.szp-tools-switch-item:hover { text-decoration: none; }