/* Nordhauser — category / archive page.
   Loaded only on shop / product_category / product_tag (see inc/enqueue.php).
   Sections in source order match woocommerce/archive-product.php:
     breadcrumb → cat-head → subcats → toolbar → sidebar+grid+pagination
     → recently viewed → SEO body
*/

/* ---------- Archive wrapper resets ---------- */
/* On archives our before-main-content hook opens a bare <main class="nh-shop
   nh-archive-main">; each section paints its own band, so kill the .nh-shop
   default vertical padding and any inherited container constraint. */
.nh-archive-main { padding: 0 !important; }

/* ---------- Breadcrumb (mirror of .nh-pdp-crumbs in shop.css) ---------- */
/* Use padding-top / padding-bottom (NOT shorthand `padding: Y 0 Y`) so the
   .container's inherited 32px horizontal padding stays — otherwise the
   breadcrumb sits at the viewport edge while every other section's content
   is constrained to .container, and the misalignment is obvious. */
.nh-cat-crumbs {
  padding-top: 24px;
  padding-bottom: 20px;
  position: relative;
}
.nh-cat-crumbs .woocommerce-breadcrumb { margin: 0; padding: 0; }
/* Full-viewport hairline divider — same trick as .nh-pdp-crumbs::after. */
.nh-cat-crumbs::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 1px;
  background: var(--bone-300);
  pointer-events: none;
}
/* Font / color / size come from shop.css's `.nh-shop .woocommerce-breadcrumb`
   rule — including no text-transform, so sentence case ("Esileht / Vannitoamööbel"
   not "ESILEHT / VANNITOAMÖÖBEL"). Don't re-declare them here. */
.nh-shop .nh-cat-crumbs .woocommerce-breadcrumb { border: 0 !important; }

/* ---------- Cat head ---------- */
.cat-head {
  padding: 28px 0 36px;
}
.cat-head .row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.cat-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terra-600);
  margin-bottom: 14px;
}
.cat-head h1 {
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 20px;
}
.cat-head .intro {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 640px;
  margin: 0;
}
.cat-head .stats {
  display: grid;
  /* minmax(0, 1fr) instead of bare 1fr — long unbreakable Estonian labels
     ("SOODUSHINNAGA", "BRÄNDI") expand bare-1fr tracks to min-content,
     forcing every track in the row wider and overflowing the container.
     minmax(0, 1fr) lets tracks shrink below content min-content. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-left: 1px solid var(--bone-400);
}
.cat-head .stat {
  padding: 4px 18px;
  border-right: 1px solid var(--bone-400);
}
.cat-head .stat:last-child { border-right: 0; }
.cat-head .stat .n {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--green-800);
  font-variant-numeric: tabular-nums;
}
.cat-head .stat .l {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  margin-top: 8px;
}

/* ---------- Subcategory tiles ---------- */
.subcats-wrap { padding: 28px 0 8px; }
.subcats {
  display: grid;
  /* minmax(0, 1fr) — see note on .cat-head .stats. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.subcat {
  position: relative;
  background: var(--bone-200);
  border: 1px solid var(--bone-300);
  border-radius: var(--radius-md);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  transition: all 0.18s ease;
  overflow: hidden;
  min-height: 110px;
  text-decoration: none;
}
/* The background image is set via the `--subcat-bg` custom property on the
   <a> element (subcats.php inline style). Painting it on a pseudo-element
   instead of the host lets us run `filter: brightness()` on JUST the image
   — text and tone tint stay unaffected. */
/* Single filter pass: keep the photo's color, just darken it strongly so
   white text reads cleanly. No tone-tint overlay — the image carries the
   visual identity directly. Tune brightness up/down to taste. */
.subcat::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--subcat-bg, none);
  background-size: cover;
  background-position: center;
  filter: brightness(0.7) saturate(1.1);
  transition: filter 0.25s ease;
  z-index: 0;
}
.subcat:hover::before { filter: brightness(0.85) saturate(1.15); }
.subcat:hover {
  border-color: var(--green-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.subcat .count,
.subcat .name {
  position: relative;
  z-index: 2;
}
.subcat .name {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: white;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.subcat .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* Image-less fallback so text stays legible without a photo. */
.subcat:not(.has-image) { background: var(--ink-700); }

/* ---------- Toolbar ---------- */
.toolbar {
  border-top: 1px solid var(--bone-300);
  border-bottom: 1px solid var(--bone-300);
  margin: 28px 0 28px;
  background: var(--bone-100);
  position: sticky;
  top: 0;
  z-index: 30;
}
.toolbar .row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  /* Use padding-top / padding-bottom (NOT shorthand `padding: 14px 0`) so
     .container's inherited 32px horizontal padding stays — otherwise the
     count-pill / selects sit flush against the viewport edge. Same bug class
     as the .nh-cat-crumbs fix earlier. */
  padding-top: 14px;
  padding-bottom: 14px;
}
.toolbar .left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.toolbar .count-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-700);
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--bone-300);
  border-radius: 999px;
}
.toolbar .count-pill strong {
  color: var(--green-800);
  font-weight: 700;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  background: var(--green-50);
  border: 1px solid var(--green-700);
  color: var(--green-800);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
}
.chip .chip-group {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chip .x {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--green-800);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}
.chip .x:hover { background: var(--terra-500); }
.chip-clear {
  background: transparent;
  color: var(--terra-600);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0 6px;
}
.chip-clear:hover { color: var(--terra-500); }

