/* ══════════════════════════════════════════════════════════════════
   RönYen — Indoor Infrared Saunas landing page
   Ported from the design handoff (design_handoff_infrared_saunas, Jul 26).
   Tokens come from brand.css — there is no :root here and no hardcoded
   hex in any rule. The design's own token block remapped the cold --ice
   family to the warm one; the theme already has that as a lane, so this
   file forces body.lane-sauna instead (see functions.php).

   The design's shared "landing-page.css" corresponds to brand.css here,
   with a handful of ad-traffic LP components (.pricebar, .po-hero,
   .btn-ghost-light, .b-preorder, .compare) that each landing template
   carries itself — those are ported below rather than cross-imported, so
   this page can never be broken by an edit to a sibling landing page.
   ══════════════════════════════════════════════════════════════════ */

/* ── Warm lane remap ──────────────────────────────────────────────────
   Same block the custom-saunas LP uses: point the blue "ice" accent
   family at the warm "sauna" family so every accent reads timber. Pure
   var remapping. --ember is the design's red-glow accent (backrest, hero
   plaque rule, featured card ring, infrared rays); it maps to the deep
   end of the sauna family rather than introducing a new colour. */
body.lane-sauna{
  --ice:var(--sauna); --ice-light:var(--sauna-light);
  --ice-text:var(--sauna-text); --ice-hover:var(--sauna-hover);
  --ember:var(--sauna-hover);
  /* Material colours for the 45 mm wall cross-section. These depict timber
     and frame layers rather than brand colours, so they are declared once
     here as named tokens and never inline. */
  --ir-tim-outer:#A07F5D;
  --ir-tim-core:#C8A877;
  --ir-tim-inner:#DDC19A;
}
body.lane-sauna .kicker .num{color:var(--sauna)}
body.lane-sauna .section--dark .kicker .num{color:var(--sauna)}

/* Empty image slot — every photo on this page is admin-assigned (RönYen Admin
   → Landing Pages → Infrared Saunas). Until a slot is filled it renders as a
   quiet tone rather than a broken image, so the layout never collapses. */
.ir-ph{position:absolute; inset:0; background:var(--section-alt)}
.ir-ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, color-mix(in srgb, var(--sauna) 8%, transparent), transparent 60%);
}

/* Secondary supporting line under a label, heading or table header. */
.en{display:block; font-weight:300; color:var(--muted); font-size:.88em; line-height:1.55; margin-top:4px}
.section--dark .en{color:var(--nav-muted)}
th .en{font-weight:400; text-transform:none; letter-spacing:0; font-size:.78rem; margin-top:3px}

/* ════════════════════════════════════════════════════════════════════
   SHARED AD-TRAFFIC LP COMPONENTS (ported)
   ════════════════════════════════════════════════════════════════════ */
.btn-ghost-light{background:transparent; color:var(--inverse); border-color:color-mix(in srgb, var(--inverse) 35%, transparent)}
.btn-ghost-light:hover{background:color-mix(in srgb, var(--inverse) 8%, transparent); border-color:var(--inverse)}
.b-preorder{background:var(--cta-tint); color:var(--cta-active)}

/* ── Sticky quote bar ────────────────────────────────────────────── */
.pricebar{
  position:fixed; top:0; left:0; right:0; z-index:90;
  background:color-mix(in srgb, var(--heading) 94%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--inverse) 8%, transparent);
  color:var(--inverse);
  transform:translateY(-100%); transition:transform .28s ease;
}
.pricebar.is-shown{transform:translateY(0)}
.pricebar .wrap{display:flex; align-items:center; gap:24px; padding-top:13px; padding-bottom:13px}
.pricebar .pb-items{display:flex; align-items:center; gap:22px; font-size:.9rem; flex-wrap:wrap}
.pricebar .pb-items .from{color:var(--nav-muted)}
.pricebar .pb-items .from b{color:var(--inverse); font-weight:600; font-variant-numeric:tabular-nums}
.pricebar .pb-items .sep{width:4px; height:4px; border-radius:50%; background:color-mix(in srgb, var(--inverse) 30%, transparent)}
.pricebar .pb-items .it{display:inline-flex; align-items:center; gap:8px; color:var(--inverse)}
.pricebar .pb-items .it svg{width:15px; height:15px; stroke:var(--ice); fill:none; stroke-width:1.7}
.pricebar .pb-cta{margin-left:auto; display:flex; align-items:center; gap:16px}
.pricebar .pb-cta .left{font-size:.8rem; color:var(--nav-muted)}
@media (max-width:900px){
  .pricebar .pb-items .it{display:none}
  .pricebar .pb-cta .left{display:none}
}

