/* ──────────────────────────────────────────────────────────────────
   CATEGORY PAGE TEMPLATE — RönYen
   Lane swap: body.lane-sauna (default) | body.lane-ice. The lane class
   is added by the body_class filter in functions.php (ry_category_lane).
   All tokens, type and spacing come from the RönYen brand guide.
   ────────────────────────────────────────────────────────────────── */
:root{
  --bg:#F8F7F4; --surface:#F0EEE9; --section-alt:#E8E5DF;
  --border:#D8D4CE; --hairline:#E8E5DF;
  --heading:#1A1F24; --body:#3D4550; --muted:#6B7480; --placeholder:#9AA0A8;
  --nav:#252D35; --nav-muted:#9AA0A8;
  --cta:#F06020; --cta-hover:#D04810; --cta-tint:#FFF0E8;
  --sauna:#E88050; --sauna-light:#FDEEE6; --sauna-hover:#C85830; --sauna-text:#8A3820;
  --ice:#3D87C4;  --ice-light:#E8F3FB;   --ice-hover:#2A6EA8;  --ice-text:#1A4878;
  --special:#3DA854;
  --f:'Prompt',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-th:'Sarabun',var(--f);
  --r-sm:4px; --r-md:5px; --r-lg:6px; --r-xl:10px;
  --shadow-card:0 1px 4px rgba(0,0,0,.06);
  --shadow-product:0 10px 28px rgba(26,31,36,.08), 0 2px 6px rgba(26,31,36,.05);
  --maxw:1440px;

  /* Lane vars — overridden below */
  --lane:var(--sauna);
  --lane-light:var(--sauna-light);
  --lane-text:var(--sauna-text);
  --lane-hover:var(--sauna-hover);
}
body.lane-ice{
  --lane:var(--ice); --lane-light:var(--ice-light);
  --lane-text:var(--ice-text); --lane-hover:var(--ice-hover);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  font-family:var(--f); font-weight:300; color:var(--body);
  background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px}

/* Type (per guide) */
h1,h2,h3,h4{color:var(--heading); font-family:var(--f); letter-spacing:-.015em}
.t-h1{font-weight:600; font-size:clamp(2rem,3.4vw,2.75rem); line-height:1.08}
.t-h2{font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.2}
.t-body{font-weight:300; font-size:1rem; line-height:1.65}
.t-eyebrow{
  font-weight:600; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f); font-weight:600; font-size:.875rem; line-height:1;
  letter-spacing:.02em; padding:.875rem 1.5rem; border-radius:var(--r-lg);
  border:1px solid transparent; cursor:pointer; min-height:48px;
  transition:background .15s, transform .1s, border-color .15s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--cta); color:#fff}