.toolbar .right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.toolbar select {
  appearance: none;
  border: 1px solid var(--bone-400);
  background: white;
  border-radius: 999px;
  padding: 8px 36px 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-900);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231c1e1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--bone-400);
  border-radius: 999px;
  padding: 3px;
  background: white;
}
.view-toggle button {
  padding: 6px 12px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.view-toggle button.active {
  background: var(--green-800);
  color: white;
}

/* ---------- Sidebar + grid layout ---------- */
.cat-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding-bottom: 64px;
}

/* ---------- Sidebar ---------- */
.sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 100px);
  /* `overflow-x: hidden` clips any hairline horizontal overflow (slider
     handles use transform: translate(-50%) so the leftmost handle's left
     edge sits ~2px past the column; checked-swatch outer rings, hover
     scales etc. similarly stick out a pixel or two). Without this clip,
     overflow-y: auto would expose a horizontal scrollbar at the bottom. */
  overflow-x: hidden;
  overflow-y: auto;
  /* Symmetric horizontal padding gives sidebar contents breathing room
     from both column edges. With padding-left: 0 (the prior state) the
     leftmost color swatches and slider handles sat flush against the
     edge and could appear visually clipped when the vertical scrollbar
     reflowed the content area. */
  padding-left: 8px;
  padding-right: 8px;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--bone-400); border-radius: 999px; }

.fgroup {
  padding: 22px 0;
  border-bottom: 1px solid var(--bone-300);
}
.fgroup:first-child { padding-top: 4px; }
.fgroup h4 {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fgroup h4 .ct {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-400);
  letter-spacing: 0.04em;
}
.fgroup .search-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bone-200);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 12px;
  color: var(--ink-500);
}
.fgroup .search-mini input {
  border: 0;
  background: transparent;
  outline: 0;
  font: inherit;
  font-size: 12.5px;
  flex: 1;
  color: var(--ink-900);
}
.fgroup .more {
  font-size: 12px;
  color: var(--terra-600);
  margin-top: 10px;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.fgroup .more:hover { color: var(--terra-500); }

/* checkbox rows */
.checks {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-700);
  cursor: pointer;
  user-select: none;
}
.check.is-hidden { display: none; }
.check input { display: none; }
.check .box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--bone-400);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: white;
  color: white;
}
.check input:checked + .box {
  background: var(--green-800);
  border-color: var(--green-800);
}
.check input:checked + .box::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}
.check .lbl { flex: 1; font-size: 13px; }
.check .ct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
}
.check:hover { color: var(--ink-900); }

/* color swatches */
.swatch-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 10.5px;
  color: var(--ink-700);
  text-align: center;
  line-height: 1.1;
}
.swatch input { display: none; }
.swatch .dot {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1.5px solid var(--bone-400);
  position: relative;
  transition: transform 0.15s ease;
}
.swatch:hover .dot { transform: scale(1.06); }
.swatch input:checked ~ .dot {
  border-color: var(--green-800);
  box-shadow: 0 0 0 2px white inset, 0 0 0 4px var(--green-800);
}
.swatch .nm { font-weight: 500; }
.swatch .ct {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-400);
}