/* ════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════ */
.po-hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  background:var(--nav); color:var(--inverse); overflow:hidden; isolation:isolate;
}
.po-hero .po-hero-ph{position:absolute; inset:0; z-index:-2}
.po-hero .po-hero-ph > img.fill{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.po-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg,
    color-mix(in srgb, var(--nav) 92%, transparent) 0%,
    color-mix(in srgb, var(--nav) 76%, transparent) 42%,
    color-mix(in srgb, var(--nav) 34%, transparent) 78%,
    color-mix(in srgb, var(--nav) 20%, transparent) 100%);
}
/* Warm bloom behind the plaque — the red-glow cue without a photo edit. */
.ir-hero::after{
  content:""; position:absolute; z-index:-1; right:-8%; bottom:-18%;
  width:60vw; height:60vw; max-width:900px; max-height:900px; border-radius:50%;
  background:radial-gradient(circle,
    color-mix(in srgb, var(--ember) 30%, transparent) 0%,
    color-mix(in srgb, var(--ember) 10%, transparent) 42%,
    transparent 68%);
  pointer-events:none;
}
.po-hero .wrap{padding-top:96px; padding-bottom:72px; width:100%}
.ir-hero-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:end}
.ir-hero h1{
  color:var(--inverse); font-weight:600; max-width:20ch;
  font-size:clamp(2.2rem,4.2vw,3.7rem); line-height:1.22; letter-spacing:-.025em;
}
.ir-hero h1 em{font-style:normal; color:var(--ice)}
.ir-hero .subhook{
  font-weight:300; font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.45;
  color:var(--inverse); margin-top:24px; max-width:44ch;
}
.hero-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.hero-chips span{
  display:inline-flex; align-items:center; gap:8px; font-size:.84rem; color:var(--inverse);
  padding:8px 14px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--inverse) 18%, transparent);
  background:color-mix(in srgb, var(--inverse) 5%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hero-chips span i{width:5px; height:5px; border-radius:50%; background:var(--ice); flex:none}
.po-hero-cta{display:flex; gap:18px; flex-wrap:wrap; margin-top:34px; align-items:center}
.ir-plaque{
  background:color-mix(in srgb, var(--nav) 78%, transparent);
  border:1px solid color-mix(in srgb, var(--inverse) 14%, transparent);
  border-left:2px solid var(--ember); border-radius:var(--r-xl);
  padding:24px 26px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 24px 60px color-mix(in srgb, var(--nav) 55%, transparent);
}
.ir-plaque .lab{font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ice)}
.ir-plaque .mdl{color:var(--inverse); font-weight:600; font-size:1.45rem; letter-spacing:-.015em; margin:8px 0 2px; line-height:1.25}
.ir-plaque .sub{font-size:.9rem; color:var(--nav-muted); line-height:1.5}
.ir-plaque .pr{
  margin-top:18px; padding-top:16px;
  border-top:1px solid color-mix(in srgb, var(--inverse) 12%, transparent);
  display:flex; align-items:baseline; gap:8px; color:var(--inverse);
}
.ir-plaque .pr .from{font-size:.82rem; color:var(--nav-muted)}
.ir-plaque .pr .now{font-size:1.7rem; font-weight:600; font-variant-numeric:tabular-nums}
.ir-plaque .note{font-size:.78rem; color:var(--nav-muted); margin-top:8px}

/* ── Trust strip ─────────────────────────────────────────────────── */
.factband{background:var(--surface); border-bottom:1px solid var(--hairline)}
.factband .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding-top:26px; padding-bottom:26px}
.fact{display:flex; align-items:flex-start; gap:13px}
.fact svg{width:22px; height:22px; stroke:var(--ice); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; margin-top:3px}
.fact b{display:block; color:var(--heading); font-weight:600; font-size:.95rem; line-height:1.35}
.fact .en{font-size:.82rem; margin-top:2px}

/* ════════════════════════════════════════════════════════════════════
   01 · WALKTHROUGH PICKER
   ════════════════════════════════════════════════════════════════════ */
