/* ══════════════════════════════════════════════════════════════════
   RönYen × Diooist — Electric Sauna Heaters landing page
   Mirrors the Harvia landing page (same SAUNA lane: orange CTA #F06020,
   mango accent #E88050) for a consistent look across the heater pages.
   'Prompt' + 'Sarabun' load via Google Fonts in functions.php (not bundled).
   Page is scoped by body.lane-sauna (forced for this template).
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#F8F7F4; --surface:#F0EEE9; --section-alt:#E8E5DF;
  --border:#D8D4CE; --hairline:#E8E5DF;
  --heading:#1A1F24; --body:#3D4550; --muted:#6B7480; --placeholder:#9AA0A8;
  --nav:#252D35; --util:#333B44; --nav-muted:#9AA0A8;
  --cta:#F06020; --cta-hover:#D04810; --cta-active:#B03808; --cta-tint:#FFF0E8;
  --peach:#FDBD92; --peach-text:#3A2A1D;
  --sauna:#E88050; --sauna-light:#FDEEE6; --sauna-hover:#C85830; --sauna-text:#8A3820;
  --blue:#3D87C4; --blue-light:#E8F3FB; --blue-text:#1A4878;
  --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; --r-2xl:16px;
  --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;
}
*{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.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","kern";
}
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}
.wrap-tight{max-width:1080px; margin:0 auto; padding:0 40px}

/* ── Type ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{color:var(--heading); font-family:var(--f); letter-spacing:-.01em}
.lead{font-weight:300; font-size:clamp(1.05rem,1.3vw,1.22rem); line-height:1.6; color:var(--body); max-width:60ch}
.section--dark .lead{color:#cfd3d8}

.kicker{
  font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); display:inline-flex; align-items:center; gap:14px; margin-bottom:22px;
}
.kicker .num{color:var(--sauna); font-variant-numeric:tabular-nums}
.kicker .rule{display:inline-block; width:34px; height:1px; background:var(--sauna); opacity:.7}
.section--dark .kicker{color:var(--nav-muted)}

.h-sec{font-weight:400; font-size:clamp(2rem,3.4vw,3rem); line-height:1.1; letter-spacing:-.022em; color:var(--heading); max-width:20ch}
.section--dark .h-sec{color:#fff}

/* ── Bands ────────────────────────────────────────────────────────── */
.band{padding:clamp(80px,9vw,128px) 0; position:relative}
.band--surface{background:var(--surface)}
.band--alt{background:var(--section-alt)}
.section--dark{background:var(--nav); color:#cfd3d8}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.band + .band:not(.band--surface):not(.section--dark){border-top:1px solid var(--hairline)}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f); font-weight:600; font-size:.9rem; line-height:1; letter-spacing:.01em;
  padding:1rem 1.6rem; border-radius:var(--r-lg); border:1px solid transparent;
  cursor:pointer; min-height:52px; white-space:nowrap;
  transition:background .15s, transform .1s, border-color .15s, color .15s;
}
.btn:active{transform:scale(.98)}
.btn .arr{width:13px; height:13px; flex:none; stroke:currentColor; transition:transform .2s ease-out}
.btn:hover .arr{transform:translate(2px,-2px)}
/* The brand stylesheet appends a ::after ↗ to every .btn-primary; the hero CTA
   carries its own inline .arr svg, so suppress the duplicate there. */