/* range slider — shared by Hinnaklass / Pikkus / Laius. The PHP partial
   nh_render_range_filter() in template-parts/category/sidebar.php emits
   <div class="range" data-nh-range="<key>"> with min_<key> + max_<key>
   number inputs and two .slider-handle elements. category.js wires drag
   behavior generically by iterating [data-nh-range]. */
.range { margin-top: 4px; }
.range-fields {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.range-fields .pf {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.range-fields label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}
.range-fields .input {
  display: flex;
  align-items: baseline;
  gap: 4px;
  border: 1px solid var(--bone-400);
  background: white;
  border-radius: 6px;
  padding: 7px 10px;
}
.range-fields input {
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 13px;
  width: 100%;
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.range-fields .cur {
  font-size: 12px;
  color: var(--ink-400);
}
.slider-track {
  position: relative;
  height: 4px;
  background: var(--bone-300);
  border-radius: 999px;
  margin: 14px 6px 8px;
}
.slider-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--green-800);
  border-radius: 999px;
}
.slider-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: white;
  border: 2px solid var(--green-800);
  border-radius: 999px;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.slider-handle:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
}
.range-bounds {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-400);
  margin-top: 8px;
  letter-spacing: 0.04em;
}
/* Single-value fallback — used when every product in the archive scope shares
   the same dimension (e.g. all Cedral Lap boards are 360 cm). Drag would
   divide by zero, so render an info pill that shows the value statically. */
.range-static {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-700);
  letter-spacing: 0.04em;
  padding: 8px 12px;
  background: var(--bone-200);
  border-radius: 6px;
  margin-top: 4px;
}
.fgroup-toggles { padding: 20px 0; }

/* ---------- Product grid (3-col within content column) ---------- */
.cat-content ul.products,
.cat-content ul.products.columns-3,
.cat-content ul.products.columns-4 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.cat-content ul.products li.product {
  margin: 0;
  /* Grid items default to `min-width: auto`, which means they refuse to
     shrink below their content's min-content width. Estonian product names
     can have long unbreakable words (`puitkarkassile`, `kiudtsementplaadid`)
     that exceed half the container width on a narrow viewport — the track
     then expands and the second column overflows past the viewport edge.
     `min-width: 0` lets the grid track honor its `1fr` allotment regardless
     of content; `overflow: hidden` clips anything that still tries to leak
     out (the inner card already handles ellipsis on titles via line-clamp). */
  min-width: 0;
  overflow: hidden;
}

/* ---------- List view ---------- *
 * Server-side: <div class="cat-content" data-view="list"> emitted by
 * woocommerce/archive-product.php when ?view=list is in the URL.
 * Client-side: category.js toggles the attribute on view-toggle clicks.
 *
 * Strategy: keep card markup identical (same <li><a class="product"> shell as
 * grid view) — only reflow via CSS. ul flips from 3-col grid to a column
 * stack; each <a class="product"> flips from vertical flex to horizontal
 * grid (200px thumb · 1fr body · auto price).
 */
.cat-content[data-view="list"] ul.products,
.cat-content[data-view="list"] ul.products.columns-3,
.cat-content[data-view="list"] ul.products.columns-4 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cat-content[data-view="list"] li.product { width: 100%; }
/* `.product` is the <a> wrapper inside <li class="product"> — main.css gives
   it `display: flex; flex-direction: column`. Override to a 3-col grid for
   list view. */
.cat-content[data-view="list"] li.product > .product {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 14px 18px;
}
.cat-content[data-view="list"] li.product > .product .thumb {
  width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
}
.cat-content[data-view="list"] li.product > .product .body {
  padding: 0;
  gap: 6px;
}
.cat-content[data-view="list"] li.product > .product .specs {
  margin-top: 0;
}
/* Pull price-row out of the body's vertical stack into its own grid column.
   Lose the dashed top-border (it was a grid-card affordance — separates
   price from the body when stacked vertically; horizontally it just clutters). */