#pickerBand{padding:76px 0}
.pk-head{display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom:22px}
.pk-head .lead{margin-top:12px; max-width:52ch}
.picker{background:var(--inverse); border:1px solid var(--hairline); border-radius:var(--r-xl); box-shadow:var(--shadow-product); overflow:hidden}
.pk-top{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:14px 24px; border-bottom:1px solid var(--hairline); background:var(--bg)}
.intent{display:grid; grid-template-columns:auto auto; gap:4px; padding:4px; background:var(--surface); border-radius:11px; flex:none}
.intent button{
  border-radius:8px; border:1px solid transparent; padding:9px 18px; white-space:nowrap;
  font-size:.86rem; font-weight:500; color:var(--muted); line-height:1.3;
  transition:background .15s, color .15s, border-color .15s;
}
.intent button.is-active{background:var(--inverse); color:var(--heading); border-color:var(--border); box-shadow:var(--shadow-card)}
.pk-dots{display:flex; gap:6px; flex:1; min-width:120px}
.pk-dots i{height:3px; flex:1; border-radius:2px; background:var(--border); transition:background .3s}
.pk-dots i.on{background:var(--ice)}
.pk-panel{display:none; padding:24px 28px 26px}
.pk-panel.is-on{display:block}
.pk-step{font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.pk-panel h3{font-size:clamp(1.15rem,1.5vw,1.35rem); font-weight:600; letter-spacing:-.015em; margin:8px 0 5px}
.pk-panel .pk-help{font-size:.9rem; color:var(--muted); margin-bottom:18px; max-width:62ch}

.pk-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.pk-tile{
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--inverse);
  padding:16px 18px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  transition:border-color .15s, background .15s, transform .12s;
}
.pk-tile:hover{border-color:var(--ice); background:var(--ice-light); transform:translateY(-2px)}
.pk-tile .n{font-size:1.3rem; font-weight:600; color:var(--heading); line-height:1}
.pk-tile .t{font-weight:600; color:var(--heading); font-size:1rem}
.pk-tile .d{font-size:.82rem; color:var(--muted); line-height:1.45}

.pk-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,232px)); justify-content:start; gap:16px}
.pk-card{
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--inverse); overflow:hidden;
  cursor:pointer; text-align:left; display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .15s, transform .12s;
}
.pk-card:hover{border-color:var(--ice); box-shadow:var(--shadow-product); transform:translateY(-2px)}
.pk-card[hidden]{display:none}
/* The picker cards are <button>s, so their innards are spans (a button's
   content model is phrasing content) — hence the explicit display. */
.pk-card .pkm{display:block; position:relative; aspect-ratio:4/3; background:var(--surface)}
.pk-card .pkm img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pk-card .pkb{padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1}
.pk-card .pkb b{font-size:.94rem; font-weight:600; color:var(--heading); line-height:1.35}
.pk-card .pkb .ref{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-size:.72rem; color:var(--muted)}
.pk-card .pkb .fr{margin-top:auto; padding-top:10px; font-size:.94rem; color:var(--heading)}
.pk-card .pkb .fr b{font-weight:600; font-variant-numeric:tabular-nums}
.pk-card .pick{margin-top:12px; display:inline-flex; align-items:center; gap:7px; font-size:.84rem; font-weight:600; color:var(--ice-text)}
.pk-card .pick svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}
.pk-more{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px; font-size:.86rem; color:var(--muted)}
.pk-more button{font-size:.86rem; font-weight:600; color:var(--ice-text); border-bottom:1px solid currentColor; line-height:1.2}
.pk-more button:hover{color:var(--ember)}

.pk-summary{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.pk-summary span{font-size:.8rem; background:var(--ice-light); color:var(--ice-text); border-radius:999px; padding:6px 13px}
.pk-form{display:grid; grid-template-columns:1fr 1fr; gap:0 16px; max-width:680px}
.pk-form .field.full,.pk-form .ch-wrap{grid-column:1 / -1}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.field[hidden]{display:none}
.field label{font-size:.82rem; font-weight:600; color:var(--heading)}
.field input,.field select{
  width:100%; min-width:0; font-family:var(--f); font-weight:300; font-size:.95rem;
  color:var(--heading); background:var(--inverse); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:.8rem 1rem;
}
.field input:focus,.field select:focus{
  outline:none; border-color:var(--ice);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ice) 22%, transparent);
}
/* One column per channel — four of them, on a single row at every width.
   `minmax(0,1fr)` rather than `1fr` so the longest label (WhatsApp) cannot
   push its own column past its share and force a wrap. */