.btn-primary::after{
  content:""; width:13px; height:13px; flex:none;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  transition:transform .2s ease-out;
}
.btn-primary:hover{background:var(--cta-hover)}
.btn-primary:hover::after{transform:translate(2px,-2px)}
.btn-dark{background:var(--nav); color:#fff}
.btn-dark::after{
  content:""; width:13px; height:13px; flex:none;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  transition:transform .2s ease-out;
}
.btn-dark:hover{background:#000}
.btn-dark:hover::after{transform:translate(2px,-2px)}
.tlink{
  display:inline-flex; align-items:center; gap:.45rem;
  font-weight:500; font-size:.875rem; color:var(--heading);
  text-decoration:underline; text-underline-offset:5px;
  text-decoration-color:rgba(0,0,0,.25);
  transition:text-decoration-color .15s, color .15s;
}
.tlink:hover{text-decoration-color:currentColor}

/* Lane badge — per guide */
.badge.b-lane-tag{
  display:inline-block; font-weight:400; font-size:.625rem;
  line-height:1.4; letter-spacing:.05em; text-transform:uppercase;
  padding:.1875rem .625rem; border-radius:var(--r-sm);
  background:var(--lane-light); color:var(--lane-text);
}

/* ──────────────────────────────────────────────────────────────────
   1 — Category hero  ·  Variant C: Full-bleed image with scrim
   (lifted from .shop-hero--bg in the brand guide)
   ────────────────────────────────────────────────────────────────── */
.cat-hero-wrap{padding:24px 40px 0; max-width:var(--maxw); margin:0 auto}
.shop-hero{
  background:#fff; border:1px solid var(--hairline); border-radius:12px;
  padding:36px 40px; position:relative; overflow:hidden;
}
.shop-hero .top{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; margin-bottom:18px; flex-wrap:wrap;
}
.shop-hero .accent-rule{
  width:48px; height:3px; border-radius:2px; background:var(--lane); margin-bottom:18px;
}
.shop-hero .grid{
  display:grid; grid-template-columns:1fr 1.35fr; gap:48px; align-items:start;
}
.shop-hero h1{
  font-family:var(--f); font-weight:600;
  font-size:clamp(1.9rem,2.6vw,2.4rem);
  line-height:1.1; letter-spacing:-.015em; color:var(--heading);
}
.shop-hero .sub{
  font-size:1.05rem; font-weight:400; color:var(--body);
  margin-top:6px; line-height:1.4;
}
.shop-hero .desc{
  font-size:.875rem; line-height:1.7; color:var(--body);
}
.shop-hero .desc b{color:var(--heading); font-weight:600}
.shop-hero .actions{
  display:flex; gap:20px; align-items:center; margin-top:18px; flex-wrap:wrap;
}
.shop-hero .stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); margin-top:28px;
  padding-top:24px; border-top:1px solid var(--hairline); gap:24px;
}
.shop-hero .stat-strip .stat{display:flex; flex-direction:column; gap:4px; min-width:0}
.shop-hero .stat-strip .stat b{
  font-weight:600; font-size:1.1rem; color:var(--heading); letter-spacing:-.01em;
}
.shop-hero .stat-strip .stat span{
  font-size:.72rem; color:var(--muted); letter-spacing:.04em;
  text-transform:uppercase; font-weight:500;
}