.cat-content[data-view="list"] li.product > .product .price-row {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.cat-content[data-view="list"] li.product > .product .price {
  font-size: 24px;
}
/* Below ~860 px content column the 200px thumb starts squeezing the title.
   Drop to 150px in the in-grid breakpoint (sidebar still sits at 280px so
   content col reduces to ~520px before the layout collapses). */
@media (max-width: 1100px) {
  .cat-content[data-view="list"] li.product > .product {
    grid-template-columns: 150px 1fr auto;
    gap: 16px;
  }
  .cat-content[data-view="list"] li.product > .product .thumb { width: 150px; }
}

/* ---------- Pagination (WC's, restyled) ---------- */
.cat-content .woocommerce-pagination {
  margin-top: 32px;
  padding: 20px 0;
  border-top: 1px solid var(--bone-300);
}
.cat-content .woocommerce-pagination .page-numbers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 4px;
  justify-content: center;
}
.cat-content .woocommerce-pagination .page-numbers li a,
.cat-content .woocommerce-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-700);
  text-decoration: none;
}
.cat-content .woocommerce-pagination .page-numbers li a:hover {
  border-color: var(--bone-400);
}
.cat-content .woocommerce-pagination .page-numbers li .current {
  background: var(--green-800);
  border-color: var(--green-800);
  color: white;
  font-weight: 600;
}

/* ---------- Recently viewed ---------- */
.recent {
  padding: 48px 0 64px;
  background: var(--bone-200);
}
.recent .head-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 24px;
}
.recent .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  margin-bottom: 8px;
}
.recent h3 {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.recent-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.recent-card {
  background: white;
  border-radius: var(--radius-md);
  border: 1px solid var(--bone-300);
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.recent-card:hover { border-color: var(--green-700); }
.recent-card .thumb-mini {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--bone-200);
  border-radius: 6px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recent-card .thumb-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recent-card .info { flex: 1; min-width: 0; }
.recent-card .nm {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.recent-card .pr {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: var(--green-800);
  letter-spacing: -0.01em;
}
.recent-card .pr .woocommerce-Price-amount { font-weight: 800; }
.recent-card .pr del { color: var(--ink-400); font-weight: 500; margin-right: 4px; }

/* ---------- SEO body ---------- */
.seo-block {
  padding: 64px 0;
  background: white;
  border-top: 1px solid var(--bone-300);
}
.seo-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
}
.seo-grid--solo {
  display: block;
  max-width: 720px;
  margin: 0 auto;
}
.seo-grid .toc {
  position: sticky;
  top: 80px;
  align-self: start;
}
.seo-grid .toc .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terra-600);
  font-weight: 600;
  margin-bottom: 12px;
}
.seo-grid .toc h3 {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  line-height: 1.05;
}
.seo-grid .toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: item;
  border-left: 1px solid var(--bone-300);
}
.seo-grid .toc li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 13.5px;
  color: var(--ink-700);
  counter-increment: item;
  font-weight: 500;
  margin-left: -1px;
  border-left: 2px solid transparent;
}
.seo-grid .toc li a {
  color: inherit;
  text-decoration: none;
}
.seo-grid .toc li::before {
  content: "0" counter(item);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-400);
  position: absolute;
  left: 8px;
  top: 8px;
}
.seo-grid .toc li.on {
  border-left-color: var(--green-800);
  color: var(--green-800);
}
.seo-grid .toc li:hover { color: var(--green-700); }

.seo-collapsed {
  position: relative;
  max-height: 320px;
  overflow: hidden;
}
.seo-collapsed::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, white 70%);
  pointer-events: none;
}
.seo-collapsed.expanded { max-height: none; }
.seo-collapsed.expanded::after { display: none; }
.seo-content h3 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 36px 0 12px;
  line-height: 1.2;
  scroll-margin-top: 100px;
}
.seo-content h3:first-child { margin-top: 0; }
.seo-content p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 0 12px;
}
.seo-content p strong { color: var(--ink-900); }
.seo-content ul, .seo-content ol {
  margin: 0 0 16px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-700);
}
.seo-expand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 22px;
  border: 1px solid var(--bone-400);
  border-radius: 999px;
  background: white;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  cursor: pointer;
}
.seo-expand:hover { border-color: var(--green-800); color: var(--green-800); }
.seo-expand .i { transition: transform 0.2s ease; }
.seo-expand.expanded .i { transform: rotate(180deg); }