.ch-tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:4px; background:var(--surface); border-radius:11px}
.ch-tabs button{border-radius:8px; border:1px solid transparent; padding:10px 4px; font-size:.84rem; font-weight:500; color:var(--muted); white-space:nowrap; min-width:0; transition:background .15s,color .15s,border-color .15s}
.ch-tabs button.is-active{background:var(--inverse); color:var(--heading); border-color:var(--border); box-shadow:var(--shadow-card)}
.ch-wrap{margin-bottom:14px}
.ch-wrap .lb{font-size:.82rem; font-weight:600; color:var(--heading); margin-bottom:7px; display:block}
.ch-wrap .hint{font-size:.76rem; color:var(--muted); margin-top:7px; display:block}
.pk-actions{grid-column:1 / -1; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:6px}
.pk-actions .btn{min-height:52px}
.pk-back{font-size:.84rem; color:var(--muted); display:inline-flex; align-items:center; gap:8px; margin-top:24px}
.pk-back:hover{color:var(--heading)}
.pk-back svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round}
.pk-fine{grid-column:1 / -1; font-size:.78rem; color:var(--muted); margin-top:14px; max-width:60ch}
.pk-error{grid-column:1 / -1; display:none; font-size:.86rem; color:var(--cta-active); background:var(--cta-tint); border-radius:var(--r-md); padding:10px 14px; margin-top:10px}
.pk-error.is-shown{display:block}
/* Honeypot — off-screen rather than display:none so bots still fill it. */
.pk-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.pk-done{text-align:center; padding:20px 0 10px}
.pk-done .tick-big{width:62px; height:62px; border-radius:50%; background:var(--ice-light); display:inline-flex; align-items:center; justify-content:center; margin-bottom:20px}
.pk-done .tick-big svg{width:27px; height:27px; stroke:var(--ice-text); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.pk-done p{max-width:52ch; margin:8px auto 0; color:var(--body)}
.pk-done .btn{margin-top:24px}


/* ── Picker on the dark brand colour ──────────────────────────────────
   The panel itself is --nav with light text; the things a buyer clicks —
   product cards, the size tiles, the segmented controls and the buttons —
   deliberately stay light so they read as targets against it. Colours are
   mixed from --inverse rather than hardcoded, so the panel tracks the
   brand tokens like everything else on the page. */
.picker{
  background:var(--nav);
  border-color:color-mix(in srgb, var(--inverse) 14%, transparent);
  color:color-mix(in srgb, var(--inverse) 82%, transparent);
}
.picker .pk-top{
  background:color-mix(in srgb, var(--inverse) 6%, transparent);
  border-bottom-color:color-mix(in srgb, var(--inverse) 12%, transparent);
}
.picker .pk-panel h3,
.picker .pk-done h3{color:var(--inverse)}
.picker .pk-step{color:var(--nav-muted)}
.picker .pk-panel .pk-help,
.picker .pk-more,
.picker .pk-fine,
.picker .ch-wrap .hint,
.picker .field .hint{color:var(--nav-muted)}
.picker .pk-done p{color:color-mix(in srgb, var(--inverse) 82%, transparent)}
.picker .field label,
.picker .ch-wrap .lb{color:var(--inverse)}
.picker .pk-dots i{background:color-mix(in srgb, var(--inverse) 22%, transparent)}
.picker .pk-dots i.on{background:var(--ice)}
.picker .pk-back{color:var(--nav-muted)}
.picker .pk-back:hover{color:var(--inverse)}
.picker .pk-more button{color:var(--sauna)}
.picker .pk-more button:hover{color:var(--peach)}

/* Segmented controls: light track, white selected pill — unchanged in feel,
   just re-seated on the dark panel. */
.picker .intent,
.picker .ch-tabs{background:color-mix(in srgb, var(--inverse) 12%, transparent)}
.picker .intent button,
.picker .ch-tabs button{color:color-mix(in srgb, var(--inverse) 72%, transparent)}
.picker .intent button.is-active,
.picker .ch-tabs button.is-active{
  background:var(--inverse); color:var(--heading); border-color:transparent;
}

/* Clickable surfaces stay light. */
.picker .pk-tile{background:var(--inverse); border-color:transparent}
.picker .pk-tile:hover{background:var(--ice-light); border-color:var(--ice)}
.picker .pk-card{background:var(--inverse); border-color:transparent}
.picker .pk-card:hover{border-color:var(--ice)}

/* Inputs read as light fields on the dark panel. */
.picker .field input,
.picker .field select{
  background:var(--inverse); color:var(--heading);
  border-color:color-mix(in srgb, var(--inverse) 24%, transparent);
}
.picker .field input::placeholder{color:var(--placeholder)}

/* Summary chips + the success tick keep the warm accent, lifted for contrast. */
.picker .pk-summary span{
  background:color-mix(in srgb, var(--sauna) 22%, transparent);
  color:var(--inverse);
}
.picker .pk-done .tick-big{background:color-mix(in srgb, var(--sauna) 22%, transparent)}
.picker .pk-done .tick-big svg{stroke:var(--sauna)}

/* Validation message: readable on dark rather than the light-panel tint. */
.picker .pk-error{
  background:color-mix(in srgb, var(--cta) 18%, transparent);
  color:var(--inverse);
}

/* ════════════════════════════════════════════════════════════════════
   02 · THE RANGE
   ════════════════════════════════════════════════════════════════════ */
.range-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; align-items:stretch}
.mcard{background:var(--inverse); border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-card); transition:transform .2s, box-shadow .2s}
.mcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-product)}
.mcard.is-hero{border-color:var(--ember); box-shadow:0 0 0 1px var(--ember), var(--shadow-product)}
.mcard .mmedia{aspect-ratio:1/1; position:relative; background:var(--surface)}
.mcard .mmedia img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.mcard .mtag{position:absolute; top:12px; left:12px; z-index:3; font-size:.66rem; font-weight:600; letter-spacing:.06em; padding:5px 11px; border-radius:999px; background:var(--ember); color:var(--inverse)}
.mcard .mbody{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.mcard .band-lab{font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.mcard h3{font-size:1.05rem; margin:4px 0 8px; font-weight:600; line-height:1.3}
.mcard .sku{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-size:.78rem; letter-spacing:.06em; color:var(--heading); font-weight:600; margin-bottom:10px}
.mspecs{list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.mspecs li{display:flex; gap:9px; font-size:.84rem; color:var(--body); line-height:1.45}
.mspecs li svg{width:14px; height:14px; stroke:var(--ice); fill:none; stroke-width:1.9; flex:none; margin-top:4px}
.wood-lab{font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.wood-seg{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; background:var(--surface); border-radius:11px; margin-bottom:14px}
.wood-seg button{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid transparent; background:transparent; border-radius:8px; cursor:pointer;
  font-size:.72rem; font-weight:500; color:var(--muted); padding:8px 2px; line-height:1.2; text-align:center;
  transition:background .15s,color .15s,border-color .15s;
}
/* Swatch dots use the real timber grain assets rather than approximated
   colour values, so the dot and the timber card always agree. */
.wood-seg button .sw{
  width:14px; height:14px; border-radius:50%; flex:none;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--heading) 18%, transparent);
}
.wood-seg button.is-active{background:var(--inverse); color:var(--heading); border-color:var(--border); box-shadow:var(--shadow-card)}
.mcard .pr{margin-top:auto; display:flex; align-items:baseline; gap:7px}
.mcard .pr .from{font-size:.78rem; color:var(--muted)}
.mcard .pr .now{font-size:1.4rem; font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.mcard .btn{margin-top:16px; width:100%; justify-content:center}
.range-note{margin-top:26px; font-size:.86rem; color:var(--muted); max-width:70ch}

/* Timber cards */
.wood-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:24px; margin-top:32px}
.wood{background:var(--inverse); border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; display:flex; flex-direction:column}
.wood.is-prem{border-color:var(--ice)}
.wood .winterior{position:relative; aspect-ratio:16/10; background:var(--surface); border-bottom:1px solid var(--hairline)}
.wood .winterior img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.wood .wbody{padding:22px 24px 24px; display:flex; flex-direction:column; flex:1}
.wood .wtag{align-self:flex-start; font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-sm); background:var(--surface); color:var(--muted)}
.wood.is-mid .wtag{background:var(--surface); color:var(--heading)}
.wood.is-prem .wtag{background:var(--ice-light); color:var(--ice-text)}
.wood h3{margin:12px 0 8px; font-size:1.2rem; font-weight:600}
.wood p{font-size:.92rem; line-height:1.65; color:var(--body)}
.wood .wprice{margin-top:auto; padding-top:16px; font-size:.9rem; color:var(--heading)}
.wood .wprice b{font-weight:600}

/* ════════════════════════════════════════════════════════════════════
   03 · RED-LIGHT BACKREST (dark band)
   ════════════════════════════════════════════════════════════════════ */
.glow-panel{display:grid; grid-template-columns:1fr 1fr; border-radius:var(--r-xl); overflow:hidden; border:1px solid color-mix(in srgb, var(--ember) 40%, transparent)}
.glow-panel .gmedia{position:relative; min-height:340px; background:var(--section-alt)}
.glow-panel .gmedia img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.glow-panel .gcopy{
  padding:52px 54px;
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--ember) 22%, transparent),
    color-mix(in srgb, var(--ember) 5%, transparent) 70%);
}
.glow-panel .gcopy .tag{display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:600; letter-spacing:.08em; color:var(--inverse); background:var(--ember); padding:5px 12px; border-radius:var(--r-sm)}
.glow-panel .gcopy h3{color:var(--inverse); font-size:1.6rem; font-weight:600; margin:18px 0 14px; max-width:24ch; line-height:1.25}
.glow-panel .gcopy p{font-size:.98rem; line-height:1.7; color:var(--nav-muted); max-width:48ch}
.glow-list{list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:10px}
.glow-list li{display:flex; gap:11px; font-size:.92rem; color:var(--inverse); align-items:flex-start}
.glow-list svg{width:16px; height:16px; stroke:var(--ice); fill:none; stroke-width:2; flex:none; margin-top:4px}
.glow-panel .fine{
  margin-top:24px; padding-top:16px;
  border-top:1px solid color-mix(in srgb, var(--inverse) 16%, transparent);
  font-size:.82rem; color:var(--nav-muted); max-width:50ch;
}