/* Full-bleed scrim variant */
.shop-hero--bg{
  background:#111; color:#fff; padding:48px 44px;
  position:relative; isolation:isolate;
  border:0; overflow:hidden;
}
.shop-hero--bg .bg{position:absolute; inset:0; z-index:-2; overflow:hidden}
.shop-hero--bg .bg img{width:100%; height:100%; object-fit:cover; display:block}
.shop-hero--bg::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(26,31,36,.88) 0%, rgba(26,31,36,.72) 38%, rgba(26,31,36,.35) 78%, rgba(26,31,36,.18) 100%);
}
.shop-hero--bg h1{color:#fff}
.shop-hero--bg .sub{color:rgba(255,255,255,.88)}
.shop-hero--bg .desc{color:rgba(255,255,255,.82); max-width:54ch}
.shop-hero--bg .desc b{color:#fff}
.shop-hero--bg .accent-rule{background:var(--lane)}

.shop-hero--bg .stat-strip{border-top-color:rgba(255,255,255,.18)}
.shop-hero--bg .stat-strip .stat b{color:#fff}
.shop-hero--bg .stat-strip .stat span{color:rgba(255,255,255,.65)}
.shop-hero--bg .badge.b-lane-tag{
  background:rgba(255,255,255,.14); color:#fff;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.shop-hero--bg .tlink{color:#fff}
.shop-hero--bg .tlink:hover{text-decoration-color:#fff}

/* ──────────────────────────────────────────────────────────────────
   1b — Category intro (long-form body copy + H2 subheadings)
   Sits below the hero, above the filter bar. Constrained measure for
   readability; H2s carry a small lane-coloured rule; links pick up the
   category's colour lane and underline.
   ────────────────────────────────────────────────────────────────── */
.cat-intro{padding:8px 0 4px}
.cat-intro-prose{max-width:760px}
.cat-intro-prose > :first-child{margin-top:0}
.cat-intro-prose p{
  font-weight:300; font-size:1.0625rem; line-height:1.7;
  color:var(--body); margin:0 0 1.1em;
}
.cat-intro-prose h2{
  font-weight:500; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.25;
  color:var(--heading); margin:1.9em 0 .5em; padding-top:.2em;
}
.cat-intro-prose h2::after{
  content:""; display:block; width:42px; height:2px; margin-top:.5em;
  background:var(--lane); border-radius:2px;
}
.cat-intro-prose a{
  color:var(--lane-text); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.cat-intro-prose a:hover{color:var(--lane-hover)}
.cat-intro-prose ul,.cat-intro-prose ol{margin:0 0 1.1em; padding-left:1.25em}
.cat-intro-prose li{margin:0 0 .4em; line-height:1.65}

/* ──────────────────────────────────────────────────────────────────
   2 — Filter bar wrapper (#41)
   Hosts the plugin's [sisu_filter_bar] component under the hero, above the
   grid, with EVEN vertical spacing. The standalone component ships
   `margin-bottom:28px` and no top margin (the unbalanced gap #41 fixes); we
   zero its own margin and own the rhythm here with symmetric padding so the
   bar sits balanced between hero and grid. Brand spacing, tight.
   ────────────────────────────────────────────────────────────────── */
.cat-filter-wrap{
  max-width:var(--maxw); margin:0 auto; padding:14px 40px;
  /* #60: dock the filter bar flush at the bottom of the sticky header when it
     stuck-scrolls (--ry-header-h is the live header height set in ronyen.js;
     was previously not sticky, so it scrolled away / the legacy rail floated
     at top:0). Opaque page bg so products scroll cleanly underneath, never
     showing through. z-index sits above product cards, below the header (100). */
  position:sticky; top:var(--ry-header-h, 92px); z-index:30;
  background:var(--bg);
}
.cat-filter-wrap .wrap{ padding:0; }
.cat-filter-wrap .sisu-filter-bar-standalone.sisu-catalog{ margin-bottom:0; }
/* #60: tighten the gap between the filter bar and the "Browse {category}"
   heading (was 28px). Applies to every category page. */
.cat-filter-wrap + .grid-section{ padding-top:12px; }

/* ──────────────────────────────────────────────────────────────────
   2b — Legacy sticky filter bar (retained styles; component above is primary)
   ────────────────────────────────────────────────────────────────── */
.filter-rail{
  /* #60: legacy rail (superseded by the now-sticky .cat-filter-wrap above; not
     in the current template markup). Offset aligned to the header height too so
     it can't float at top:0 if ever reinstated. */
  position:sticky; top:var(--ry-header-h, 92px); z-index:20;
  background:var(--surface);
  border-bottom:1px solid var(--hairline);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.filter-rail .wrap{
  padding-top:18px; padding-bottom:18px;
}
.filter-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.filter-bar .label{
  font-size:.72rem; font-weight:600; color:var(--muted);
  letter-spacing:.16em; text-transform:uppercase;
  margin-right:4px;
}
.filt{
  position:relative;
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-md);
  padding:10px 36px 10px 14px; font-size:.86rem; font-weight:500;
  color:var(--heading); font-family:var(--f); cursor:pointer;
  appearance:none; min-width:130px; line-height:1;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  transition:border-color .12s, box-shadow .12s;
}
.filt:hover{border-color:var(--border)}
.filt:focus{outline:none; border-color:var(--lane); box-shadow:0 0 0 3px color-mix(in oklab, var(--lane) 18%, transparent)}
.filt[data-active="true"]{
  border-color:var(--lane); color:var(--lane-text); background-color:var(--lane-light);
  font-weight:600;
}
.filt[data-active="true"]::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--lane); display:inline-block; margin-right:8px; vertical-align:1px;
}
.filt-right{margin-left:auto; display:flex; align-items:center; gap:18px}
.filt-count{font-size:.86rem; color:var(--muted)}
.filt-count b{color:var(--heading); font-weight:600}
.view-toggle{
  display:inline-flex; background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-md); padding:3px;
}
.view-toggle button{
  width:32px; height:30px; border-radius:3px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted); transition:background .12s, color .12s;
}
.view-toggle button.is-active{background:var(--heading); color:#fff}
.view-toggle svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8}

/* Active filter chips */
.chip-rail{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--hairline);
}
.chip-rail .chip-label{
  font-size:.7rem; font-weight:600; color:var(--muted);
  letter-spacing:.14em; text-transform:uppercase;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 8px 6px 12px; border-radius:999px;
  background:var(--lane-light); color:var(--lane-text);
  border:1px solid color-mix(in oklab, var(--lane) 40%, transparent);
  font-size:.78rem; font-weight:500;
}
.chip .x{
  width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--lane-text); cursor:pointer;
  transition:background .12s;
}
.chip .x:hover{background:rgba(0,0,0,.08)}
.chip-clear{
  font-size:.74rem; font-weight:500; color:var(--muted);
  margin-left:4px; text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
.chip-clear:hover{color:var(--heading)}

/* ──────────────────────────────────────────────────────────────────
   3 — Product grid + product card (NEW COMPONENT)
   ────────────────────────────────────────────────────────────────── */
.grid-section{padding:64px 0 96px}
.section-band{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; margin-bottom:36px;
}
.section-band h2{
  font-weight:400; font-size:clamp(1.5rem,2.2vw,1.875rem);
  letter-spacing:-.01em; color:var(--heading);
  position:relative; padding-bottom:14px;
}
.section-band h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:42px; height:2px; background:var(--lane); border-radius:2px;
}
.section-band .meta{
  font-size:.86rem; color:var(--muted); line-height:1.5; text-align:right;
}