/* ---------- Responsive (Stage 1 — reflow) ----------
 * Layered desktop-first overrides. Three tiers:
 *   desktop   ≥ 1024 px  (base, no media query)
 *   tablet    640 – 1023 px
 *   mobile    < 640 px
 * The Stage 2 filter drawer adds drawer mechanics on top of these reflow
 * rules; for now the sidebar simply stacks inline above the grid.
 */

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  /* Cat head stacks (lede + stats column drops below H1). */
  .cat-head { padding: 24px 0 28px; }
  .cat-head .row { grid-template-columns: 1fr; gap: 28px; }
  .cat-head h1 { font-size: 48px; letter-spacing: -0.03em; }
  /* No left-edge border when the stats row sits under the lede instead
     of beside it — internal dividers between stats survive. */
  .cat-head .stats { border-left: 0; }
  .cat-head .stat { padding: 4px 14px; }
  .cat-head .stat .n { font-size: 24px; }

  /* Subcategory tiles 6 → 3. */
  .subcats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Sidebar inline above grid (Stage 2 replaces this with off-canvas drawer). */
  .cat-layout { grid-template-columns: 1fr; gap: 24px; }
  .sidebar {
    position: static;
    max-height: none;
    overflow-x: visible;
    overflow-y: visible;
    padding-left: 0;
    padding-right: 0;
  }

  /* Product grid 3 → 2. Dual selector per Gotcha 23. */
  .cat-content ul.products,
  .cat-content ul.products.columns-3,
  .cat-content ul.products.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* List view: shrink the 200px thumb to 130px in 2-col tablet width. */
  .cat-content[data-view="list"] li.product > .product {
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 16px;
  }
  .cat-content[data-view="list"] li.product > .product .thumb { width: 130px; }
  .cat-content[data-view="list"] li.product > .product .price-row {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    border-top: 1px dashed var(--bone-300);
    padding-top: 10px;
    margin-top: 4px;
  }

  /* Toolbar simplification at tablet + mobile:
     - Hide view-toggle + per-page (luxuries — list view already collapses
       to grid on mobile, and per-page 24/48/96 is rarely changed).
     - Give orderby the full row width.
     - Sticky positioning stays from the desktop default. tuneSticky() in
       category.js writes top: 0 on mobile (header is non-sticky there) and
       top: <headerHeight> on tablet/desktop (so toolbar pins below the
       still-sticky header). */
  .toolbar .right { width: 100%; gap: 8px; }
  .toolbar .right .view-toggle,
  .toolbar .right select[name="per_page"] { display: none; }
  .toolbar .right select[name="orderby"] {
    flex: 1;
    width: 100%;
    padding: 11px 36px 11px 16px;
    font-size: 14px;
  }

  /* Safety overflow-clip on the product grid container so any horizontal
     overflow (long word forcing a min-content-wider grid track than the
     viewport, etc.) is contained — won't cause the page itself to gain a
     horizontal scrollbar. The min-width:0 on <li.product> below tries to
     prevent the overflow at source; this is the belt-and-suspenders. */
  .cat-content { overflow-x: hidden; }

  /* Recently viewed 4 → 3. */
  .recent-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* SEO body stacks: TOC above body, both unsticky. */
  .seo-grid { grid-template-columns: 1fr; gap: 28px; }
  .seo-grid .toc {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .seo-grid .toc h3 { font-size: 24px; margin-bottom: 16px; }
  .seo-block { padding: 48px 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 639px) {
  /* Cat head: tighter typography for the 360-px viewport. */
  .cat-head { padding: 16px 0 20px; }
  .cat-head .row { gap: 20px; }
  .cat-head h1 { font-size: 32px; line-height: 1.05; margin-bottom: 14px; }
  .cat-head .intro { font-size: 14.5px; }
  .cat-head .stat { padding: 2px 10px; }
  .cat-head .stat .n { font-size: 20px; }
  .cat-head .stat .l { font-size: 9.5px; margin-top: 4px; }

  /* Subcategory tiles 3 → 2. */
  .subcats-wrap { padding: 20px 0 4px; }
  .subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .subcat { min-height: 96px; padding: 12px 14px 14px; gap: 24px; }
  .subcat .name { font-size: 13px; }

  /* Mobile-only: chips become a horizontal-scroll strip. */
  .toolbar { margin: 16px 0 16px; }
  .toolbar .row {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
  }
  .toolbar .left {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .toolbar .count-pill,
  .toolbar .chip,
  .toolbar .chip-clear { flex-shrink: 0; }

  /* Product grid 2-up. Cards align with the rest of the content — same
     left/right edges as cat-head, toolbar, recently-viewed, SEO body. No
     edge-bleed: visual alignment is more important than squeezing a few
     extra pixels out of each card. */
  .cat-content ul.products,
  .cat-content ul.products.columns-3,
  .cat-content ul.products.columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  /* List view collapses to grid on mobile (200×200 thumb cannot fit in
     360-px viewport). The view-toggle is hidden anyway, but a `?view=list`
     URL from a desktop bookmark still degrades cleanly to grid. */
  .cat-content[data-view="list"] ul.products,
  .cat-content[data-view="list"] ul.products.columns-3,
  .cat-content[data-view="list"] ul.products.columns-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    flex-direction: initial;
  }
  .cat-content[data-view="list"] li.product > .product {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 0;
    padding: 0;
    align-items: stretch;
  }
  .cat-content[data-view="list"] li.product > .product .thumb {
    width: 100%;
    aspect-ratio: 1 / 0.85;
  }
  .cat-content[data-view="list"] li.product > .product .body {
    padding: var(--pad-card);
  }
  .cat-content[data-view="list"] li.product > .product .price-row {
    grid-column: auto;
    grid-row: auto;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    border-top: 1px dashed var(--bone-300);
    padding-top: 10px;
    margin-top: auto;
  }
  .cat-content[data-view="list"] li.product > .product .price { font-size: 18px; }

  /* Pagination — bump to 40×40 touch-target floor. */
  .cat-content .woocommerce-pagination .page-numbers li a,
  .cat-content .woocommerce-pagination .page-numbers li span {
    min-width: 40px;
    height: 40px;
  }

  /* Recently viewed → horizontal scroller with snap. */
  .recent { padding: 32px 0 40px; }
  .recent .head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 16px;
  }
  .recent h3 { font-size: 22px; }
  .recent-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .recent-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }

  /* SEO body: drop the TOC sidebar entirely on mobile — H3 IDs survive in
     the rendered body so search-engine passage indexing is unaffected.
     Tighten typography to fit narrow viewport. */
  .seo-block { padding: 32px 0; }
  .seo-grid { display: block; }
  .seo-grid .toc { display: none; }
  .seo-content h3 { font-size: 19px; margin-top: 24px; }
  .seo-content p,
  .seo-content ul,
  .seo-content ol { font-size: 14.5px; }
}