/* ════════════════════════════════════════════════════════════════════
   04 · HOW INFRARED WORKS
   ════════════════════════════════════════════════════════════════════ */
.how-grid h2{max-width:20ch}
.how-grid .lead{max-width:68ch}
.how-note{margin-top:34px; font-size:.92rem; color:var(--muted); max-width:60ch}
.hv{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px}
.hv-card{border-radius:var(--r-xl); padding:28px 30px; position:relative; overflow:hidden}
.hv-trad{background:var(--section-alt); border:1px solid var(--border)}
.hv-ir{
  border:1px solid var(--ice);
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--ember) 10%, transparent),
    color-mix(in srgb, var(--sauna) 4%, transparent));
}
.hv-card .hv-lab{font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.hv-ir .hv-lab{color:var(--ice-text)}
.hv-card h4{margin:10px 0 12px; font-size:1.1rem; font-weight:600}
.hv-card p{font-size:.92rem; line-height:1.65; color:var(--body)}
.hv-fig{margin-top:20px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border)}
.hv-fig svg{display:block; width:100%; height:auto}
/* Diagram palette. Gradient stops can't take a token through a presentation
   attribute reliably, so they are set here — the SVGs themselves carry no
   colour of their own. */
#irPanel stop:first-child{stop-color:var(--ember)}
#irPanel stop:last-child{stop-color:var(--sauna)}
#airHot stop:first-child{stop-color:var(--peach); stop-opacity:.26}
#airHot stop:last-child{stop-color:var(--peach); stop-opacity:.6}