.prod-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}

/* Product card — NEW COMPONENT, built from brand tokens */
.pcard{
  background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  box-shadow:var(--shadow-card);
  transition:transform .22s ease, box-shadow .22s ease, border-color .15s;
}
.pcard:hover{
  transform:translateY(-3px);
  border-color:var(--border);
  box-shadow:var(--shadow-product);
}
.pcard .img{
  aspect-ratio:4/3; position:relative;
  background:#111; overflow:hidden;
}
.pcard .img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .55s ease;
}
.pcard:hover .img img{transform:scale(1.03)}
.pcard .badges{
  position:absolute; top:14px; left:14px; right:14px;
  display:flex; gap:6px; justify-content:space-between; align-items:flex-start;
}
.pcard .badges .left{display:flex; gap:6px; flex-wrap:wrap}
.badge{
  display:inline-block; font-weight:600; font-size:.62rem;
  line-height:1.4; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.92); color:var(--heading);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.badge.b-lane{background:var(--lane); color:#fff}
.badge.b-special{background:var(--special); color:#fff}
.badge.b-premium{background:var(--nav); color:#fff}
.badge.b-budget{background:#EDECEA; color:var(--muted)}

.pcard .body{
  padding:18px 20px 20px; display:flex; flex-direction:column; flex:1;
}
.pcard .eyebrow{
  font-weight:600; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.pcard .title{
  font-family:var(--f); font-weight:500; font-size:1.1rem;
  line-height:1.25; color:var(--heading); letter-spacing:-.005em;
  margin-bottom:10px;
}
.pcard .specs{
  font-size:.82rem; font-weight:300; color:var(--body);
  line-height:1.5;
}
.pcard .keyspecs{
  font-size:.78rem; font-weight:400; color:var(--muted);
  line-height:1.5; margin-top:4px;
}
.pcard .foot{
  margin-top:auto; padding-top:16px;
  border-top:1px solid var(--hairline);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.pcard .price{display:flex; flex-direction:column; gap:2px}
.pcard .price .from{font-size:.72rem; color:var(--muted); font-weight:400}
.pcard .price .now{
  font-size:1.1rem; font-weight:600; color:var(--heading);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
/* Power pills (kW / HP) — Harvia-landing card style. The range pill is the
   highlighted headline; the option pills mirror the .hkw picker pills. They sit
   between the title and the spec lines. */
/* Whole-card click: an absolute overlay link covers the card. The individual
   kW/HP option pills are real <a> deep-links (?size=) and sit ABOVE the overlay
   (z-index) so they navigate to the product with that size pre-selected; the
   range pill stays below the overlay (a click there just opens the product). */
.pcard-overlay{position:absolute; inset:0; z-index:1; border-radius:inherit}
.pcard-power{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px}
.pcard-power-range{
  font-size:.78rem; font-weight:600; line-height:1; color:var(--sauna-text);
  background:var(--sauna-light); border:1px solid var(--sauna);
  border-radius:999px; padding:6px 12px; font-variant-numeric:tabular-nums;
}
.pcard-power-opts{display:inline-flex; flex-wrap:wrap; gap:6px; position:relative; z-index:2}
.pcard-power-opt{
  font-size:.72rem; font-weight:600; line-height:1; color:var(--heading);
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:5px 10px; font-variant-numeric:tabular-nums; text-decoration:none;
  transition:border-color .15s, background .15s, color .15s;
}
.pcard-power-opt:hover{background:var(--sauna-light); border-color:var(--sauna); color:var(--sauna-text)}
.pcard .view::after{content:"→"}

/* Whole-card click target */
.pcard .cover-link{
  position:absolute; inset:0; z-index:2;
}

/* ──────────────────────────────────────────────────────────────────
   4 — Related guides
   ────────────────────────────────────────────────────────────────── */
.guides{background:var(--surface); padding:88px 0 96px}
.guides .section-band{margin-bottom:32px}
.guides-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.gcard{
  background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease;
}
.gcard:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-product);
}
.gcard .img{aspect-ratio:16/10; position:relative; overflow:hidden; background:#111}
.gcard .img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.gcard .body{padding:24px 26px; display:flex; flex-direction:column; gap:14px; flex:1}
.gcard .eyebrow{font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lane-text)}
.gcard .ttl{
  font-family:var(--f); font-weight:500; font-size:1.0625rem;
  line-height:1.35; color:var(--heading); letter-spacing:-.005em;
}
.gcard .foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; align-items:center;
  font-size:.74rem; color:var(--muted);
}
.gcard .foot .read{color:var(--heading); font-weight:500}
.gcard .foot .read::after{content:" →"}

/* ──────────────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .prod-grid, .guides-grid{grid-template-columns:repeat(2,1fr)}
  .shop-hero .grid{grid-template-columns:1fr; gap:20px}
  .shop-hero .stat-strip{grid-template-columns:repeat(2,1fr); gap:18px}
  .shop-hero{padding:28px 24px}
  .shop-hero--bg{padding:32px 28px}
}
@media (max-width:700px){
  .wrap{padding:0 16px}
  /* #73: 1-up product grid on phones (full-width cards). */
  .prod-grid{grid-template-columns:1fr; gap:16px}
  .guides-grid{grid-template-columns:1fr; gap:20px}
  .filter-bar{gap:8px}
  .filt{flex:1 1 calc(50% - 4px); min-width:0}
  .filt-right{margin-left:0; width:100%; justify-content:space-between}
  .grid-section{padding:24px 0 56px}
  .guides{padding:48px 0 64px}
  .section-band{flex-direction:column; align-items:flex-start; gap:6px}
  .section-band .meta{text-align:left}

  /* #52: smaller H1 + tighter hero on phones (was clamp ~2rem). */
  .shop-hero h1{font-size:1.75rem; line-height:1.12}
  .shop-hero{padding:22px 18px}
  .shop-hero--bg{padding:24px 20px}
  .shop-hero .stat-strip{grid-template-columns:repeat(2,1fr); gap:12px 16px; margin-top:18px; padding-top:16px}
  .shop-hero .subcats{grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; padding-top:16px}

  /* #73: full-width cards on phones — show specs/title at normal size. */
  .pcard .body{padding:16px}
  .pcard .price .now{font-size:1.05rem}
  .pcard .eyebrow{font-size:.68rem}
}

/* ──────────────────────────────────────────────────────────────────
   #52 — Mobile "Filter & Sort" bottom sheet (CSS-only toggle)
   Desktop (>700px): the standalone bar shows inline (unchanged); the trigger
   row, sheet chrome and backdrop are hidden. Mobile: the bar becomes a bottom
   sheet opened by the trigger; the dropdowns inside still filter live (#50).
   ────────────────────────────────────────────────────────────────── */
.cat-filter-row,
.cat-filter-sheet-head,
.cat-filter-sheet-done,
.cat-filter-backdrop{ display:none; }

@media (max-width:700px){
  /* Trigger row: "Filter & Sort" (left) + dynamic count (right). */
  .cat-filter-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .cat-filter-trigger{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--nav); color:#fff; border-radius:var(--r-md);
    min-height:40px; padding:0 14px; font-family:var(--f); font-weight:600;
    font-size:.85rem; cursor:pointer;
  }
  .cat-filter-active{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--cta); color:#fff; font-size:.6rem; font-weight:700;
  }
  .cat-filter-count{ font-size:12px; color:var(--body); }
  .cat-filter-count .sisu-count-number{ font-weight:700; color:var(--heading); }

  /* The sheet: fixed to the bottom, slides up when the toggle is checked. */
  .cat-filter-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:1150;
    max-height:82vh; display:flex; flex-direction:column;
    background:var(--bg); border-radius:16px 16px 0 0;   /* site bg, not surface white */
    box-shadow:0 -8px 40px rgba(26,31,36,.22);
    transform:translateY(110%); transition:transform .3s ease;
    padding-bottom:env(safe-area-inset-bottom);
  }
  #cat-filter-toggle:checked ~ .cat-filter-wrap .cat-filter-sheet{ transform:translateY(0); }
  #cat-filter-toggle:checked ~ .cat-filter-backdrop{
    display:block; position:fixed; inset:0; z-index:1140; background:rgba(26,31,36,.45);
  }
  body:has(#cat-filter-toggle:checked){ overflow:hidden; }

  .cat-filter-sheet-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px; border-bottom:1px solid var(--hairline);
    font-family:var(--f); font-weight:700; font-size:1.05rem; color:var(--heading);
    cursor:pointer; flex:none;
  }
  /* Bigger, easier close target. */
  .cat-filter-sheet-x{
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; margin:-8px -8px -8px 0;
    font-size:2rem; line-height:1; color:var(--muted);
  }

  /* The standalone bar fills the sheet body and scrolls; its dropdown contents
     expand inline (stacked checkbox lists) instead of absolute popovers.
     flex:1 + min-height:0 makes THIS the scroll area inside the 82vh sheet —
     without min-height:0 the flex child won't shrink, overflow-y:auto never
     engages, and the footer (Show results) sits below the fold, unreachable. */
  .cat-filter-sheet .sisu-filter-bar-standalone{
    margin:0; flex:1 1 auto; min-height:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 16px;
  }
  .cat-filter-sheet .sisu-filter-bar{ display:block; }
  .cat-filter-sheet .sisu-filter-dropdowns{ display:flex; flex-direction:column; gap:0; }
  .cat-filter-sheet .sisu-filter-dropdown{ border-bottom:1px solid var(--hairline); }
  /* Flatten EVERY popover layer inline — the plain dropdown content AND the
     nested category structure (--nested content + .sisu-cat-flyout children),
     which were still absolute → spilling off the right edge and clipping. */
  .cat-filter-sheet .sisu-dropdown-content,
  .cat-filter-sheet .sisu-dropdown-content--nested,
  .cat-filter-sheet .sisu-cat-flyout{
    position:static !important; display:block !important;
    box-shadow:none !important; border:0 !important; padding:4px 0 12px !important;
    min-width:0 !important; width:auto !important; max-width:100% !important;
    background:transparent !important; transform:none !important;
  }
  .cat-filter-sheet .sisu-cat-flyout{ padding-left:14px !important; }
  /* Long category names wrap instead of forcing width. */
  .cat-filter-sheet .sisu-cat-option{ white-space:normal; }
  .cat-filter-sheet-done{
    display:block; margin:auto 0 0; flex:none;
    background:var(--cta); color:#fff; text-align:center;
    padding:14px; font-family:var(--f); font-weight:600; cursor:pointer;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Hero — editorial split variant (Example A) + sub-category rail
   ────────────────────────────────────────────────────────────────── */
.shop-hero--feature .grid{grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}
.shop-hero--feature .actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.shop-hero--feature .photo{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--surface);box-shadow:var(--shadow-product);align-self:stretch}
.shop-hero--feature .photo img{width:100%;height:100%;object-fit:cover;display:block}
.shop-hero--feature .stat-strip{grid-template-columns:repeat(4,1fr)}
/* No hero image (term + global default both empty) → single column. */
.shop-hero--feature--nophoto .grid{grid-template-columns:1fr}