/* ---------- Responsive (Stage 2 — filter drawer) ----------
 * Desktop: drawer chrome (backdrop, head, foot, trigger) is hidden, and the
 * .sidebar-drawer-wrap collapses to display:contents so its <aside> child
 * lands as a direct grid cell of .cat-layout — no layout impact at all.
 *
 * Tablet + mobile: wrap becomes a fixed-position overlay; sidebar slides in
 * from the left; backdrop fades in. Filter-trigger button (in toolbar.php's
 * .toolbar .left) opens the drawer; head × / footer "Näita N toodet" / Esc
 * / backdrop-click all close it. The URL builder in buildUrl() works through
 * the drawer unchanged — every click reloads the page (matches Bauhof,
 * Argos, every other major retail filter UX).
 */

/* Desktop — drawer is invisible scaffolding. */
.sidebar-drawer-wrap { display: contents; }
.sidebar-backdrop,
.sidebar-head,
.sidebar-foot,
.filter-trigger { display: none; }

@media (max-width: 1023px) {
  /* Drawer wrap becomes a fixed-position overlay. pointer-events:none until
     opened, so taps pass through to the page underneath. */
  .sidebar-drawer-wrap {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
  }
  .sidebar-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(15, 42, 34, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .sidebar-drawer-wrap.is-open { pointer-events: auto; }
  .sidebar-drawer-wrap.is-open .sidebar-backdrop { opacity: 1; }

  /* Override Stage 1's static-positioned, padding-stripped sidebar — drawer
     mode has its own positioning + padding. The Stage 1 rule already runs
     in this media query; later source order wins for equal specificity.
     Layout: flex column with head/foot fixed-size and the .sidebar-body
     wrapper as the flex:1 scroll container. Block flow with sticky head/foot
     looked right but isn't reliable inside a transformed parent — the
     overflow:auto on the host and sticky:bottom on the foot fight on iOS
     and on Chrome when the host has a transition'd transform. The
     scrolling-body pattern is the canonical fix. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 90vw);
    /* Explicit height — top:0+bottom:0 alone should be enough but Chrome's
       mobile emulation occasionally fails to derive height when overflow:
       hidden is set; making it explicit removes the ambiguity. */
    height: 100vh;
    max-height: 100vh;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow: hidden;
    padding: 0;
    border-right: 1px solid var(--bone-300);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
  }
  .sidebar-drawer-wrap.is-open .sidebar { transform: translateX(0); }
  .sidebar-body {
    /* `flex: 1` expands to `flex: 1 1 0%`. Basis 0% (not auto) is the
       canonical scrolling-flex-child pattern: starts at zero height and
       grows to fill remaining space, so overflow:auto activates exactly
       when content > available space. With basis=auto the item sizes to
       content first and then `min-height: 0` lets it shrink — works in
       theory but can fail in transformed-ancestor / position:fixed nests
       like this drawer (Chrome mobile emulation specifically). */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Bottom padding gives the last filter group visual breathing room
       before it meets the sticky foot's border-top when user scrolls all
       the way down. */
    padding: 0 16px 24px;
  }

  /* Drawer head — flex-shrink:0 sibling of the scroll body. */
  .sidebar-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--bone-300);
    background: white;
    flex: 0 0 auto;
  }
  .sidebar-head h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    flex: 1;
  }
  .sidebar-clear {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--terra-600);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .sidebar-clear:hover { color: var(--terra-500); }
  .sidebar-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--bone-300);
    color: var(--ink-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .sidebar-close:hover { border-color: var(--ink-700); }

  /* Drawer foot — flex-shrink:0 sibling pinned to bottom by flex-column.
     Safe-area padding accommodates the iOS Home indicator. */
  .sidebar-foot {
    display: block;
    background: white;
    padding: 16px;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    border-top: 1px solid var(--bone-300);
    flex: 0 0 auto;
  }
  .sidebar-apply {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    background: var(--green-800);
    color: white;
    border: 0;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .sidebar-apply strong { font-weight: 800; }
  .sidebar-apply:hover { background: var(--green-900); }

  /* Toolbar trigger — sits as the first child of .toolbar .left, before
     the count-pill, so it's the leading control on tablet/mobile. */
  .filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--ink-900);
    color: var(--ink-900);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    min-height: 36px;
  }
  .filter-trigger:hover { background: var(--ink-900); color: white; }
  .filter-trigger .cnt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--green-800);
    color: white;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    margin-left: 2px;
  }
  .filter-trigger:hover .cnt { background: white; color: var(--green-800); }
}