/* ════════════════════════════════════════════════════════════════════
   05 · WHY RONYEN INFRARED
   ════════════════════════════════════════════════════════════════════ */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; margin-top:44px}
.why{background:var(--inverse); padding:32px 28px; display:flex; flex-direction:column; gap:13px}
.why .ico{width:38px; height:38px; color:var(--ice)}
.why .ico svg{width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.why h3{font-size:1.0625rem; font-weight:600}
.why p{font-size:.92rem; line-height:1.6; color:var(--body)}

/* ════════════════════════════════════════════════════════════════════
   06 · WHAT'S INSIDE + WALL SECTION + SPEC TABLE
   ════════════════════════════════════════════════════════════════════ */
.inside-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; margin-top:44px}
.kit{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden}
.kit li{background:var(--inverse); padding:20px 22px; display:flex; gap:12px; align-items:flex-start}
.kit li svg{width:19px; height:19px; stroke:var(--ice); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; margin-top:3px}
.kit li b{display:block; font-size:.94rem; color:var(--heading); font-weight:600; line-height:1.35}
.kit li .en{font-size:.82rem; margin-top:3px}
.cert-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; align-items:center}
.cert{font-family:var(--f); font-size:.78rem; font-weight:600; letter-spacing:.1em; color:var(--heading); border:1px solid var(--border); background:var(--inverse); border-radius:var(--r-sm); padding:8px 14px}
.cert-note{font-size:.82rem; color:var(--muted)}

.xsec{background:var(--inverse); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:30px 32px}
.xsec .xh{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:20px}
.xs-stack{display:flex; height:130px; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-drop)}
.xs-stack i{display:block; height:100%}
.l-outer{flex:22; background-image:
  repeating-linear-gradient(180deg, color-mix(in srgb, var(--heading) 12%, transparent) 0 3px, transparent 3px 9px),
  linear-gradient(90deg, color-mix(in srgb, var(--ir-tim-outer) 82%, var(--heading)), var(--ir-tim-outer))}