/* Sub-category rail — surfaces nested categories */
.shop-hero .subcats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;padding-top:26px;border-top:1px solid var(--hairline)}
.shop-hero .subcat{display:flex;align-items:center;gap:13px;padding:10px 12px 10px 10px;border:1px solid var(--hairline);border-radius:10px;background:#fff;transition:border-color .15s,transform .2s,box-shadow .2s}
.shop-hero .subcat:hover{border-color:var(--lane);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.shop-hero .subcat .thumb{width:54px;height:54px;border-radius:8px;overflow:hidden;flex:none;background:var(--surface)}
.shop-hero .subcat .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.shop-hero .subcat .meta{min-width:0}
.shop-hero .subcat .lbl{display:block;font-weight:500;font-size:.85rem;color:var(--heading);line-height:1.25;letter-spacing:-.005em}
.shop-hero .subcat .n{display:block;font-size:.7rem;color:var(--muted);margin-top:3px;letter-spacing:.02em}

/* Dark full-bleed variant overrides for the rail (kept for parity) */
.shop-hero--bg .subcats{border-top-color:rgba(255,255,255,.2)}
.shop-hero--bg .subcat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.shop-hero--bg .subcat:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
.shop-hero--bg .subcat .thumb{background:rgba(255,255,255,.12)}
.shop-hero--bg .subcat .lbl{color:#fff}
.shop-hero--bg .subcat .n{color:rgba(255,255,255,.65)}

@media (max-width:1100px){
  .shop-hero--feature .grid{grid-template-columns:1fr;gap:24px}
  .shop-hero .subcats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .shop-hero .subcats{grid-template-columns:1fr}
}

/* ── Category hero — Variant B (editorial 3-col: image · copy · guide) ──────
   Markup + tokens from the approved RonYen_Category_SEO_Variant_B design.
   Only the hero region; the filter bar + product grid are unchanged. All
   tokens (--sauna*, --hairline, --surface, --muted, --placeholder, --r-sm/md,
   --shadow-product, --heading, --body, --f) are defined elsewhere in :root. */

/* Lane tag (orange pill, top-right of hero head) */
.lane-tag{
  display:inline-block; font-weight:600; font-size:.64rem;
  line-height:1.4; letter-spacing:.12em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:var(--r-sm);
  background:var(--sauna-light); color:var(--sauna-text);
}

/* Spec chips — compact, SEO-rich facts in the hero */
.spec-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.spec-chips li{
  list-style:none; display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:500; color:var(--body);
  background:var(--surface); border:1px solid var(--hairline);
  padding:6px 11px; border-radius:999px;
}
.spec-chips li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--sauna); flex:none;
}

/* Intro lead (body copy paragraph) */
.intro-lead{
  font-size:1.0625rem; line-height:1.65; color:var(--body);
  font-weight:300; max-width:64ch; text-wrap:pretty;
}
.intro-lead b{ color:var(--heading); font-weight:600; }

/* SEO accordion (buying-guide Q&As) */
.seo-acc{ border-top:1px solid var(--hairline); }
.seo-acc .qa{ border-bottom:1px solid var(--hairline); }
.seo-acc .qa > summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start;
  gap:16px; padding:17px 2px; font-family:var(--f); font-weight:500;
  font-size:1.02rem; line-height:1.35; color:var(--heading);
  transition:color .12s;
}
.seo-acc .qa > summary::-webkit-details-marker{display:none}
.seo-acc .qa > summary::before{
  content:""; width:16px; height:2px; flex:none; margin-top:10px;
  background:var(--sauna); border-radius:2px;
  transition:width .2s ease;
}
.seo-acc .qa > summary .q{ flex:1; }
.seo-acc .qa > summary::after{
  content:""; width:13px; height:13px; flex:none; margin-top:5px;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition:transform .25s ease;
}
.seo-acc .qa[open] > summary{color:var(--sauna-text)}
.seo-acc .qa[open] > summary::before{width:24px}
.seo-acc .qa[open] > summary::after{transform:rotate(180deg)}
.seo-acc .qa:hover > summary{color:var(--sauna-text)}
.seo-acc .a{
  padding:0 0 20px 32px; color:var(--body);
  font-size:.94rem; line-height:1.72; font-weight:300; max-width:72ch;
}
.seo-acc .a p + p{ margin-top:12px; }