@media (max-width: 639px) {
  /* Mobile — trigger is the primary toolbar control. Bump to 40-px touch floor. */
  .filter-trigger {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 13.5px;
  }
}

/* ---------- Responsive (Stage 4 — touch-target sweep) ----------
 * Bumps interactive elements to the 40-px touch-target floor and adds
 * invisible expanded hit-zones to elements that need to stay visually small
 * (range slider handles, toolbar chip × buttons). The visual sizes don't
 * change on desktop — only the tap target grows on touch widths.
 */
@media (max-width: 639px) {
  /* Range slider handles: bump visual to 22 px and add a 44×44 invisible
     hit zone via ::before. The pointerdown handler in category.js reads
     `track.getBoundingClientRect()` for math, so visual size doesn't affect
     drag calibration — only the user-perceived target grows. */
  .slider-handle {
    width: 22px;
    height: 22px;
  }
  .slider-handle::before {
    content: "";
    position: absolute;
    inset: -11px;
  }

  /* Toolbar active-filter chip × — bump visual to 22 px and expand hit zone.
     `position: relative` is needed on .x so the absolute hit-zone anchors. */
  .chip .x {
    width: 22px;
    height: 22px;
    font-size: 13px;
    position: relative;
  }
  .chip .x::before {
    content: "";
    position: absolute;
    inset: -10px;
  }

  /* Sidebar checkbox row — already a tappable label, but the row height
     was ~32 px (gap: 9 + content). Bump to ≥ 40 by widening padding. */
  .check { padding: 4px 0; min-height: 36px; }

  /* Sidebar swatch — visual stays 30 px, but bump padding so the column
     row hits 40 px. */
  .swatch .dot { width: 32px; height: 32px; }

  /* Sort select on mobile already 41 px (Stage 1). Pagination already 40 px
     (Stage 1). Filter trigger already 40 px (Stage 2). Nothing more here. */
}