.hh-hero .btn::after{content:none !important}
.btn-primary{background:var(--cta); color:#fff}
.btn-primary:hover{background:var(--cta-hover)}
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{background:rgba(255,255,255,.09); border-color:#fff}
.btn-sm{min-height:0; padding:.6rem 1rem; font-size:.8rem}

/* ── Image placeholders (documentary direction, parity w/ system) ──── */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--section-alt);
  background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(26,31,36,.035) 11px 12px);
}
.ph > img.fill{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.ph.has-img{background-image:none}

/* ════════════════════════════════════════════════════════════════════
   1 · HERO
   ════════════════════════════════════════════════════════════════════ */
.hh-hero{
  position:relative; min-height:94vh; display:flex; align-items:flex-end;
  background:var(--nav); color:#fff; overflow:hidden; isolation:isolate;
}
.hh-hero .bg{position:absolute; inset:0; z-index:-2}
.hh-hero .bg img{width:100%; height:100%; object-fit:cover}
.hh-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(8deg, rgba(14,18,23,.97) 0%, rgba(14,18,23,.88) 30%, rgba(14,18,23,.6) 58%, rgba(14,18,23,.34) 100%),
    linear-gradient(96deg, rgba(14,18,23,.62) 0%, rgba(14,18,23,.22) 48%, rgba(14,18,23,0) 78%);
}
.hh-hero .wrap{padding-top:120px; padding-bottom:84px; width:100%}
.hh-brandmark{display:flex; width:max-content; max-width:100%; align-items:center; gap:14px; margin-bottom:26px}
/* Diooist wordmark sits on a white chip on the dark hero */
.diooist-chip{
  flex:none; background:#fff; border-radius:8px; padding:9px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.4); display:inline-flex; align-items:center;
}
.diooist-logo{height:34px; width:auto; display:block}
/* Text fallback when no logo image is uploaded */
.diooist-chip--mark{
  color:var(--heading); font-weight:700; font-size:1.02rem; letter-spacing:-.01em;
}
.hbm-txt{display:flex; flex-direction:column; line-height:1.25}
.hbm-txt b{color:#fff; font-weight:600; font-size:1rem; letter-spacing:.005em}
.hbm-txt span{color:var(--nav-muted); font-size:.78rem; letter-spacing:.05em}
.hh-overline{
  display:inline-flex; align-items:center; gap:11px; margin-bottom:30px;
  font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--peach);
}
.hh-overline .dot{width:7px; height:7px; border-radius:50%; background:var(--sauna); flex:none}
.hh-hero h1{
  color:#fff; font-weight:600; font-size:clamp(2.7rem,6vw,5.3rem);
  line-height:1.02; letter-spacing:-.032em; max-width:15ch;
}
.hh-hero h1 em{font-style:normal; color:var(--sauna)}
.hh-hero .subhook{
  font-weight:300; font-size:clamp(1.08rem,1.45vw,1.32rem); line-height:1.6;
  color:#e3e6e9; margin-top:30px; max-width:54ch;
}
.hh-hero .subhook b{color:#fff; font-weight:500}
.hh-cta-row{display:flex; gap:16px; flex-wrap:wrap; margin-top:40px; align-items:center}
.hh-trust{font-size:.84rem; color:var(--nav-muted); display:inline-flex; align-items:center; gap:9px}
.hh-trust svg{width:16px; height:16px; stroke:var(--sauna); fill:none; stroke-width:1.7; flex:none}

/* ════════════════════════════════════════════════════════════════════
   2 · WHY HARVIA
   ════════════════════════════════════════════════════════════════════ */
.hh-why{display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center}
.hh-why .copy h2{margin-bottom:8px}
.hh-why .copy p{margin-top:22px; font-size:1.02rem; line-height:1.72; color:var(--body); max-width:54ch}
.hh-why .copy p b{color:var(--heading); font-weight:500}
.hh-why .visual{position:relative; aspect-ratio:4/5; min-height:480px}
.hh-why .visual .ph{position:absolute; inset:0}
.hh-why .visual .fin{
  position:absolute; left:-1px; bottom:28px; z-index:3;
  background:var(--bg); color:var(--heading); padding:18px 26px 18px 22px;
  border-radius:0 var(--r-xl) var(--r-xl) 0; box-shadow:var(--shadow-product);
  border-left:3px solid var(--sauna);
}
.hh-why .visual .fin .y{font-weight:600; font-size:1.7rem; letter-spacing:-.02em; line-height:1; color:var(--heading)}
.hh-why .visual .fin .l{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px}

.hh-stats{
  margin-top:clamp(56px,7vw,90px); display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden; background:var(--hairline); gap:1px;
}
.hh-stat{background:var(--bg); padding:38px 40px; display:flex; flex-direction:column; gap:8px}
.hh-stat .big{font-weight:600; font-size:2.3rem; letter-spacing:-.025em; color:var(--heading); line-height:1}
.hh-stat .big em{font-style:normal; color:var(--sauna)}
.hh-stat .sub{font-size:.95rem; color:var(--body)}
.hh-stat .lbl{font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-top:2px}

/* ════════════════════════════════════════════════════════════════════
   3 · HEATER RANGE
   ════════════════════════════════════════════════════════════════════ */
.range-head{max-width:62ch}
.range-head .lead{margin-top:20px}
.heater-grid{
  margin-top:clamp(48px,5vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;
}
.heater{
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-product);
  transition:transform .2s, box-shadow .2s, border-color .15s;
  position:relative;
}
/* Whole-card click: an absolute overlay link covers the card; the kW pills and
   Add-to-cart sit above it (higher z-index) so they stay independently clickable. */
.heater .hcard-overlay{position:absolute; inset:0; z-index:1; border-radius:inherit}
.heater .hpick, .heater .hkw, .heater .hbuy, .heater .hcart{position:relative; z-index:2}
.heater:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(26,31,36,.12); border-color:var(--border)}
.heater .hmedia{
  position:relative; aspect-ratio:4/3.4; overflow:hidden;
  background:linear-gradient(168deg,#FCFBF9 0%,#F1EEE8 100%);
  display:flex; align-items:center; justify-content:center;
}
.heater .hmedia img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
}
.heater .hmedia.ph{background-image:repeating-linear-gradient(135deg,transparent 0 11px,rgba(26,31,36,.035) 11px 12px)}
.heater .hbadge{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  color:var(--sauna-text); font-size:.62rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.heater .hbadge .d{width:5px; height:5px; border-radius:50%; background:var(--sauna); flex:none}
.heater .hbody{padding:24px 26px 26px; display:flex; flex-direction:column; flex:1}
.heater .hbody h3{font-weight:600; font-size:1.28rem; letter-spacing:-.01em; color:var(--heading); line-height:1.15}
.heater .hbody .tag{margin-top:8px; font-size:.96rem; font-weight:500; color:var(--sauna-text); line-height:1.4}
.heater .hbody .desc{margin-top:14px; font-size:.9rem; line-height:1.62; color:var(--body)}
.heater .specs{
  margin-top:20px; display:flex; flex-wrap:wrap; gap:8px;
}
.heater .specs .s{
  font-size:.72rem; font-weight:500; color:var(--heading);
  background:var(--sauna-light); border:1px solid rgba(232,128,80,.28);
  padding:5px 11px; border-radius:var(--r-sm); letter-spacing:.01em;
}
/* Card foot — kW picker, price + add-to-cart, and the details link.
   Pinned to the bottom of the body so cards of unequal copy length align. */
.heater .hfoot{margin-top:auto; padding-top:22px}
/* Static fallback / no-variation cards: bare link still pins to the foot. */
.heater .hbody > .hlink{margin-top:auto; padding-top:22px}
.heater .hlink{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:.82rem; color:var(--muted); align-self:flex-start;
}
.heater .hlink svg{width:12px; height:12px; stroke:var(--cta); fill:none; stroke-width:2.2; transition:transform .2s}
.heater:hover .hlink svg{transform:translate(3px,-3px)}

/* kW picker — each pill deep-links to the product page with ?size= preselected */
.heater .hpick{display:flex; flex-wrap:wrap; gap:8px}
.heater .hkw{
  font-size:.8rem; font-weight:600; color:var(--heading); line-height:1;
  background:#fff; border:1px solid var(--border); border-radius:999px;
  padding:8px 14px; transition:border-color .15s, background .15s, color .15s;
}
.heater .hkw:hover{background:var(--sauna-light); border-color:var(--sauna); color:var(--sauna-text)}
.heater .hbuy{
  margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.heater .hprice{font-size:.82rem; color:var(--muted)}
.heater .hprice .from{display:block; font-size:.72rem; letter-spacing:.04em; color:var(--muted)}
.heater .hprice b{display:block; font-weight:600; font-size:1.35rem; letter-spacing:-.02em; color:var(--heading); line-height:1.1}
.heater .hcart{flex:none}
.heater .hbuy + .hlink{margin-top:12px}

/* Commercial (dark) card — picker/price on slate */
.heater.is-commercial .hkw{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#e6e9ec}
.heater.is-commercial .hkw:hover{border-color:var(--sauna)}
.heater.is-commercial .hkw.is-active{background:rgba(232,128,80,.18); border-color:var(--sauna); color:#fff}
.heater.is-commercial .hprice{color:var(--nav-muted)}
.heater.is-commercial .hprice b{color:#fff}
.heater.is-commercial .hlink{color:var(--nav-muted)}

/* Commercial card — dark slate body, light product plate */
.heater.is-commercial{background:var(--nav); border-color:#1a2028}
.heater.is-commercial .hmedia{border-bottom:1px solid rgba(0,0,0,.25)}
.heater.is-commercial .hbadge{background:var(--cta); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.heater.is-commercial .hbadge .d{background:#fff}
.heater.is-commercial h3{color:#fff}
.heater.is-commercial .tag{color:var(--peach)}
.heater.is-commercial .desc{color:#c2c8ce}
.heater.is-commercial .specs .s{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#e6e9ec}
.heater.is-commercial .hlink{color:#fff}

/* Empty-state note for a dynamic grid with no products yet */
.heater-empty{
  margin-top:clamp(40px,5vw,56px); padding:40px 36px; text-align:center;
  background:#fff; border:1px solid var(--hairline); border-radius:var(--r-xl); box-shadow:var(--shadow-card);
}
.heater-empty p{color:var(--body); font-size:1.02rem; margin-bottom:22px}

/* ════════════════════════════════════════════════════════════════════
   4 · kW SIZING GUIDE
   ════════════════════════════════════════════════════════════════════ */
.sizing-head{max-width:60ch}
.sizing-head .lead{margin-top:18px}
.size-table{
  margin-top:clamp(40px,5vw,60px); background:#fff; border:1px solid var(--hairline);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-card);
}
.size-row{
  display:grid; grid-template-columns:170px 1fr 150px 1.4fr;
  align-items:center; gap:28px; padding:24px 32px; border-bottom:1px solid var(--hairline);
}
.size-row:last-child{border-bottom:0}
.size-row.is-head{
  background:var(--surface); padding-top:16px; padding-bottom:16px;
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.size-tier{display:inline-flex; align-items:center; gap:11px}
.size-tier .bar{display:flex; align-items:flex-end; gap:3px; height:26px}
.size-tier .bar i{width:6px; border-radius:1px; background:var(--sauna); opacity:.32}
.size-tier .bar i.on{opacity:1}
.size-tier .nm{font-weight:600; font-size:1rem; color:var(--heading)}
.size-vol{font-size:1rem; color:var(--body); font-variant-numeric:tabular-nums}
.size-kw{
  display:inline-flex; align-items:baseline; gap:4px;
  font-weight:600; color:var(--cta-active); font-variant-numeric:tabular-nums;
}
.size-kw .n{font-size:1.5rem; letter-spacing:-.02em}
.size-kw .u{font-size:.8rem; font-weight:500}
.size-use{font-size:.94rem; color:var(--body)}
.size-note{
  margin-top:24px; display:flex; gap:14px; align-items:flex-start;
  padding:20px 24px; background:var(--sauna-light); border-left:3px solid var(--sauna);
  border-radius:0 var(--r-lg) var(--r-lg) 0; font-size:.94rem; color:var(--sauna-text); max-width:none;
}
.size-note svg{width:20px; height:20px; stroke:var(--sauna-hover); fill:none; stroke-width:1.8; flex:none; margin-top:2px}
.size-note b{font-weight:600}

/* ════════════════════════════════════════════════════════════════════
   5 · DELIVERY & SUPPORT STRIP  (was: installation)
   ════════════════════════════════════════════════════════════════════ */
.install{display:grid; grid-template-columns:.92fr 1.08fr; gap:0; align-items:stretch}
.install .visual{position:relative; min-height:520px; border-radius:var(--r-xl) 0 0 var(--r-xl); overflow:hidden}
.install .visual .ph{position:absolute; inset:0; border-radius:0}
.install .copy{
  background:var(--nav); color:#cfd3d8; padding:clamp(48px,5vw,72px);
  border-radius:0 var(--r-xl) var(--r-xl) 0; display:flex; flex-direction:column; justify-content:center;
}
.install .copy h2{color:#fff; margin-bottom:20px}
.install .copy .lead{color:#cfd3d8; font-size:1.05rem}
.install-points{list-style:none; margin-top:36px; display:flex; flex-direction:column; gap:2px}
.install-points li{
  display:flex; gap:16px; align-items:flex-start; padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.1); color:#fff; font-size:1.02rem;
}
.install-points li:last-child{border-bottom:0}
.install-points li .ic{
  width:34px; height:34px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(232,128,80,.16); border:1px solid rgba(232,128,80,.4);
}
.install-points li .ic svg{width:17px; height:17px; stroke:var(--sauna); fill:none; stroke-width:2}

/* Final-CTA strip (reuses the .install split layout) */
.install-cta{display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; align-items:center}
.install-email{font-size:.92rem; color:#cfd3d8}
.install-email a{color:var(--sauna); font-weight:500; border-bottom:1px solid rgba(232,128,80,.45); padding-bottom:1px}
.install-email a:hover{color:var(--peach)}

/* ── Reveal on scroll ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1; transform:none}
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .heater-grid{grid-template-columns:repeat(2,1fr)}
  .hh-why{grid-template-columns:1fr; gap:48px}
  .hh-why .visual{min-height:420px; aspect-ratio:16/11}
  .install{grid-template-columns:1fr}
  .install .visual{min-height:340px; border-radius:var(--r-xl) var(--r-xl) 0 0}
  .install .copy{border-radius:0 0 var(--r-xl) var(--r-xl)}
  .size-row{grid-template-columns:130px 1fr 120px; gap:18px}
  .size-row .size-use{display:none}
  .size-row.is-head .size-use{display:none}
}
@media (max-width:720px){
  .wrap,.wrap-tight{padding:0 22px}
  .hh-hero .wrap{padding-top:96px; padding-bottom:56px}
  .hh-stats{grid-template-columns:1fr}
  .heater-grid{grid-template-columns:1fr; gap:18px}
  .hh-stat{padding:28px 28px}
  .size-row{grid-template-columns:1fr auto; gap:6px 16px; padding:20px 22px}
  .size-row .size-vol{grid-column:1; font-size:.9rem; color:var(--muted)}
  .size-row .size-kw{grid-column:2; grid-row:1}
  .size-row.is-head{display:none}
  .hh-cta-row{gap:14px}
  .btn{width:100%}
  .hh-trust{justify-content:center}
}