/* The 3-col editorial hero */
.hero-b{ padding:26px 0 18px; }
.hero-b .head{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; margin-bottom:18px; flex-wrap:wrap;
}
.hero-b .cols{
  display:grid; grid-template-columns:.66fr 1fr 1.12fr; gap:36px; align-items:start;
}
/* Fixed-ratio image: holds its size regardless of how tall the copy/guide
   columns get (e.g. when a buying-guide accordion is opened). No min-height /
   height:100% that would tie it to the row height. */
.hero-b .shot{
  border-radius:12px; overflow:hidden; background:#1c1f22;
  box-shadow:var(--shadow-product); aspect-ratio:3/4;
}
.hero-b .shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-b .copy{ display:flex; flex-direction:column; }
.hero-b h1{ font-weight:600; font-size:clamp(1.8rem,2.5vw,2.3rem); line-height:1.07; letter-spacing:-.02em; }
.hero-b .sub{ font-size:1rem; font-weight:500; color:var(--sauna-text); margin-top:6px; }
.hero-b .desc{ font-size:.92rem; line-height:1.62; color:var(--body); margin-top:14px; }
.hero-b .desc b{ color:var(--heading); font-weight:600; }
.hero-b .spec-chips{ margin-top:18px; }
.hero-b .actions{ display:flex; gap:16px; align-items:center; margin-top:auto; padding-top:22px; flex-wrap:wrap; }