.l-ply{flex:16; background:repeating-linear-gradient(180deg, var(--ir-tim-core) 0 4px, color-mix(in srgb, var(--ir-tim-core) 80%, var(--heading)) 4px 8px)}
.l-frame{flex:30; background-color:var(--nav); background-image:repeating-linear-gradient(135deg, color-mix(in srgb, var(--inverse) 7%, transparent) 0 6px, transparent 6px 12px)}
.l-inner{flex:14; background:linear-gradient(90deg, var(--ir-tim-core), var(--ir-tim-inner))}
.l-mica{flex:12; background:linear-gradient(90deg, var(--ember), var(--sauna)); box-shadow:inset 0 0 22px color-mix(in srgb, var(--inverse) 30%, transparent)}
.xs-scale{display:flex; align-items:center; gap:10px; margin:14px 0 22px; font-size:.8rem; color:var(--muted)}
.xs-scale::before,.xs-scale::after{content:""; flex:1; height:1px; background:var(--border)}
.xs-key{list-style:none; display:grid; gap:10px}
.xs-key li{display:flex; align-items:flex-start; gap:12px; font-size:.86rem; color:var(--body); line-height:1.45}
.xs-key .k{width:14px; height:14px; border-radius:3px; flex:none; margin-top:3px}
.xs-key .k-outer{background:var(--ir-tim-outer)}
.xs-key .k-ply{background:var(--ir-tim-core)}
.xs-key .k-frame{background:var(--nav)}
.xs-key .k-inner{background:var(--ir-tim-inner)}
.xs-key .k-mica{background:var(--ember)}
.xs-key b{color:var(--heading); font-weight:600}

.detail-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px}
.detail{border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; background:var(--inverse)}
.detail .dmedia{position:relative; aspect-ratio:4/3; background:var(--surface)}
.detail .dmedia img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.detail .dcap{padding:16px 20px 18px}
.detail .dcap b{display:block; font-size:.94rem; font-weight:600; color:var(--heading); line-height:1.35}

.spec-scroll{margin-top:52px; overflow-x:auto; border:1px solid var(--hairline); border-radius:var(--r-xl); background:var(--inverse)}
table.spec4{width:100%; min-width:820px; border-collapse:collapse; font-size:.88rem}
table.spec4 th,table.spec4 td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--hairline)}
table.spec4 thead th{font-size:.74rem; letter-spacing:.06em; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap}
table.spec4 thead th.hero-col,table.spec4 td.hero-col{background:var(--ice-light)}
table.spec4 thead th.hero-col{color:var(--ice-text)}
table.spec4 td.hero-col{color:var(--ice-text); font-weight:500}
table.spec4 td:first-child,table.spec4 th:first-child{color:var(--muted); font-weight:400; width:24%; background:var(--inverse); position:sticky; left:0}
table.spec4 tbody tr:last-child td{border-bottom:0}
table.spec4 .num{font-variant-numeric:tabular-nums; white-space:nowrap}
table.spec4 .yes{color:var(--ice-text); font-weight:600}
table.spec4 .no{color:var(--placeholder)}
.spec-note{margin-top:16px; font-size:.84rem; color:var(--muted); max-width:74ch}

/* ════════════════════════════════════════════════════════════════════
   07 · DELIVERY, ASSEMBLY & INSTALL
   ════════════════════════════════════════════════════════════════════ */
.deliv-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
.dsteps{display:flex; flex-direction:column; gap:14px; margin-top:8px}
.dstep{display:flex; gap:18px; background:var(--inverse); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:20px 22px}
.dstep .dn{width:34px; height:34px; border-radius:50%; flex:none; background:var(--ice-light); color:var(--ice-text); font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; justify-content:center}
.dstep b{display:block; color:var(--heading); font-weight:600; font-size:1rem; margin-bottom:5px}
.dstep p{font-size:.9rem; color:var(--body); line-height:1.6}
.room-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.room-chips span{font-size:.88rem; padding:9px 15px; border-radius:999px; background:var(--inverse); border:1px solid var(--border); color:var(--heading)}
.power-box{margin-top:26px; background:var(--ice-light); border-radius:var(--r-xl); padding:24px 26px}
.power-box h4{color:var(--ice-text); font-size:1rem; font-weight:600; margin-bottom:10px}
.power-box p{font-size:.9rem; color:var(--ice-text); line-height:1.65}

/* ════════════════════════════════════════════════════════════════════
   08 · COMMERCIAL BAND (dark)
   ════════════════════════════════════════════════════════════════════ */
.comm-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.comm-grid h2{max-width:22ch}
.comm-media{position:relative; aspect-ratio:4/3; border-radius:var(--r-xl); overflow:hidden; background:var(--section-alt)}
.comm-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.comm-points{list-style:none; margin-top:30px; display:flex; flex-direction:column; gap:2px}
.comm-points li{display:flex; gap:16px; padding:17px 0; border-bottom:1px solid color-mix(in srgb, var(--inverse) 10%, transparent)}
.comm-points li:last-child{border-bottom:0}
.comm-points svg{width:20px; height:20px; stroke:var(--ice); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; margin-top:3px}
.comm-points b{display:block; color:var(--inverse); font-weight:500; font-size:1rem; margin-bottom:3px}
.comm-points .en{color:var(--nav-muted); font-size:.88rem}
.comm-cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.comm-cta .ctx{font-size:.86rem; color:var(--nav-muted)}
.comm-cta .ctx b{color:var(--inverse); font-weight:600; font-variant-numeric:tabular-nums}
.comm-link{margin-top:24px; padding-top:20px; border-top:1px solid color-mix(in srgb, var(--inverse) 12%, transparent); font-size:.88rem; color:var(--nav-muted)}
.comm-link a{color:var(--inverse); border-bottom:1px solid var(--ice)}
.comm-link a:hover{color:var(--ice)}