/* Graceful fallbacks when a category has no image and/or no buying guide */
.hero-b--noguide .cols{ grid-template-columns:.66fr 1fr; }
.hero-b--noimg .cols{ grid-template-columns:1fr 1.12fr; }
.hero-b--noimg.hero-b--noguide .cols{ grid-template-columns:1fr; }

/* Buying guide panel (white card) */
.guide-panel{
  background:#fff; border:1px solid var(--hairline); border-radius:12px;
  padding:8px 22px 6px; display:flex; flex-direction:column;
}
.guide-panel .gp-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 2px 12px; border-bottom:1px solid var(--hairline);
}
.guide-panel .gp-head .eyebrow{ color:var(--sauna-text); }
.guide-panel .gp-head .dash{ flex:1; height:1px; background:var(--hairline); }
.guide-panel .seo-acc{ border-top:0; }
.guide-panel .seo-acc .qa > summary{ font-size:.96rem; padding:14px 2px; }
.guide-panel .seo-acc .qa:last-child{ border-bottom:0; }

@media (max-width:1080px){
  .hero-b .cols{ grid-template-columns:1fr 1fr; }
  .hero-b .shot{ grid-column:1 / -1; aspect-ratio:21/7; min-height:0; }
}
@media (max-width:760px){
  .hero-b .cols{ grid-template-columns:1fr; gap:22px; }
  .hero-b .shot{ aspect-ratio:16/9; }
}

/* Sub-category cards — child categories shown directly under the hero. */
.subcat-section{ padding:32px 0 4px; }
.subcat-section .wrap{ max-width:1440px; margin:0 auto; padding:0 40px; }
.subcat-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.subcat-card{
  display:block; background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .15s;
}
.subcat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-product); border-color:var(--border); }
.subcat-card .img{ aspect-ratio:16/10; overflow:hidden; background:var(--section-alt); }
.subcat-card .img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s; }
.subcat-card:hover .img img{ transform:scale(1.03); }
.subcat-card .body{ padding:14px 16px; }
.subcat-card .name{ font-family:var(--f); font-weight:600; font-size:.95rem; color:var(--heading); letter-spacing:-.005em; }
@media (max-width:768px){
  .subcat-section .wrap{ padding:0 22px; }
  .subcat-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
}
@media (max-width:480px){
  .subcat-grid{ grid-template-columns:1fr; }
}

/* Product-card labelled spec lines — two-column grid so values align to a
   common left edge (label column sizes to the widest label). Empty specs hidden. */
.pcard-specs{ list-style:none; margin:0 0 4px; padding:0; display:grid; grid-template-columns:max-content 1fr; column-gap:24px; row-gap:2px; }
.pcard-specs li{ display:contents; }
.pcard-specs .k{ color:var(--muted); font-weight:400; font-size:.8rem; line-height:1.4; }
.pcard-specs .v{ color:var(--heading); font-weight:500; font-size:.8rem; line-height:1.4; }

/* Category page: left category sidebar (desktop) + product grid. Sidebar tree
   is exposed on all category pages; hidden on mobile (filter sheet covers nav). */
.cat-layout{ display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start; }
.cat-side{ position:sticky; top:24px; }
.cat-side-h{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 14px; }
.cat-side-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.cat-side-list a{ display:block; padding:5px 0; color:var(--heading); text-decoration:none; font-size:.92rem; line-height:1.3; }
.cat-side-list a:hover{ color:var(--cta,#F06020); }
.cat-side-parent > a{ font-weight:600; }
.cat-side-parent.is-active > a,
.cat-side-children li.is-active > a{ color:var(--cta,#F06020); font-weight:600; }
.cat-side-children{ list-style:none; margin:2px 0 8px; padding:0 0 0 12px; border-left:1px solid var(--hairline); display:flex; flex-direction:column; gap:2px; }
.cat-side-children a{ font-size:.86rem; color:var(--body); font-weight:400; padding:4px 0; }
@media (max-width:900px){
  .cat-layout{ grid-template-columns:1fr; gap:0; }
  .cat-side{ display:none; }
}