/* ════════════════════════════════════════════════════════════════════
   09 · INFRARED VS TRADITIONAL
   ════════════════════════════════════════════════════════════════════ */
.cmp-wrap{margin-top:40px; background:var(--inverse); border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; overflow-x:auto}
table.compare{width:100%; min-width:720px; border-collapse:collapse; font-size:.92rem}
table.compare th,table.compare td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--hairline); vertical-align:top}
table.compare thead th{font-size:.78rem; letter-spacing:.06em; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border)}
table.compare thead th.col-ours{color:var(--ice-text)}
table.compare td:first-child,table.compare th:first-child{color:var(--muted); font-weight:400; width:20%}
table.compare .col-ours{background:var(--ice-light); color:var(--heading)}
table.compare .col-hard{color:var(--body)}
table.compare tbody tr:last-child td{border-bottom:0}
table.compare .tick{display:inline-flex; align-items:flex-start; gap:7px}
table.compare .tick svg{width:15px; height:15px; stroke:var(--sauna); fill:none; stroke-width:2.4; flex:none; margin-top:4px}
.cmp-foot{margin-top:28px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-size:.92rem; color:var(--body)}

/* ════════════════════════════════════════════════════════════════════
   FINAL CTA (dark)
   ════════════════════════════════════════════════════════════════════ */
.final-split{text-align:center}
.final-split h2{color:var(--inverse); font-size:clamp(1.9rem,3.2vw,2.9rem); font-weight:600; letter-spacing:-.02em; max-width:22ch; margin:0 auto; line-height:1.15}
.final-split .lead{margin:20px auto 0; text-align:center; max-width:56ch}
.final-split .fs-cta{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.final-split .fs-note{margin-top:22px; font-size:.86rem; color:var(--nav-muted)}

/* ══ RESPONSIVE ═══════════════════════════════════════════════════ */
@media (max-width:1100px){
  .ir-hero-grid{grid-template-columns:1fr; gap:34px}
  .factband .wrap{grid-template-columns:1fr 1fr; gap:22px}
  .inside-grid,.deliv-grid,.comm-grid{grid-template-columns:1fr; gap:48px}
  .glow-panel{grid-template-columns:1fr}
  .glow-panel .gmedia{min-height:260px}
  .why-grid{grid-template-columns:1fr 1fr}
  .range-row{grid-template-columns:1fr 1fr}
  .detail-row{grid-template-columns:1fr 1fr}
  .comm-media{order:-1}
}
@media (max-width:760px){
  .factband .wrap{grid-template-columns:1fr; gap:16px}
  .po-hero,.ir-hero{min-height:auto}
  .po-hero .wrap{padding-top:80px; padding-bottom:56px}
  .hero-chips span{font-size:.78rem; padding:7px 11px}
  .why-grid,.range-row,.kit,.detail-row,.pk-tiles,.pk-form,.hv{grid-template-columns:1fr}
  .pk-panel{padding:22px 18px 24px}
  .pk-cards{grid-template-columns:1fr}
  .pk-top{padding:16px 20px}
  .intent{grid-template-columns:1fr 1fr; width:100%}
  /* Four channels still share one row on a phone — the labels tighten
     rather than the row breaking. */
  .ch-tabs{gap:2px; padding:3px}
  .ch-tabs button{font-size:.76rem; padding:10px 2px; letter-spacing:-.01em}
  .xsec{padding:22px 20px}
  .xs-stack{height:104px}
  .glow-panel .gcopy{padding:32px 24px}
  .cmp-foot{flex-direction:column; align-items:flex-start}
}

/* ── Brochure capture variant of the hero plaque ──────────────────────
   Replaces the Most Popular price card when a brochure band resolves for
   the infrared category. The .bband-* components come from brand.css;
   here the form stacks vertically to fit the card. */
.ir-plaque--brochure .bband-side{margin-top:16px; display:flex; flex-direction:column; gap:10px; flex:none; max-width:none}
.ir-plaque--brochure .bband-form{flex-direction:column; gap:10px}
.ir-plaque--brochure .bband-email{width:100%; flex:none}
.ir-plaque--brochure .bband-btn{width:100%}
.ir-plaque--brochure .bband-done{margin-top:16px}