/* ============================================================================
   HOMES & FLOORS — HOMEPAGE v2 DESIGN SYSTEM  (production, cached external CSS)
   ----------------------------------------------------------------------------
   ONE cached stylesheet for the rebuilt homepage. Everything is scoped under
   .hfv2-page and tokens live on .hfv2-page, so this file CANNOT override any
   existing site CSS (no global leakage, no clobbering). Mobile-first responsive.
   Served once, long-cached (versioned by filemtime in hf-home-v2.php) — replaces
   the ~1.37 MB of per-page inline <style>. Tokens extracted 1:1 from the live site.
   ========================================================================== */

.hfv2-page{
 --navy:#122B4C;--navy-deep:#0a1f3a;--green:#4ad55d;--green-ink:#072617;--green-text:#237a3a;
 --ink:#182033;--body:#59616b;--bg-light:#eef2f7;
 --r-card:16px;--r-lg:22px;--r-pill:999px;
 --shadow:0 12px 32px rgba(16,35,61,.10);--glow:0 8px 24px rgba(74,213,93,.30);
 --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
 font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;
}
.hfv2-page *{box-sizing:border-box}
.hfv2-page img{display:block;max-width:100%}
.hfv2-wrap{width:min(1180px,92vw);margin-inline:auto}
.hfv2-sec{padding:clamp(48px,7vw,96px) 0}
.hfv2-sec--light{background:var(--bg-light)}
.hfv2-sec--dark{background:var(--navy-deep);color:#fff}
.hfv2-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--green-text);font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase}
.hfv2-eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.hfv2-sec--dark .hfv2-eyebrow,.hfv2-feat .hfv2-eyebrow,.hfv2-faq .hfv2-eyebrow{color:var(--green)}
.hfv2-h2{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.5px;line-height:1.05;margin:0}
.hfv2-lead{font-size:clamp(15px,1.3vw,18px);line-height:1.55;color:var(--body)}
.hfv2-sec--dark .hfv2-lead,.hfv2-cta .hfv2-lead{color:rgba(255,255,255,.85)}
.hfv2-center{text-align:center;max-width:640px;margin-inline:auto}
.hfv2-ul{width:54px;height:3px;background:var(--green);border-radius:var(--r-pill);margin:14px auto 0}

/* Buttons */
.hfv2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:14px 26px;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;border-radius:var(--r-pill);border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .15s,filter .15s,background .18s,color .18s}
.hfv2-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.hfv2-btn--green{background:var(--green);color:var(--green-ink);box-shadow:var(--glow)}
.hfv2-btn--navy{background:var(--navy);color:#fff;border-radius:12px}
.hfv2-btn--light{background:#fff;color:var(--navy)}
.hfv2-btn--ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.85)}
.hfv2-btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.hfv2-btn--outline:hover{background:var(--navy);color:#fff}
.hfv2-page a:focus-visible,.hfv2-page button:focus-visible,.hfv2-page summary:focus-visible{outline:3px solid var(--green);outline-offset:3px}

/* 1 HERO */
.hfv2-hero{position:relative;display:flex;align-items:center;min-height:clamp(560px,78vh,720px);padding:clamp(40px,5vw,72px);color:#fff;background:#0a1f3a center/cover no-repeat;overflow:hidden}
.hfv2-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(7,17,31,.93) 0%,rgba(7,17,31,.85) 30%,rgba(7,17,31,.55) 52%,rgba(7,17,31,.18) 74%,rgba(7,17,31,.03) 100%)}
.hfv2-hero__card{position:relative;width:min(560px,54%);padding:0}
.hfv2-hero__card .hfv2-eyebrow{margin-bottom:6px}
.hfv2-hero__card h1{font-size:clamp(42px,6.4vw,82px);font-weight:800;line-height:1.0;letter-spacing:-2px;margin:14px 0 16px;text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hfv2-hero__card .hfv2-lead{color:rgba(255,255,255,.92);max-width:430px;margin-bottom:30px;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.hfv2-hero__btns{display:flex;flex-wrap:wrap;gap:14px}
.hfv2-hero__nav{position:absolute;left:clamp(40px,5vw,72px);bottom:clamp(26px,4vh,40px);z-index:3;display:flex;align-items:center;gap:clamp(14px,1.6vw,22px)}
.hfv2-hero__arws{display:flex;gap:10px}
.hfv2-hero__arw{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:20px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.hfv2-hero__arw:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-1px)}
.hfv2-hero__arw:active{transform:translateY(0)}
/* Hero-Dots (02.08.2026 ueberarbeitet)
   - Fortschritt kommt aus --hfv2-hero-p, gesetzt von hf-home-v2.js. Vorher war es
     eine eigene 6s-CSS-Animation neben einem 6000-ms-setInterval: zwei Uhren, die
     auseinanderliefen. Jetzt gibt es genau eine.
   - <button> statt <span role="button">; die span-Selektoren bleiben stehen, damit
     eine seitengecachte alte Fassung nicht kaputt aussieht.
   - Trefferflaeche ueber ::before, die Optik bleibt schlank. */
.hfv2-hero__dots{display:flex;align-items:center;gap:10px}
.hfv2-hero__dots>span,.hfv2-hero__dots>button{position:relative;display:block;flex:0 0 auto;width:26px;height:3px;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;transition:width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1)}
.hfv2-hero__dots>span::before,.hfv2-hero__dots>button::before{content:"";position:absolute;left:-5px;right:-5px;top:-16px;bottom:-16px;background:transparent}
.hfv2-hero__dot-track,.hfv2-hero__dots>span::after{position:absolute;left:0;top:0;display:block;width:100%;height:100%;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.34);box-shadow:0 1px 3px rgba(7,20,36,.45),inset 0 1px 0 rgba(255,255,255,.22);transition:background .25s ease,box-shadow .25s ease}
.hfv2-hero__dots>span::after{content:""}
.hfv2-hero__dots>span:hover::after,.hfv2-hero__dots>button:hover .hfv2-hero__dot-track{background:rgba(255,255,255,.68)}
.hfv2-hero__dots>button:focus{outline:none}
.hfv2-hero__dots>button:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:999px}
.hfv2-hero__dot-fill{position:absolute;inset:0;display:block;border-radius:999px;background:linear-gradient(90deg,var(--green),#7ce98a);transform:scaleX(0);transform-origin:left;will-change:transform}
.hfv2-hero__dots>span.on,.hfv2-hero__dots>button.on{width:56px}
.hfv2-hero__dots>button.on .hfv2-hero__dot-track{background:rgba(255,255,255,.20);box-shadow:0 1px 3px rgba(7,20,36,.45),0 0 16px rgba(74,213,93,.34)}
.hfv2-hero__dots>button.on .hfv2-hero__dot-fill{transform:scaleX(var(--hfv2-hero-p,0))}
/* Alte, seitengecachte span-Fassung: derselbe Balken, aber ohne Fortschritt —
   die Spans haben kein inneres Element dafuer. Faellt mit dem Seitencache weg. */
.hfv2-hero__dots>span.on::after{background:linear-gradient(90deg,var(--green),#7ce98a);box-shadow:0 1px 3px rgba(7,20,36,.45),0 0 16px rgba(74,213,93,.4)}
@media(prefers-reduced-motion:reduce){
 .hfv2-hero__dots>span,.hfv2-hero__dots>button{transition:none}
}
@keyframes hfv2heroFill{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}}
.hfv2-hero .hfv2-btn--green{background:linear-gradient(135deg,#57e06b 0%,#37c34c 100%);box-shadow:0 14px 34px -10px rgba(74,213,93,.6);border-color:transparent}
.hfv2-hero .hfv2-btn--green:hover{box-shadow:0 18px 44px -10px rgba(74,213,93,.78)}
.hfv2-hero .hfv2-btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.hfv2-hero .hfv2-btn--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}
.hfv2-htrust{background:#0c2444}
.hfv2-htrust .hfv2-wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.hfv2-hti{display:flex;align-items:center;gap:13px;padding:20px;border-left:1px solid rgba(255,255,255,.07)}
.hfv2-hti:first-child{border-left:0}
.hfv2-hti{text-decoration:none}
.hfv2-hti__ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(74,213,93,.14)}
.hfv2-hti__ic i{font-size:21px;color:var(--green)}
.hfv2-hti__ic .hfv2-lg{width:24px;height:24px}
.hfv2-hti--brand .hfv2-hti__ic{background:#fff;transition:transform .18s}
.hfv2-hti--brand:hover .hfv2-hti__ic{transform:scale(1.06)}
.hfv2-hti b{display:block;color:#fff;font-size:15px;font-weight:600}
.hfv2-hti small{color:rgba(255,255,255,.62);font-size:12px}

/* 2 DISCOVER */
.hfv2-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 30px}
.hfv2-tab{min-height:48px;padding:13px 22px;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border-radius:var(--r-pill);background:#fff;color:var(--navy);border:1.5px solid rgba(18,43,76,.3);cursor:pointer}
.hfv2-tab[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.hfv2-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hfv2-ccard{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:18px;overflow:hidden;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.hfv2-ccard:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(16,35,61,.18)}
.hfv2-ccard__m{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:18px 18px 0 0;transform:translateZ(0)}
.hfv2-ccard__m img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.hfv2-ccard:hover .hfv2-ccard__m img{transform:scale(1.06)}
.hfv2-badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(10,31,58,.92);color:#fff;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-pill)}
.hfv2-badge i{color:var(--green)}
.hfv2-ccard__b{display:flex;flex-direction:column;flex:1;padding:22px}
.hfv2-ccard__k{color:var(--green-text);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.hfv2-ccard__t{color:var(--navy);font-size:22px;font-weight:700;margin-bottom:9px}
.hfv2-ccard__d{color:var(--body);font-size:14px;line-height:1.5;margin-bottom:14px}
.hfv2-ccard__cue{display:inline-flex;align-items:center;gap:7px;color:#3a4658;font-size:12.5px;margin-bottom:18px}
.hfv2-ccard__cue i{color:var(--green-text)}
.hfv2-ccard__cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;font-size:12.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;border-radius:var(--r-pill);background:transparent;color:var(--navy);border:2px solid var(--navy);transition:background .18s,color .18s}
.hfv2-ccard:hover .hfv2-ccard__cta{background:var(--green);color:var(--green-ink);border-color:var(--green)}
/* Discover = compact category navigator (all categories as image tiles) */
.hfv2-disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.hfv2-disc-tile{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;text-decoration:none;background:var(--navy-deep);box-shadow:0 10px 26px rgba(16,35,61,.1)}
.hfv2-disc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s}
.hfv2-disc-tile:hover img{transform:scale(1.07)}
.hfv2-disc-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,36,0) 42%,rgba(7,20,36,.85) 100%)}
.hfv2-disc-tile__name{position:absolute;left:16px;right:14px;bottom:13px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#fff;font:700 15px/1.2 var(--font)}
.hfv2-disc-tile__name i{flex:none;color:var(--green);font-size:18px;transition:transform .18s}
.hfv2-disc-tile:hover .hfv2-disc-tile__name i{transform:translateX(3px)}
.hfv2-disc-tile:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.hfv2-disc-tile--plain::after{background:linear-gradient(160deg,#1e3d68,#0a1f3d)}
.hfv2-disc-tile--plain .hfv2-disc-tile__name{inset:0;left:14px;right:14px;justify-content:center;align-items:center;text-align:center}

/* 3 SAMPLE-FIRST */
.hfv2-sample__grid{display:grid;grid-template-columns:.9fr 1fr;gap:44px;align-items:center}
.hfv2-sample__media{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:440px}
.hfv2-sample__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hfv2-sample__badge{position:absolute;top:16px;left:16px;background:var(--green);color:var(--green-ink);font-size:13px;font-weight:700;padding:9px 16px;border-radius:var(--r-pill)}
.hfv2-sample__h{font-size:clamp(28px,3.4vw,44px);font-weight:800;line-height:1.06;letter-spacing:-.5px;margin:14px 0}
.hfv2-sample{padding:clamp(38px,5vw,66px) 0}
.hfv2-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
.hfv2-step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:5px;background:linear-gradient(160deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 100%);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:18px 18px 20px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09);transition:transform .2s,border-color .2s,box-shadow .2s}
.hfv2-step:hover{transform:translateY(-4px);border-color:rgba(74,213,93,.5);box-shadow:0 26px 54px -22px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.12)}
.hfv2-step__n{grid-column:1;grid-row:1 / 3;align-self:center;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#57e06b 0%,#37c34c 100%);color:var(--green-ink);font-weight:800;font-size:17px;box-shadow:0 8px 20px -4px rgba(74,213,93,.55)}
.hfv2-step b{grid-column:2;align-self:end;display:block;color:#fff;font-size:15.5px;line-height:1.2}
.hfv2-step span{grid-column:2;align-self:start;color:rgba(255,255,255,.74);font-size:13px;line-height:1.5}

/* 4/6/8 FEATURE (spotlight + carousel + product card replica) */
.hfv2-feat{padding:0 0 clamp(48px,7vw,90px);background:#fff}
.hfv2-spot{position:relative;min-height:clamp(420px,50vw,600px);overflow:hidden;display:flex;align-items:flex-end}
.hfv2-spot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hfv2-spot__card{position:relative;width:clamp(300px,38%,440px);background:linear-gradient(180deg,rgba(248,250,253,.93) 0%,rgba(252,253,255,.98) 60%,#fff 100%);border-top:4px solid var(--green);border-radius:0 18px 0 0;padding:clamp(26px,2.6vw,40px) clamp(26px,2.6vw,40px) clamp(32px,3.4vw,48px);display:flex;flex-direction:column;gap:14px}
.hfv2-spot__ey{color:var(--green-text);font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase}
.hfv2-spot__h{margin:0;color:var(--navy);font-size:clamp(32px,4vw,52px);font-weight:800;line-height:1.02;letter-spacing:-1px}
.hfv2-spot__p{margin:0;color:#3f4858;font-size:14px;line-height:1.6}
.hfv2-spot__card .hfv2-btn{align-self:flex-start}
.hfv2-feat__head{text-align:center;max-width:860px;margin:clamp(20px,2.4vw,34px) auto clamp(24px,3vw,34px)}
.hfv2-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--green-text);font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:12px}
.hfv2-kicker::before{content:"";width:28px;height:2px;background:currentColor}
.hfv2-feat__h{color:var(--navy);font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.5px;margin:0}
.hfv2-feat__sub{color:var(--body);font-size:15px;margin-top:8px}
.hfv2-carousel{position:relative}
.hfv2-carousel__arw{position:absolute;top:32%;z-index:4;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid rgba(18,43,76,.12);box-shadow:0 10px 22px rgba(16,35,61,.18);color:var(--navy);cursor:pointer;font-size:20px}
.hfv2-carousel__arw.l{left:-10px}.hfv2-carousel__arw.r{right:-10px}
.hfv2-pgrid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 0 16px}
.hfv2-pgrid::-webkit-scrollbar{display:none}
.hfv2-pcard{position:relative;display:flex;flex-direction:column;flex:0 0 calc((100% - 54px)/4);scroll-snap-align:start;background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:16px;overflow:hidden;box-shadow:none;transition:transform .2s,box-shadow .2s}
.hfv2-pcard:hover{transform:translateY(-5px);box-shadow:0 10px 24px rgba(16,35,61,.1)}
.hfv2-pcard__m{position:relative;aspect-ratio:1/1;overflow:hidden;background:#e7ecf3;border-radius:16px 16px 0 0;transform:translateZ(0)}
.hfv2-pcard__m img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
/* A rectangular tile shown as a square crop is unrecognisable, so the
   product shot is contained while scenery keeps filling the card. */
.hfv2-pcard__m img[data-fit=contain]{object-fit:contain;padding:10px;box-sizing:border-box;background:#fff}
.hfv2-pcard:hover .hfv2-pcard__m img[data-fit=contain]{transform:scale(1.03)}
.hfv2-pcard:hover .hfv2-pcard__m img{transform:scale(1.05)}
.hfv2-pcard__dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:5px}
.hfv2-pcard__dots span{width:7px;height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.6);cursor:pointer}
.hfv2-pcard__dots .on{width:17px;background:#fff}
.hfv2-pcard__bag{position:absolute;right:13px;bottom:13px;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(160deg,#1e3d68 0%,#0a1f3d 100%);color:#fff;text-decoration:none;border:1.5px solid rgba(74,213,93,.55);box-shadow:0 12px 28px rgba(10,31,58,.45),0 2px 5px rgba(10,31,58,.3),inset 0 1px 1px rgba(255,255,255,.22);font-size:22px;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.hfv2-pcard__bag::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(255,255,255,.14);pointer-events:none}
.hfv2-pcard__bag:hover,.hfv2-pcard__bag:focus-visible{background:linear-gradient(160deg,#5fe072 0%,#3cc551 100%);border-color:var(--green);color:var(--green-ink);transform:translateY(-2px) scale(1.08);box-shadow:0 16px 34px rgba(74,213,93,.5)}
.hfv2-pcard__bag:active{transform:scale(.95)}
.hfv2-pcard__b{display:flex;flex-direction:column;flex:1;padding:16px}
.hfv2-pcard__meta{color:var(--green-text);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.hfv2-pcard__t{color:var(--navy);font-size:14.5px;font-weight:700;line-height:1.3;margin-bottom:11px;min-height:38px}
.hfv2-pcard__s{display:inline-flex;align-items:center;gap:7px;color:#3a4658;font-size:12px;margin-bottom:14px}
.hfv2-pcard__s::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-text)}
.hfv2-pcard__v{margin-top:auto;display:inline-flex;align-items:center;gap:9px;color:var(--green-text);font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;text-decoration:none}
.hfv2-pcard__v .c{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--green-text);font-size:14px}

/* 5 WHY */
.hfv2-why__grid{display:grid;grid-template-columns:.9fr 1fr;gap:40px;align-items:center}
.hfv2-why__media{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:440px}
.hfv2-why__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hfv2-why__rating{position:absolute;top:18px;left:18px;background:#fff;border-radius:12px;padding:10px 15px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.hfv2-why__rating .st{color:var(--green-text);letter-spacing:1px}
.hfv2-why__rating small{display:block;color:var(--navy);font-size:12px;font-weight:600}
.hfv2-why__corner{position:absolute;right:0;bottom:0;width:70px;height:70px;background:var(--green);clip-path:polygon(100% 0,100% 100%,0 100%)}
.hfv2-why__h{font-size:clamp(30px,3.6vw,46px);font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.06;margin:16px 0 20px}
.hfv2-why__h .g{color:var(--green)}
.hfv2-checks{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0 0 24px;padding:0}
.hfv2-checks li{display:flex;gap:11px;align-items:flex-start;color:rgba(255,255,255,.9);font-size:15px;line-height:1.45}
.hfv2-checks .ic{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(74,213,93,.18);color:var(--green);font-size:14px;margin-top:2px}
.hfv2-checks .g{color:var(--green);font-weight:600}
.hfv2-wstats{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-bottom:26px}
.hfv2-wstat{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px}
.hfv2-wstat .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(74,213,93,.16);color:var(--green);font-size:19px}
.hfv2-wstat b{display:block;color:#fff;font-size:17px;font-weight:700}
.hfv2-wstat small{color:rgba(255,255,255,.7);font-size:12px}

/* 7 REVIEWS */
.hfv2-rv__trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px;margin:24px 0 4px}
.hfv2-rv__tg{display:inline-flex;align-items:center;gap:10px}
.hfv2-rv__tg .lg{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-size:15px;font-weight:700}
.hfv2-rv__tg .lg .tp{color:var(--green-text)}
.hfv2-rv__tg .st{color:var(--green-text);letter-spacing:1.5px}
.hfv2-rv__tg .sc{color:var(--navy);font-weight:800}
.hfv2-rv__vd{width:1px;height:22px;background:rgba(18,43,76,.18)}
.hfv2-rv__tabs{display:flex;justify-content:center;gap:28px;border-bottom:1px solid rgba(18,43,76,.12);max-width:540px;margin:22px auto 0}
.hfv2-rv__tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 2px;color:#8a93a0;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;cursor:pointer}
.hfv2-rv__tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--green)}
.hfv2-rv__slider{position:relative;margin-top:32px;padding:0 34px}
.hfv2-rv__arw{position:absolute;top:42%;z-index:3;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid rgba(18,43,76,.12);box-shadow:0 10px 24px rgba(16,35,61,.16);color:var(--navy);cursor:pointer;font-size:20px;transition:background .18s,color .18s}
.hfv2-rv__arw:hover{background:var(--navy);color:#fff}
.hfv2-rv__arw.l{left:-6px}.hfv2-rv__arw.r{right:-6px}
.hfv2-rv__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hfv2-rcard{position:relative;background:#fff;border-radius:18px;padding:24px 22px 22px;box-shadow:var(--shadow);border:1px solid rgba(18,43,76,.05);overflow:hidden;transition:transform .2s,box-shadow .2s}
.hfv2-rcard:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(16,35,61,.16)}
.hfv2-rcard__q{position:absolute;top:10px;right:18px;color:rgba(18,43,76,.06);font-size:58px;font-family:Georgia,serif}
.hfv2-rcard__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hfv2-rcard__avw{position:relative;flex:none}
.hfv2-rcard__av{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;font-weight:700;font-size:17px}
.hfv2-av-g{background:var(--green-text)}.hfv2-av-n{background:var(--navy)}.hfv2-av-p{background:#6d3bd1}
.hfv2-rcard__vf{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--green);color:var(--green-ink);font-size:11px;border:2px solid #fff}
.hfv2-rcard__name{color:var(--navy);font-size:15px;font-weight:700}
.hfv2-rcard__date{color:#8a93a0;font-size:12px}
.hfv2-rcard__src{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700}
.hfv2-src-tp{color:var(--green-text)}.hfv2-src-g{color:#3a4658}
.hfv2-rcard__stars{color:var(--green-text);letter-spacing:2px;margin-bottom:10px}
.hfv2-rcard__txt{color:var(--body);font-size:13.5px;line-height:1.55}
/* Real brand logos + clickable Trustpilot/Google */
.hfv2-lg{display:inline-block;vertical-align:middle;flex:none}
.hfv2-wstat{text-decoration:none}
.hfv2-wstat .ic--brand{background:#fff}
.hfv2-wstat .ic .hfv2-lg{width:20px;height:20px}
.hfv2-wstat[href]:hover{border-color:rgba(74,213,93,.4)}
.hfv2-rv__tg{text-decoration:none}
.hfv2-rv__tg .lg .hfv2-lg{width:18px;height:18px}
.hfv2-rcard__src{text-decoration:none}
.hfv2-rcard__src .hfv2-lg{width:14px;height:14px}
.hfv2-rv__more{display:flex;justify-content:center;margin-top:30px}
/* Reviews — dark navy variant */
.hfv2-reviews{padding:clamp(32px,4.5vw,56px) 0}
.hfv2-reviews .hfv2-rv__tg .lg{color:#fff}
.hfv2-reviews .hfv2-rv__tg .sc{color:#fff}
.hfv2-reviews .hfv2-rv__tg .st{color:var(--green)}
.hfv2-reviews .hfv2-rv__vd{background:rgba(255,255,255,.22)}
.hfv2-reviews .hfv2-rv__tabs{border-bottom-color:rgba(255,255,255,.16)}
.hfv2-reviews .hfv2-rv__tab{color:rgba(255,255,255,.6)}
.hfv2-reviews .hfv2-rv__tab[aria-selected="true"]{color:#fff}
.hfv2-reviews .hfv2-rv__arw:hover{background:var(--green);color:var(--green-ink);border-color:transparent}
.hfv2-reviews .hfv2-btn--outline{color:#fff;border-color:rgba(255,255,255,.5)}
.hfv2-reviews .hfv2-btn--outline:hover{background:#fff;color:var(--navy)}

/* 9 FAQ */
.hfv2-faq__list{max-width:860px;margin-inline:auto;display:flex;flex-direction:column;gap:12px}
.hfv2-faq__item{background:#fff;border-radius:14px;overflow:hidden}
.hfv2-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:14px;list-style:none;cursor:pointer;padding:20px 24px;color:var(--navy);font-size:16px;font-weight:700}
.hfv2-faq__item summary::-webkit-details-marker{display:none}
.hfv2-faq__item summary .ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(35,122,58,.12);color:var(--green-text);font-size:17px;transition:transform .2s}
.hfv2-faq__item[open] summary .ic{transform:rotate(180deg)}
.hfv2-faq__a{padding:0 24px 22px;color:var(--body);font-size:14px;line-height:1.6}
.hfv2-faq__foot{text-align:center;color:rgba(255,255,255,.8);font-size:14px;margin-top:28px}
.hfv2-faq__foot a{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* 10 INSIGHT */
.hfv2-ins__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hfv2-icard{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid rgba(18,43,76,.1);border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:0 10px 26px rgba(16,35,61,.08);transition:transform .2s,box-shadow .2s}
.hfv2-icard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(16,35,61,.16)}
.hfv2-icard__m{position:relative;aspect-ratio:16/11;overflow:hidden;background:#e7ecf3;border-radius:16px 16px 0 0;transform:translateZ(0)}
.hfv2-icard__m img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.hfv2-icard:hover .hfv2-icard__m img{transform:scale(1.06)}
.hfv2-icard__b{display:flex;flex-direction:column;flex:1;padding:18px}
.hfv2-icard__tag{align-self:flex-start;padding:5px 12px;border:1px solid rgba(35,122,58,.4);border-radius:var(--r-pill);color:var(--green-text);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:rgba(35,122,58,.07);margin-bottom:13px}
.hfv2-icard__t{color:var(--navy);font-size:17px;font-weight:700;line-height:1.25;margin-bottom:9px}
.hfv2-icard__d{color:var(--body);font-size:13px;line-height:1.5;margin-bottom:15px}
.hfv2-icard__x{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--green-text);font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}

/* 11 CTA */
.hfv2-cta{background:#0e2a4d;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;color:#fff}
.hfv2-cta__grid{display:grid;grid-template-columns:1fr .9fr;gap:40px;align-items:center}
.hfv2-cta__h{font-size:clamp(30px,4vw,52px);font-weight:800;line-height:1.04;letter-spacing:-1px;margin:16px 0 14px;color:#fff}
.hfv2-cta__btns{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 24px}
.hfv2-cta__checks{list-style:none;display:flex;flex-direction:column;gap:12px;padding:18px 0 0;margin:0;border-top:1px solid rgba(255,255,255,.12)}
.hfv2-cta__checks li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.9);font-size:14px}
.hfv2-cta__checks .ic{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(74,213,93,.18);color:var(--green);font-size:13px}
.hfv2-cta__card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:30px}
.hfv2-cta__pill{display:inline-flex;align-items:center;gap:6px;background:rgba(74,213,93,.16);color:#8ff0a3;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 13px;border-radius:var(--r-pill);margin-bottom:16px}
.hfv2-cta__pill i{color:var(--green)}
.hfv2-cta__ch{color:#fff;font-size:26px;font-weight:800;line-height:1.15;margin-bottom:10px}
.hfv2-cta__cd{color:rgba(255,255,255,.78);font-size:14px;line-height:1.5;margin-bottom:18px}
.hfv2-cta label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hfv2-cta input{width:100%;min-height:54px;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font:400 14px var(--font);margin-bottom:12px}
.hfv2-cta input::placeholder{color:rgba(255,255,255,.55)}
.hfv2-cta__submit{width:100%;min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:12px;background:var(--green);color:var(--green-ink);border:0;cursor:pointer;box-shadow:var(--glow)}
.hfv2-cta__note{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.62);font-size:12px;margin-top:13px}

/* ---- Tablet / mobile (one scaled layout) -------------------------------- */
@media(max-width:980px){
 .hfv2-cards3,.hfv2-ins__grid{grid-template-columns:repeat(2,1fr)}
 .hfv2-rv__grid{grid-template-columns:1fr}
 .hfv2-carousel__arw{display:none}
 /* product carousel becomes a real horizontal swipe (was a broken vertical stack) */
 .hfv2-pgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:2px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
 .hfv2-pgrid::-webkit-scrollbar{display:none}
 .hfv2-pcard{flex:0 0 280px;scroll-snap-align:start}
 .hfv2-pcard__t{min-height:0}}
@media(max-width:760px){
 /* hero: IMAGE is the hero — no dark box; one heading (eyebrow hidden); text over a
    bottom gradient for legibility; buttons stacked; dots bottom-centered */
 .hfv2-hero{min-height:82vh;align-items:flex-end;padding:0}
 .hfv2-hero::before{background:linear-gradient(180deg,rgba(7,20,36,.12) 0%,rgba(7,20,36,.22) 42%,rgba(7,20,36,.9) 100%)}
 .hfv2-hero__card{width:100%;background:transparent;border:0;box-shadow:none;border-radius:0;padding:0 22px 64px;backdrop-filter:none;-webkit-backdrop-filter:none}
 .hfv2-hero__card .hfv2-eyebrow{display:none}
 .hfv2-hero__card h1{font-size:clamp(36px,9vw,52px);margin:0 0 12px}
 .hfv2-hero__card .hfv2-lead{font-size:15px;margin-bottom:20px;color:rgba(255,255,255,.92)}
 .hfv2-hero__btns{flex-direction:column}
 .hfv2-hero__btns .hfv2-btn{width:100%}
 .hfv2-hero__nav{left:0;right:0;bottom:22px;justify-content:center}
 .hfv2-hero__arws{display:none}
 /* trust: 2 side-by-side on mobile, 3rd spans full width; centered icon-on-top */
 .hfv2-htrust .hfv2-wrap{grid-template-columns:repeat(3,1fr)}
 .hfv2-hti{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 8px;border-left:1px solid rgba(255,255,255,.1)}
 .hfv2-hti:first-child{border-left:0}
 .hfv2-hti__ic{width:36px;height:36px}
 .hfv2-hti__ic i{font-size:17px}
 .hfv2-hti__ic .hfv2-lg{width:20px;height:20px}
 .hfv2-hti b{font-size:12.5px;line-height:1.25}
 .hfv2-hti small{display:none}
 /* feature = ONE unified mobile section; text BLENDS onto the image (hero-style
    overlay + bottom gradient), then products follow. No repeated "Featured X". */
 .hfv2-feat{background:#f4f7fb}
 .hfv2-feat__head{display:none}
 .hfv2-spot{position:relative;display:flex;align-items:flex-end;min-height:74vh;overflow:hidden}
 .hfv2-spot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .hfv2-spot::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,20,36,.05) 0%,rgba(7,20,36,.28) 45%,rgba(7,20,36,.92) 100%)}
 .hfv2-spot__card{position:relative;z-index:2;width:100%;background:transparent;border-top:0;border-radius:0;padding:0 6vw 34px;gap:12px;box-shadow:none}
 .hfv2-spot__ey{color:var(--green)}
 .hfv2-spot__h{color:#fff}
 .hfv2-spot__p{color:rgba(255,255,255,.92)}
 .hfv2-spot__card .hfv2-btn--navy{background:#fff;color:var(--navy);border-color:#fff}
 .hfv2-feat .hfv2-wrap{padding-top:22px}
 .hfv2-sample__grid,.hfv2-why__grid,.hfv2-cta__grid{grid-template-columns:1fr}
 .hfv2-steps,.hfv2-wstats{grid-template-columns:1fr}
 .hfv2-steps{gap:10px}
 .hfv2-step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:3px;padding:13px 15px}
 .hfv2-step__n{grid-column:1;grid-row:1 / 3;align-self:center;margin:0;width:34px;height:34px}
 .hfv2-cards3,.hfv2-ins__grid{grid-template-columns:1fr}
 .hfv2-disc-grid{grid-template-columns:1fr 1fr;gap:12px}
 .hfv2-pcard{flex:0 0 82%}
 .hfv2-pcard__dots{display:none}}

/* ===== PDP (single product) ===== */
.hf-pdp-bc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;font-weight:600;padding:6px 0 14px}
.hf-pdp-bc a{color:var(--green-text);text-decoration:none}
.hf-pdp-bc a:hover{text-decoration:underline}
.hf-pdp-bc i{font-size:14px;color:#b8c0cc}
.hf-pdp-bc span{color:var(--navy)}
.hf-pdp-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,4vw,52px);align-items:start}
/* Gallery: a fixed stage with the thumbnail strip beneath it. The stage does
   not change shape between images — a gallery that resizes with every click
   reads as jumpy, and the strip below replaces both the side rail and the
   overlay arrows. Everything square, nothing framed: on a white page a white
   stage needs no edge, and removing the ring/shadow chrome is what lets the
   product itself carry the panel. */
.hf-gal{display:flex;flex-direction:column;gap:12px}
/* The strip sits beneath the stage at every width; the markup keeps the
   thumbnails first for keyboard order, so the visual order is set here. */
.hf-gmain{order:1}
/* Centred beneath the stage, one even row. */
.hf-gal__thumbs{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;order:2}
.hf-gthumb{width:104px;height:104px;border-radius:0;overflow:hidden;border:0;cursor:pointer;background:#fff;padding:0;opacity:.58;box-shadow:inset 0 0 0 1px rgba(18,43,76,.08);transition:opacity .24s ease,box-shadow .24s ease}
/* Scenery fills its frame — small floating photos in white squares made
   the strip look scattered. A bare tile keeps contain: cropping it in the
   preview would misstate the product's shape. */
.hf-gthumb img{width:100%;height:100%;object-fit:cover;object-position:center;padding:0;box-sizing:border-box;background:#fff;display:block}
.hf-gthumb.is-tile img{object-fit:contain;padding:4px}
/* Selection is carried by weight, not by drawing a box: the chosen frame is
   the only one at full strength, behind a thin ink edge. */
.hf-gthumb:hover{opacity:.85;box-shadow:inset 0 0 0 1px rgba(13,47,87,.16)}
.hf-gthumb.is-active{opacity:1;box-shadow:inset 0 0 0 1.5px #0f2740}
.hf-gthumb:focus-visible{outline:2px solid #0f2740;outline-offset:2px}
.hf-gmain{position:relative;aspect-ratio:3/2;border-radius:0;overflow:hidden;background:#fff;touch-action:manipulation}
/* contain, never cover: the complete tile has to stay visible. */
.hf-gmain img{width:100%;height:100%;object-fit:contain;object-position:center;padding:clamp(8px,2.2%,22px);box-sizing:border-box;display:block;touch-action:manipulation}
.hf-gmain img[data-fit=cover]{object-fit:cover;padding:0}
.hf-gmain img.is-swapping{opacity:0}
.hf-gmain img{transition:opacity .16s ease}
@media(prefers-reduced-motion:reduce){.hf-gmain img,.hf-gthumb{transition:none}}
/* whole buy-box + gallery: no double-tap-to-zoom while switching images / changing qty */
.hf-gal,.hf-gal__thumbs,.hf-qbox,.hf-bp,.hf-ovtoggle{touch-action:manipulation}
/* Labels, not controls: the badge and counter sit quietly on the image. */
.hf-gmain__badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);color:#17263c;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:0}
.hf-gmain__count{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.92);color:#17263c;font-size:11px;font-weight:600;letter-spacing:.02em;padding:5px 10px;border-radius:0;font-variant-numeric:tabular-nums}
.hf-pinfo__ey{display:inline-flex;align-items:center;gap:10px;color:var(--green-text);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.hf-pinfo__ey::before{content:"";width:26px;height:2px;background:currentColor}
/* A step smaller than before: the title anchors the column, it does not
   shout over the price. The width cap makes long names break into two
   deliberate lines instead of one long ragged one. */
.hf-pinfo__t{color:var(--navy);font-size:clamp(25px,2.9vw,38px);font-weight:800;letter-spacing:-.8px;line-height:1.12;margin:10px 0 0;max-width:24ch}
.hf-pinfo__lead{color:var(--body);font-size:15px;line-height:1.6;max-width:480px;margin:0}
/* Sharing is a footnote, not a feature: one quiet row above a hairline
   instead of its own tinted card. */
.hf-share{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 0 0;background:transparent;border-radius:0;border-top:1px solid rgba(18,43,76,.08)}
.hf-share__l{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--body);text-transform:uppercase}
.hf-share__icons{display:flex;gap:6px}
.hf-share a{display:grid;place-items:center;width:32px;height:32px;border-radius:0;background:#fff;border:1px solid rgba(18,43,76,.12);color:var(--navy);font-size:14px;text-decoration:none;transition:background .18s,color .18s}
.hf-share a:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.hf-price{display:flex;align-items:baseline;gap:3px;color:var(--navy);font-weight:800;margin-top:22px}
.hf-price .cur{font-size:30px}
.hf-price .amt{font-size:clamp(42px,5vw,60px);letter-spacing:-2px;line-height:1}
.hf-pmeta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.4px;margin-top:10px}
.hf-pmeta b{color:var(--navy)}
/* Spacing owned here, not by an inline style on the form. */
.hf-cartform{margin-top:16px}

/* The price area shows a figure, it does not sell a plan. Selection is a
   hairline that strengthens — the old filled navy slab pulled more weight
   than the add-to-basket button it was meant to feed. */
.hf-bp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.hf-bp__c{position:relative;text-align:left;border-radius:0;padding:14px 16px;cursor:pointer;border:1px solid rgba(18,43,76,.16);background:#fff;transition:border-color .18s,box-shadow .18s}
.hf-bp__c:hover{border-color:rgba(18,43,76,.4)}
.hf-bp__tick{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:0;border:1px solid rgba(18,43,76,.25);display:grid;place-items:center;font-size:11px;color:transparent;transition:background .15s,border-color .15s,color .15s}
.hf-bp__l{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.hf-bp__v{font-size:24px;font-weight:800;margin-top:6px;letter-spacing:-.5px;color:var(--navy)}
.hf-bp__s{font-size:12px;font-weight:700;color:var(--green-text);margin-top:6px}
.hf-bp__c.is-on{border:1.5px solid var(--navy);box-shadow:inset 0 0 0 .5px var(--navy)}
.hf-bp__c.is-on .hf-bp__tick{background:var(--navy);border-color:var(--navy);color:#fff}
/* One pack format only — most products. The selector chrome disappears and
   what remains is a plain, confident price block: price large, the per-m²
   line small and quiet beneath it. Markup and logic stay identical. */
.hf-bp:has(.hf-bp__c:only-child){margin-top:14px}
.hf-bp__c:only-child{border:0;padding:0;background:transparent;cursor:default;box-shadow:none}
.hf-bp__c:only-child:hover{border:0}
.hf-bp__c:only-child .hf-bp__tick{display:none}
.hf-bp__c:only-child .hf-bp__l{font-size:11px}
.hf-bp__c:only-child .hf-bp__v{font-size:32px;letter-spacing:-1px;margin-top:4px}
/* Trade pricing: banner, struck retail + trade price in tiles, volume tier table */
.hf-trade-banner{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 13px;border-radius:0;background:rgba(74,213,93,.08);border:1px solid rgba(74,213,93,.3);color:var(--green-ink);font-weight:700;font-size:13px}
.hf-trade-banner i{font-size:18px;color:var(--green)}
.hf-trade-banner span{font-weight:600;opacity:.7}
.hf-bp__v--trade{line-height:1.1}
.hf-bp__v--trade .hf-trade-was{display:block;text-decoration:line-through;text-decoration-thickness:2px;opacity:.5;font-size:14px;font-weight:600;line-height:1.3;letter-spacing:0}
.hf-bp__v--trade .hf-trade-now{display:block;line-height:1}
.hf-bp__save{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;background:rgba(74,213,93,.16);color:var(--green-ink);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.hf-voltiers{margin:14px 0 0;border:1px solid rgba(18,43,76,.14);border-radius:0;overflow:hidden}
.hf-voltiers__h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 14px;background:rgba(18,43,76,.04);font-size:12.5px;font-weight:800;color:var(--navy)}
.hf-voltiers__h span{font-weight:600;font-size:11px;opacity:.65}
.hf-voltiers__row{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;font-size:13.5px;color:var(--navy);border-top:1px solid rgba(18,43,76,.08);transition:background .15s}
.hf-voltiers__row b{font-weight:800;color:var(--green-ink)}
.hf-voltiers__row.is-active{background:rgba(74,213,93,.12)}
.hf-voltiers__row .hf-voltiers__on{display:none;color:var(--green);font-weight:700;font-size:11px;margin-left:6px}
.hf-voltiers__row.is-active .hf-voltiers__on{display:inline}
/* A helpful aside, not a second banner: hairline border, ink text, no
   green fill competing with the buy button below. */
.hf-pdp-teaser{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;padding:7px 12px;border-radius:0;background:transparent;border:1px solid rgba(18,43,76,.14);color:var(--navy);font-size:12.5px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}
.hf-pdp-teaser:hover{border-color:rgba(18,43,76,.35);background:rgba(18,43,76,.03)}
.hf-pdp-teaser i:first-child{font-size:15px;color:var(--green-text)}
.hf-pdp-teaser i:last-child{font-size:13px;opacity:.7}
.hf-pdp-teaser b{font-weight:700}
/* Availability is a status line, not a badge: a small green dot carries
   the signal, the text stays ink-quiet. */
.hf-stock{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:transparent;color:var(--navy);font-size:12.5px;font-weight:600;padding:0;border-radius:0}
.hf-stock i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green-text);color:transparent;font-size:0;overflow:hidden}
/* buy row — segmented qty stepper + primary CTA, one 58px-tall line on every viewport */
.hf-buy{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:14px}
.hf-qbox{display:inline-flex;align-items:stretch;height:52px;background:#fff;border:1px solid rgba(18,43,76,.22);border-radius:0;overflow:hidden;box-shadow:none;transition:border-color .15s}
.hf-qbox:hover{border-color:rgba(18,43,76,.3)}
.hf-qbox:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,43,76,.12)}
.hf-qbox button{flex:0 0 44px!important;width:44px!important;height:auto!important;min-width:0!important;align-self:stretch!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--navy)!important;display:flex!important;align-items:center;justify-content:center;font-size:20px;font-weight:600;line-height:1;cursor:pointer;transition:background .12s,color .12s;-webkit-tap-highlight-color:transparent}
.hf-qbox button:hover{background:var(--bg-light)!important}
.hf-qbox button:active{background:#e3e9f1!important;transform:none}
.hf-qbox button:focus-visible{outline:2px solid var(--navy);outline-offset:-4px;border-radius:10px!important}
.hf-qbox button:disabled{color:rgba(18,43,76,.25)!important;cursor:default;background:transparent!important}
.hf-qbox span{flex:0 0 88px;width:88px;display:flex;align-items:center;justify-content:center;padding:0 4px;text-align:center;font-weight:700;color:var(--navy);font-size:14.5px;letter-spacing:-.2px;font-variant-numeric:tabular-nums;border-left:1px solid rgba(18,43,76,.1);border-right:1px solid rgba(18,43,76,.1);user-select:none}
/* STATIC CTA — geometry never changes: no transform, no wrap, fixed row height; the
   stepper is fixed-width too, so this button keeps the exact same size in every state. */
/* The strongest control on the page — through a deeper, surer green and
   its size, not through glow. The neon lift-off effect is gone. */
.hf-addbasket{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;background:#2f9e44;color:#fff;border:0;border-radius:0;font-size:14.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;cursor:pointer;padding:0 20px;min-width:0;box-shadow:none;transition:background .15s;-webkit-tap-highlight-color:transparent}
.hf-addbasket:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.hf-addbasket svg{flex:none}
.hf-addbasket:hover{background:#28893b;box-shadow:none}
.hf-addbasket:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.hf-addbasket:disabled{cursor:wait;opacity:.85}
/* POST-ADD STATE — the basket confirmation.
   WooCommerce's own add-to-cart.js listens on the `added_to_cart` event that
   assets/product-modal.js fires and appends a bare <a class="added_to_cart">
   next to the button that was pressed. It carries none of our classes, so it
   inherits the browser default: a purple underlined link dropped into the buy
   grid. It is hidden here; the panel below is what the customer sees instead.
   Scoped to this file, which only loads on the PDP (core.php: 'pdp' === $k). */
.hf-buy>.added_to_cart,.hf-cartform .added_to_cart,.hf-sampleform .added_to_cart,.hfv2-pcard .added_to_cart{display:none!important}
/* A status that points forward, not a third call to action: the green rule and
   tick carry the confirmation, the basket subtotal carries the weight, and
   Checkout is the wider of the two actions. Both stay smaller than the 52px
   green add button above, so the hierarchy of the buy box does not shift. */
.hf-inbasket{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 14px;margin-top:12px;padding:13px 16px;background:rgba(47,158,68,.06);border:1px solid rgba(47,158,68,.26);border-left:3px solid #2f9e44;border-radius:0;animation:hf-inbasket-in .26s cubic-bezier(.2,.7,.3,1) both}
/* display:grid would win over the hidden attribute — it needs saying twice. */
.hf-inbasket[hidden]{display:none}
@keyframes hf-inbasket-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.hf-inbasket__tick{width:28px;height:28px;border-radius:50%;background:#2f9e44;color:#fff;display:grid;place-items:center;font-size:15px}
.hf-inbasket__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.hf-inbasket__t{font-size:13.5px;font-weight:800;color:var(--navy);letter-spacing:-.1px}
.hf-inbasket__n{font-size:12px;font-weight:600;color:var(--body)}
.hf-inbasket__n:empty{display:none}
/* The subtotal arrives as WooCommerce price markup — it has to inherit ours. */
.hf-inbasket__v{font-size:13.5px;font-weight:800;color:var(--navy);letter-spacing:-.1px}
.hf-inbasket__v .amount,.hf-inbasket__v bdi,.hf-inbasket__v span{font:inherit;color:inherit}
.hf-inbasket__v small{font-size:10.5px;font-weight:600;color:var(--body);margin-left:3px}
.hf-inbasket__acts{display:flex;gap:8px}
.hf-inbasket__view,.hf-inbasket__go{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;border-radius:0;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.hf-inbasket__view{padding:0 14px;background:#fff;border:1px solid rgba(18,43,76,.3);color:var(--navy)}
.hf-inbasket__view:hover{border-color:var(--navy);background:rgba(18,43,76,.04);color:var(--navy)}
.hf-inbasket__go{padding:0 19px;background:var(--navy);border:1px solid var(--navy);color:#fff}
.hf-inbasket__go:hover{background:#0d2140;border-color:#0d2140;color:#fff}
.hf-inbasket__go i{font-size:14px}
.hf-inbasket__view:focus-visible,.hf-inbasket__go:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hf-inbasket{animation:none}}
/* Under 560px the two actions take a full-width row of their own at 44px, the
   same touch target the stepper and the sample button already use. Checkout
   keeps the wider share of it. */
@media(max-width:560px){
 .hf-inbasket{grid-template-columns:auto 1fr;padding:12px 14px}
 .hf-inbasket__acts{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.25fr;gap:8px}
 .hf-inbasket__view,.hf-inbasket__go{height:44px;padding:0 8px;font-size:11px;letter-spacing:.06em}
}
/* premium out-of-stock state: restock notify + alternatives instead of Woo's bare line.
   LIGHT theme — matches the product-title column (navy type, green accents on white). */
.hf-oos{margin-top:16px;background:#fff;border:1px solid rgba(18,43,76,.12);border-radius:20px;padding:26px 26px 22px;position:relative;overflow:hidden;box-shadow:0 18px 40px -28px rgba(16,35,61,.25)}
.hf-oos::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green),rgba(74,213,93,.15))}
.hf-oos__ey{display:inline-flex;align-items:center;gap:8px;color:var(--green-text);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.hf-oos__t{margin:12px 0 0;color:var(--navy);font-size:24px;font-weight:800;letter-spacing:-.6px}
.hf-oos__t em{font-style:italic;font-family:Georgia,serif;font-weight:600;color:var(--green-text)}
.hf-oos__d{margin:10px 0 0;color:var(--body);font-size:14px;line-height:1.65}
.hf-oos__form{display:flex;gap:9px;margin-top:18px}
.hf-oos__form input[type=email]{flex:1 1 auto;min-width:0;border:1.5px solid rgba(18,43,76,.18);background:#fff;border-radius:12px;padding:13px 15px;color:var(--navy);font:500 14px/1.2 inherit;outline:0}
.hf-oos__form input[type=email]::placeholder{color:rgba(89,97,107,.6)}
.hf-oos__form input[type=email]:focus{border-color:var(--navy)}
.hf-oos__form button{flex:none;background:linear-gradient(135deg,#57e06b,#37c34c);color:var(--green-ink);border:0;border-radius:12px;padding:13px 20px;font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 24px -8px rgba(74,213,93,.45)}
.hf-oos__form button:disabled{opacity:.6;cursor:wait}
.hf-oos__hp{position:absolute;left:-9999px;opacity:0;height:0}
.hf-oos__ok{margin-top:14px;background:rgba(74,213,93,.12);border:1px solid rgba(74,213,93,.4);color:var(--green-text);border-radius:12px;padding:12px 14px;font-size:13px;font-weight:600}
.hf-oos__alts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hf-oos__alt{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid rgba(18,43,76,.16);border-radius:999px;padding:10px 16px;color:var(--navy);font-size:12.5px;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.hf-oos__alt:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.hf-oos__alt i{color:var(--green-text)}
.hf-oos__alt:hover i{color:var(--green)}
.hf-oos__note{margin:14px 0 0;color:rgba(89,97,107,.75);font-size:11px;letter-spacing:.4px}
@media(max-width:560px){.hf-oos{padding:22px 18px 18px}.hf-oos__form{flex-direction:column}.hf-oos__form button{width:100%}}
/* The one secondary CTA: white field, navy hairline, deliberate quiet. */
.hf-samplebtn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;width:100%;height:48px;padding:0 16px;border-radius:0;border:1px solid rgba(18,43,76,.3);background:#fff;color:var(--navy);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,background .15s}
.hf-samplebtn:hover{border-color:var(--navy);background:rgba(18,43,76,.04)}
.hf-samplebtn:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* overview / spec (dark) */
.hf-ovtoggle{display:inline-flex;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px;margin:0 auto;gap:4px}
.hf-ovtoggle button{border:0;background:none;color:rgba(255,255,255,.7);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:12px 22px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.hf-ovtoggle button.on{background:linear-gradient(180deg,#dff7e2,#bff0c6);color:var(--navy)}
.hf-ovwrap{text-align:center;margin-top:18px}
.hf-ovpanel{display:none}
.hf-ovpanel.on{display:block}
.hf-ovdesc{max-width:860px;margin:24px auto 0;color:rgba(255,255,255,.82);font-size:15px;line-height:1.65;text-align:center}
.hf-spec{max-width:1000px;margin:24px auto 0}
.hf-spec__h{color:var(--green);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.16)}
.hf-spec__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px}
.hf-spec__r{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.hf-spec__r dt{color:#fff;font-weight:700;font-size:14px;margin:0}
.hf-spec__r dd{color:rgba(255,255,255,.72);font-size:14px;margin:0;text-align:right}
/* trust band (dark) */
.hf-tband{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hf-tb{display:flex;align-items:center;gap:16px}
.hf-tb__i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(74,213,93,.4);background:rgba(74,213,93,.08);color:var(--green);font-size:24px;flex:none}
.hf-tb__t{color:#fff;font-size:16px;font-weight:800;margin:0 0 3px}
.hf-tb__d{color:rgba(255,255,255,.7);font-size:13.5px;line-height:1.5;margin:0}
@media(max-width:920px){.hf-pdp-hero{grid-template-columns:1fr}.hf-ovprices,.hf-spec__grid{grid-template-columns:1fr}.hf-tband{grid-template-columns:1fr}}
@media(max-width:560px){.hf-gthumb{width:64px;height:64px}
 /* compact buy area (2026-07-15): Box + Pallet SIDE BY SIDE, tighter cards,
    smaller price so the long pallet total fits half-width; stock chip merged
    inline (small, low-footprint) instead of its own tall green row. */
 .hf-bp{grid-template-columns:1fr 1fr!important;gap:8px;margin-top:14px}
 .hf-bp__c{padding:12px;border-radius:0;border-width:1px}
 .hf-bp__tick{top:9px;right:9px;width:16px;height:16px;font-size:10px}
 .hf-bp__tag{top:-9px;left:11px;font-size:8px;letter-spacing:.5px;padding:2px 7px;border-radius:0}
 .hf-bp__l{font-size:9px;letter-spacing:.1em}
 .hf-bp__v{font-size:21px;margin-top:6px;letter-spacing:-.6px}
 .hf-bp__cov{font-size:9.5px;margin-top:4px;line-height:1.3}
 /* stock: small inline indicator, tight under the cards */
 .hf-stock{margin-top:12px;font-size:11.5px;font-weight:600;padding:0;gap:6px;border-radius:0}
 .hf-stock i{font-size:0}
 /* buy row (mobile): SAME one-line layout as desktop, just tighter — stepper segments
    narrow to 46px and the CTA flexes into the rest. 56px tall = comfy tap target. */
 .hf-buy{gap:10px}
 .hf-qbox{height:50px}
 .hf-qbox button{flex-basis:38px!important;width:38px!important}
 .hf-qbox span{flex-basis:70px;width:70px;font-size:13.5px}
 .hf-addbasket{height:50px;padding:0 12px;font-size:13.5px}
 .hf-addbasket svg{width:19px;height:19px;flex:none}
}
@media(max-width:360px){
 .hf-bp__v{font-size:19px}
 .hf-bp__c{padding:12px 10px}
}

/* pallet delivery */
.hf-pdform{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;max-width:780px}
.hf-pdin{flex:1;min-width:260px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px 20px;color:#fff;font-size:15px;font-weight:500;outline:0;transition:border-color .15s}
.hf-pdin:focus{border-color:var(--green)}
.hf-pdin::placeholder{color:rgba(255,255,255,.5)}
.hf-pdcheck{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#57e06b,#37c34c);color:var(--green-ink);border:0;border-radius:14px;padding:0 32px;font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;box-shadow:0 14px 30px -8px rgba(74,213,93,.6);transition:transform .15s,filter .15s}
.hf-pdcheck:hover{transform:translateY(-2px);filter:brightness(1.04)}
.hf-pdships{color:rgba(255,255,255,.7);font-size:13.5px;margin-top:16px}
.hf-pdships b{color:#fff}
.hf-pdres{display:none;align-items:center;gap:10px;margin-top:18px;background:rgba(74,213,93,.12);border:1px solid rgba(74,213,93,.35);border-radius:12px;padding:13px 18px;color:#fff;font-size:14px;font-weight:600}
.hf-pdres.on{display:inline-flex}
.hf-pdres i{color:var(--green);font-size:18px}
.hf-pdres b{color:var(--green)}
.hf-zlabel{color:rgba(255,255,255,.5);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:32px}
.hf-zones{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:16px}
.hf-zone{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px;transition:border-color .2s,background .2s}
.hf-zone.is-hit{border-color:var(--green);background:rgba(74,213,93,.1);box-shadow:0 14px 34px -16px rgba(74,213,93,.5)}
.hf-zone__n{color:rgba(255,255,255,.55);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.hf-zone__p{color:var(--green);font-size:26px;font-weight:800;margin:8px 0 6px;letter-spacing:-.5px}
.hf-zone__d{color:rgba(255,255,255,.65);font-size:13px}
/* final step CTA */
.hf-final{position:relative;display:flex;align-items:center;min-height:clamp(460px,58vh,580px);padding:clamp(40px,5vw,72px);overflow:hidden;background:#0a1f3a center/cover no-repeat}
.hf-final::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,17,32,.86) 0%,rgba(6,17,32,.55) 46%,rgba(6,17,32,.18) 100%)}
.hf-final__card{position:relative;z-index:2;width:min(560px,94%);background:rgba(9,21,38,.4);backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:clamp(30px,3vw,46px);box-shadow:0 32px 80px -24px rgba(0,0,0,.6)}
.hf-final__ey{display:inline-flex;align-items:center;gap:10px;color:var(--green);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.hf-final__ey::before{content:"";width:26px;height:2px;background:currentColor}
.hf-final__t{font-size:clamp(36px,5vw,62px);font-weight:800;line-height:.98;letter-spacing:-2px;margin:16px 0 16px;color:#fff}
.hf-final__t span{color:var(--green);display:block}
.hf-final__d{color:rgba(255,255,255,.88);font-size:15px;line-height:1.6;max-width:430px;margin:0 0 24px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
/* CTA pair — hero-style pill buttons, equal size, green primary + ghost secondary */
.hf-final__cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:480px}
.hf-final__add,.hf-final__sample{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:14px 20px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;cursor:pointer;font-family:inherit;transition:background .18s,box-shadow .18s,border-color .18s}
.hf-final__add{background:linear-gradient(135deg,#57e06b,#37c34c);color:var(--green-ink);border:2px solid transparent;box-shadow:0 16px 34px -10px rgba(74,213,93,.6)}
.hf-final__add:hover{box-shadow:0 20px 44px -10px rgba(74,213,93,.78)}
.hf-final__sample{background:rgba(255,255,255,.08);color:#fff;border:2px solid rgba(255,255,255,.55)}
.hf-final__sample:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.85)}
.hf-final__trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
.hf-final__trust span{display:inline-flex;align-items:center;gap:7px}
.hf-final__trust i{color:var(--green)}
/* mobile: breathe — tighter frame, full-bleed card, stacked full-width CTAs */
@media(max-width:560px){
 .hf-final{padding:16px;min-height:0}
 .hf-final__card{width:100%;padding:30px 22px 26px;border-radius:20px}
 .hf-final__t{font-size:40px;letter-spacing:-1.2px;margin:14px 0}
 .hf-final__d{font-size:14px;line-height:1.55;margin-bottom:22px}
 .hf-final__cta{grid-template-columns:1fr;max-width:none;gap:10px}
 .hf-final__add,.hf-final__sample{min-height:52px}
 .hf-final__trust{gap:8px 16px;margin-top:22px;padding-top:18px;font-size:10.5px}
}
/* sticky add bar */
.hf-sticky{font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;position:fixed;left:50%;bottom:18px;z-index:90;width:min(1180px,94vw);background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:18px;box-shadow:0 24px 60px -18px rgba(16,35,61,.5);padding:11px 14px 11px 18px;transform:translate(-50%,180%);transition:transform .34s cubic-bezier(.22,1,.36,1)}
.hf-sticky.on{transform:translate(-50%,0)}
.hf-sticky__in{display:flex;align-items:center;gap:15px;width:100%}
.hf-sticky__th{width:60px;height:60px;border-radius:13px;overflow:hidden;flex:none}
.hf-sticky__th img{width:100%;height:100%;object-fit:cover}
.hf-sticky__nm{font-weight:500;color:var(--navy);font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-stog{display:inline-flex;background:var(--bg-light);border-radius:999px;padding:4px;flex:none}
.hf-stog button{border:0;background:none;padding:9px 16px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--body);cursor:pointer;transition:background .15s,color .15s}
.hf-stog button.on{background:#fff;color:var(--navy);box-shadow:0 4px 12px rgba(16,35,61,.14)}
.hf-sticky__pr{margin-left:auto;text-align:right;line-height:1.1;flex:none}
.hf-sticky__pr b{color:var(--navy);font-size:20px;font-weight:800}
.hf-sticky__pr small{display:block;color:var(--body);font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.hf-sqbox{display:flex;align-items:center;background:#fff;border:1px solid rgba(18,43,76,.14);border-radius:12px;overflow:hidden;flex:none}
.hf-sqbox button{width:42px;height:48px;border:0;background:#fff;color:var(--navy);font-size:20px;cursor:pointer}
.hf-sqbox span{min-width:36px;text-align:center;font-weight:700;color:var(--navy)}
.hf-sticky__add{display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;border:0;border-radius:12px;padding:13px 24px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;flex:none}
.hf-sticky__add:hover{background:#0a1f3a}
@media(max-width:920px){.hf-zones{grid-template-columns:1fr 1fr}}
@media(max-width:780px){.hf-sticky__th,.hf-sticky__nm,.hf-stog,.hf-sqbox{display:none}.hf-sticky__pr{margin-left:0}.hf-sticky__add{flex:1;justify-content:center}}

.hf-ovcompact{padding:clamp(34px,4.5vw,58px) 0}
.hf-ovcompact .hfv2-center{max-width:840px}
.hf-pdwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);align-items:center}
.hf-pdh{color:#fff;font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-1px;line-height:1.08;margin:10px 0 18px}
.hf-zlist{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.hf-zrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:13px;transition:border-color .2s,background .2s}
.hf-zrow.is-hit{border-color:var(--green);background:rgba(74,213,93,.1);box-shadow:0 14px 34px -16px rgba(74,213,93,.5)}
.hf-zrow>div{display:flex;flex-direction:column;gap:3px}
.hf-zn{color:#fff;font-weight:700;font-size:14px}
.hf-zd{color:rgba(255,255,255,.55);font-size:12.5px}
.hf-zp{color:var(--green);font-weight:800;font-size:21px;letter-spacing:-.5px}
@media(max-width:900px){.hf-pdwrap{grid-template-columns:1fr;gap:30px}.hf-pdh{margin-bottom:18px}}
.hf-pwrap{width:min(1480px,96vw)}
.hf-bp__cov{font-size:12px;font-weight:600;margin-top:6px;color:var(--body)}
.hf-bp__tag{position:absolute;top:-9px;left:12px;background:var(--navy);color:#fff;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:0}
/* The running total is a receipt line under the buy row, not a second
   price display: label and meta stack left, the figure sits right at a
   size that defers to the product price above. */
.hf-sub{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 0 0;background:transparent;border:0;border-top:1px solid rgba(18,43,76,.1);border-radius:0}
.hf-sub__l{font-size:11px;font-weight:700;color:var(--body);text-transform:uppercase;letter-spacing:.08em}
.hf-sub__row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.hf-sub__v{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums}
.hf-sub__m{font-size:12px;font-weight:600;color:var(--body)}
.hf-sub__big{display:flex;align-items:baseline;gap:7px;margin-top:0;flex:none}
.hf-sub__vat{font-size:11.5px;font-weight:600;color:var(--body)}
.hf-assure{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:18px}
.hf-assure span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--body)}
.hf-assure i{color:var(--green-text);font-size:16px}
body{margin:0;background:#fff}

/* HFV2 PDP CALC + OVERVIEW SECTIONS */
/* calculator */
.hf-calc{background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:24px;box-shadow:0 24px 60px -30px rgba(16,35,61,.3);padding:clamp(26px,3vw,42px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);margin-top:40px}
.hf-calc__lbl{color:var(--green-text);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.hf-calc__lbl::before{content:"";width:24px;height:2px;background:currentColor}
.hf-calc__hint{color:var(--body);font-size:14px;margin:10px 0 0}
.hf-calc__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:12px;margin-top:20px}
.hf-field label{display:block;color:var(--green-text);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.hf-field__in{display:flex;align-items:center;gap:8px;border:1.5px solid rgba(18,43,76,.16);border-radius:13px;padding:0 16px;transition:border-color .15s}
.hf-field__in:focus-within{border-color:var(--green)}
.hf-field__in input{border:0;outline:0;font-size:20px;font-weight:700;color:var(--navy);padding:14px 0;width:100%;background:none}
.hf-field__in input::placeholder{color:#aab3c0}
.hf-field__in span{color:var(--body);font-weight:600}
.hf-calc__x{align-self:center;color:var(--green-text);font-size:18px;padding-bottom:14px}
.hf-calc__area{margin-top:20px;background:var(--bg-light);border-radius:14px;padding:6px 20px}
.hf-calc__area .r{display:flex;justify-content:space-between;align-items:center;padding:13px 0;color:var(--body);font-size:14px;font-weight:600}
.hf-calc__area .r+.r{border-top:1px solid rgba(18,43,76,.08)}
.hf-calc__area .r b{color:var(--navy);font-size:15px}
.hf-calc__rwrap{border-left:1px solid rgba(18,43,76,.08);padding-left:clamp(0px,2vw,32px)}
.hf-calc__res{border:1.5px dashed rgba(18,43,76,.18);border-radius:16px;padding:30px 26px;text-align:center;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(74,213,93,.05),rgba(18,43,76,.02))}
.hf-calc__res .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--green-text);font-size:26px;box-shadow:0 10px 24px -10px rgba(16,35,61,.2);margin-bottom:16px}
.hf-calc__res h4{color:var(--navy);font-size:18px;font-weight:800;margin:0 0 6px}
.hf-calc__res p{color:var(--body);font-size:13.5px;line-height:1.5;margin:0}
.hf-calc__mix{width:100%;display:none;text-align:left}
.hf-calc__mix.on{display:block}
.hf-calc__mixrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:12px;margin-bottom:10px;box-shadow:0 8px 20px -14px rgba(16,35,61,.18)}
.hf-calc__mixrow b{color:var(--navy);font-weight:800}
.hf-calc__mixrow span{color:var(--body);font-size:13px}
.hf-calc__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px;flex-wrap:wrap}
.hf-calc__total .l{color:var(--body);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.hf-calc__total .v{color:var(--navy);font-size:30px;font-weight:800;letter-spacing:-1px}
.hf-calc__total .v small{font-size:12px;font-weight:600;color:var(--body)}
.hf-calc__go{display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;border:0;border-radius:13px;padding:15px 26px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;opacity:.5;transition:opacity .2s,transform .15s,background .15s}
.hf-calc__go.on{opacity:1}
.hf-calc__go.on:hover{transform:translateY(-2px);background:var(--green);color:var(--green-ink)}
@media(max-width:920px){.hf-calc{grid-template-columns:1fr}.hf-calc__rwrap{border-left:0;padding-left:0;border-top:1px solid rgba(18,43,76,.08);padding-top:28px}}

/* HFV2 PDP RELATED + FINAL CTA */

@media(max-width:980px){.hfv2-carousel__arw{display:none}/* product carousel becomes a real horizontal swipe (was a broken vertical stack) */
 .hfv2-pgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:2px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.hfv2-pgrid::-webkit-scrollbar{display:none}.hfv2-pcard{flex:0 0 280px;scroll-snap-align:start}.hfv2-pcard__t{min-height:0}}
@media(max-width:760px){.hfv2-pcard{flex:0 0 82%}.hfv2-pcard__dots{display:none}}

/* spec on dark overview */
.hf-ovpanel .hf-spec th{color:#fff}.hf-ovpanel .hf-spec td{color:rgba(255,255,255,.86)}.hf-ovpanel .hf-spec th,.hf-ovpanel .hf-spec td{border-bottom-color:rgba(255,255,255,.14)}.hf-ovpanel .hf-spec table{width:100%}

/* PDP dark-section colour hardening (theme overrides h2) */
.hfv2-page .hfv2-sec--dark .hfv2-h2{color:#fff!important}.hfv2-page .hfv2-sec--dark .hfv2-eyebrow{color:var(--green)!important}.hfv2-page .hfv2-sec--dark .hfv2-lead{color:rgba(255,255,255,.85)!important}

/* PDP legibility hardening (theme h2 override + weak CTA overlay) */
.hfv2-page .hf-pdh{color:#fff!important}
.hfv2-page .hf-final__t{color:#fff!important}
.hfv2-page .hf-final__t span{color:var(--green)!important}
.hfv2-page .hf-final__d{color:#eaf1f8!important}
.hfv2-page .hf-final__card{background:linear-gradient(120deg,rgba(9,21,38,.92),rgba(9,21,38,.6))!important;backdrop-filter:blur(2px)}
.hfv2-page .hf-final__trust span{color:rgba(255,255,255,.9)!important}

/* spec table: centered + constrained */
.hfv2-page .hf-ovpanel[data-p="specification"] .hf-spec{max-width:640px;margin-left:auto;margin-right:auto}.hfv2-page .hf-ovpanel .hf-spec th{width:52%}

/* ===== PDP MOBILE FIXES ===== */
/* Gallery on small screens: taller stage, strip scrolls sideways. */
@media(max-width:640px){
.hf-gal{gap:12px}
.hf-gmain{order:1;aspect-ratio:4/3}
.hf-gal__thumbs{order:2;flex-wrap:nowrap;overflow-x:auto;gap:10px;padding-bottom:2px;scrollbar-width:none}
.hf-gal__thumbs::-webkit-scrollbar{display:none}
.hf-gal__thumbs>*,.hf-gal__thumbs img{flex:0 0 auto!important;width:66px!important;height:66px!important}
}
/* Tabs (Overview/Specification/Delivery): centered, not cut off on the right */
@media(max-width:640px){
.hf-ovtoggle{display:flex!important;max-width:100%;margin:16px auto 0!important;padding:5px;overflow-x:auto;scrollbar-width:none;justify-content:center}
.hf-ovtoggle::-webkit-scrollbar{display:none}
.hf-ovtoggle button{padding:9px 13px!important;font-size:11.5px!important;letter-spacing:.4px!important;white-space:nowrap;flex:0 0 auto}
}
/* Specification: compact table (label left, value right, tight rows) */
.hf-spec table.woocommerce-product-attributes,.hf-spec table.shop_attributes{width:100%;border-collapse:collapse;margin:0;display:table!important;table-layout:fixed!important}
.hf-spec table tbody{display:table-row-group!important}
.hf-spec table tr{display:table-row!important;border-bottom:1px solid rgba(255,255,255,.1)}
.hf-spec table th,.hf-spec table td{display:table-cell!important;padding:10px 0!important;font-size:13.5px!important;vertical-align:top;background:none!important;border:0!important}
.hf-spec table th{color:#fff!important;font-weight:700!important;text-align:left!important;width:46%;padding-right:14px!important}
.hf-spec table td{color:rgba(255,255,255,.72)!important;text-align:left!important;padding-left:6px!important}
.hf-spec table td p{margin:0!important}
@media(max-width:720px){}

/* ---- Premium specification panel (dark): hero stat cards + iconised rows + sample CTA ---- */
.hf-ovcompact{position:relative;overflow:hidden}
.hf-ovcompact::before{content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:760px;height:440px;background:radial-gradient(closest-side,rgba(74,213,93,.13),transparent 70%);pointer-events:none}
.hf-ovcompact>.hfv2-wrap{position:relative}
.hf-specx{max-width:1060px;margin:26px auto 0}
.hf-specx__hero{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.hf-specx__grid{column-count:2;column-gap:14px}
.hf-sxr{display:flex;align-items:center;gap:12px;break-inside:avoid;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:12px 16px;margin-bottom:10px;transition:background .15s,border-color .15s}
.hf-sxr:hover{background:rgba(255,255,255,.07);border-color:rgba(74,213,93,.35)}
.hf-sxr__i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(74,213,93,.1);color:var(--green);font-size:17px;flex:none}
.hf-sxr__l{color:#fff;font-weight:700;font-size:14px;flex:1 1 auto;text-align:left}
.hf-sxr__v{color:rgba(255,255,255,.78);font-size:14px;text-align:right;max-width:55%}
.hf-specx__foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:24px;padding:18px 22px;background:linear-gradient(135deg,rgba(74,213,93,.12),rgba(74,213,93,.04));border:1px solid rgba(74,213,93,.28);border-radius:16px}
.hf-sxf__msg{display:flex;align-items:center;gap:14px;text-align:left}
.hf-sxf__ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green);color:var(--green-ink);font-size:21px;flex:none}
.hf-sxf__t{color:#fff;font-weight:800;font-size:15.5px}
.hf-sxf__d{color:rgba(255,255,255,.7);font-size:13px;margin-top:2px}
.hf-sxf__actions{display:flex;gap:10px;flex-wrap:wrap}
.hf-sxf__btn{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--green-ink);border:0;border-radius:999px;padding:12px 20px;font-size:13.5px;font-weight:800;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s;font-family:inherit}
.hf-sxf__btn:hover{background:#3fca52}
.hf-sxf__btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.hf-sxf__btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
@media(max-width:920px){.hf-specx__hero{grid-template-columns:repeat(2,1fr)}.hf-specx__grid{column-count:1}}
@media(max-width:560px){.hf-specx__foot{flex-direction:column;align-items:flex-start}.hf-sxf__actions{width:100%}.hf-sxf__btn{flex:1 1 auto;justify-content:center}}
/* 2026-07-13: room calculator lives inside the overview toggle as a 4th tab; on
   mobile the toggle scrolls horizontally (4 tabs never fit) and all four panels
   render notably more compact. Swipe between panels comes from the pdp JS. */
@media(max-width:760px){
.hf-ovtoggle{display:flex;max-width:calc(100vw - 44px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start}
.hf-ovtoggle::-webkit-scrollbar{display:none}
.hf-ovtoggle button{padding:10px 15px;font-size:11.5px;letter-spacing:.6px;white-space:nowrap;flex:0 0 auto}
.hf-ovwrap{margin-top:10px}
.hf-ovprices{gap:10px;margin-top:14px;grid-template-columns:1fr 1fr}
.hf-ovprice__v{font-size:22px}
.hf-ovdesc{font-size:13.5px;line-height:1.55;margin-top:14px}
.hf-ovicons{gap:10px;margin-top:14px}
.hf-ovic{gap:10px}
.hf-ovic__i{width:38px;height:38px;font-size:18px}
.hf-ovpanel .hf-spec th,.hf-ovpanel .hf-spec td{font-size:13px;padding:8px 10px}
.hf-pdwrap{gap:18px}
.hf-pdh{font-size:20px;margin-bottom:12px}
.hf-zrow{padding:9px 12px;border-radius:11px}
.hf-zn{font-size:13px}
.hf-zd,.hf-zp{font-size:12.5px}
.hf-calc{padding:18px 14px;gap:18px;margin-top:18px;border-radius:16px}
.hf-calc__rwrap{padding-top:16px}
.hf-calc__hint{font-size:13px;margin-top:6px}
.hf-calc__area{margin-top:14px}
.hf-calc__foot{margin-top:14px}
}


/* description clamp */
.hf-ovdesc-w{position:relative}

/* buy-box delivery deep link */
.hf-buydel{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--navy,#122B4C);text-decoration:none;opacity:.85}
.hf-buydel i{color:#237a3a}
.hf-buydel:hover{opacity:1;text-decoration:underline}

/* accordion headers — desktop hidden */
.hf-ovacc{display:none;width:100%;align-items:center;gap:13px;text-align:left;appearance:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:14px 16px;margin:0 0 10px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .18s ease,background .18s ease}
.hf-ovacc__i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(74,213,93,.13);color:#53cd63;font-size:18px}
.hf-ovacc__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hf-ovacc__t{font-size:14px;font-weight:800;letter-spacing:-.1px;color:#fff}
.hf-ovacc__s{font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-ovacc__ch{flex:none;color:rgba(255,255,255,.55);font-size:17px;transition:transform .2s ease}
.hf-ovacc.is-open{border-color:rgba(74,213,93,.45);background:rgba(74,213,93,.07)}
.hf-ovacc.is-open .hf-ovacc__ch{transform:rotate(180deg)}
.hf-ovacc:focus-visible{outline:2px solid #37c34c;outline-offset:2px}

@media(min-width:761px){
	/* segmented control: equal widths, clipping impossible */
	.hfv2-page .hf-ovtoggle{display:flex;width:min(760px,100%);justify-content:stretch}
	.hfv2-page .hf-ovtoggle button{flex:1 1 0;min-width:0;white-space:nowrap;padding:12px 8px;font-size:12.5px;letter-spacing:.6px}
}

@media(max-width:760px){
	.hf-ovcompact .hfv2-h2{font-size:clamp(24px,7.2vw,32px);letter-spacing:-.5px}
	.hfv2-page .hf-ovtoggle{display:none!important}
	.hf-ovacc{display:flex}
	/* panels follow their accordion header, not the desktop tab state */
	.hfv2-page .hf-ovpanel{display:none!important}
	.hfv2-page .hf-ovpanel.is-acc-open{display:block!important;padding:8px 2px 24px;animation:hfOvIn .22s ease both}
		}
@keyframes hfOvIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hfv2-page .hf-ovpanel.is-acc-open{animation:none}.hf-ovacc__ch{transition:none}}

/* ── Tile format badge ─────────────────────────────────────────────────
   Shows the size next to a proportional outline, so the shape of a tile
   is readable at a glance on listing cards without opening the product. */
.hf-fmt{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:2px 8px 2px 6px;
 border:1px solid rgba(18,43,76,.14);border-radius:999px;background:#fff;
 color:#475467;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:none;vertical-align:middle}
.hf-fmt__shape{display:block;flex:0 0 auto;border:1.5px solid currentColor;border-radius:2px;opacity:.75}
.hf-fmt__label{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:560px){.hf-fmt{margin-left:0;margin-top:4px}
 .hfv2-pcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px}}

/* ===== Product-details section compaction (2026-07-27) =====================
   One rule replaces the old one: only information that belongs together
   shares a container. The section had grown a box around every fact — spec
   rows as cards, five delivery-zone cards, a dashed hall for an empty state.
   Everything below overrides the earlier blocks; the section reads the same
   data through the same ids, it just stops performing.
   Radius language here: 18px for the few real containers, 10px for inputs,
   pills stay round. Rows never carry their own box. */

/* --- header: a section heading, not a second hero ------------------------ */
.hf-ovcompact{padding:clamp(28px,3.5vw,46px) 0}
.hf-ovcompact::before{content:none}
.hf-ovcompact .hfv2-h2{font-size:clamp(26px,3vw,42px);letter-spacing:-.8px}
.hf-ovcompact .hfv2-lead{font-size:14.5px}
.hf-ovwrap{margin-top:14px}

/* --- tabs: same control, less body --------------------------------------- */
.hf-ovtoggle{padding:4px;gap:3px}
.hf-ovtoggle button{padding:10px 16px;font-size:12px;letter-spacing:.06em}
.hf-ovtoggle button.on{background:#cdeed3;color:var(--navy)}
@media(min-width:761px){.hfv2-page .hf-ovtoggle button{padding:10px 8px;font-size:12px}}

/* --- overview: read on the left, scan on the right ----------------------- */
.hf-ovgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:clamp(24px,3.5vw,52px);max-width:1060px;margin:20px auto 0;text-align:left;align-items:start}
.hf-ovdesc{max-width:none;margin:0;text-align:left;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.8)}
.hf-ovside{border-left:1px solid rgba(255,255,255,.12);padding-left:clamp(18px,2.4vw,32px)}
.hf-ovside__l{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#53cd63;margin-bottom:4px}

/* --- specification: one container, typographic rows ---------------------- */
.hf-specx{max-width:1060px;margin:20px auto 0;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:clamp(18px,2.4vw,28px)}
.hf-specx__hero{display:none}
.hf-specx__grid{column-gap:clamp(28px,4vw,56px)}
.hf-sxr{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.09);border-radius:0;padding:9px 2px;margin-bottom:0;gap:14px}
.hf-sxr:hover{background:none;border-color:rgba(255,255,255,.09)}
.hf-sxr__i{display:none}
.hf-sxr__l{font-size:13.5px;font-weight:600}
.hf-sxr__v{color:rgba(255,255,255,.68);font-size:13.5px}
/* a tick only where the value itself is an affirmative */
.hf-sxr.is-yes .hf-sxr__v::before{content:"\2713";color:#53cd63;font-weight:700;margin-right:7px}
.hf-sxr.is-minor .hf-sxr__l{color:rgba(255,255,255,.5);font-weight:500}
.hf-sxr.is-minor .hf-sxr__v{color:rgba(255,255,255,.45);font-size:12.5px}
.hf-specx__foot{background:none;border:0;border-top:1px solid rgba(255,255,255,.12);border-radius:0;margin-top:16px;padding:16px 2px 0}
.hf-sxf__ic{display:none}
.hf-sxf__t{font-size:14px}
.hf-sxf__d{font-size:12.5px}
.hf-sxf__btn{border-radius:10px;padding:10px 16px;font-size:12.5px;font-weight:700}
.hf-sxf__btn--ghost{border-width:1px}

/* --- delivery: a form and a price list, nothing more --------------------- */
#delivery .hf-pdwrap{align-items:start;gap:clamp(28px,4vw,60px);max-width:1060px;margin:20px auto 0}
.hf-pdh{font-size:clamp(19px,1.8vw,24px);letter-spacing:-.4px;margin:0 0 6px}
.hf-pdintro{color:rgba(255,255,255,.65);font-size:13.5px;line-height:1.55;margin:0 0 14px;max-width:44ch}
.hf-pdform{margin-top:0;gap:10px}
.hf-pdin{border-radius:10px;padding:12px 16px;font-size:14px;min-width:200px}
.hf-pdcheck{background:var(--green);border-radius:10px;padding:0 24px;box-shadow:none;transition:filter .15s}
.hf-pdcheck:hover{transform:none;filter:brightness(1.06)}
.hf-pdships{font-size:12.5px;margin-top:10px;color:rgba(255,255,255,.55)}
.hf-pdres{margin-top:12px;border-radius:10px;padding:11px 15px;font-size:13.5px}
.hf-zlabel{margin-top:0}
.hf-zlist{gap:0;margin-top:8px}
.hf-zrow{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;padding:10px 4px;transition:background .2s}
.hf-zrow:last-child{border-bottom:0}
.hf-zrow>div{flex-direction:row;align-items:baseline;gap:12px}
.hf-zn{font-size:13.5px;min-width:56px}
.hf-zd{font-size:12.5px}
.hf-zp{font-size:15px;letter-spacing:0;font-variant-numeric:tabular-nums}
.hf-zrow.is-hit{background:rgba(74,213,93,.1);box-shadow:inset 2px 0 0 var(--green);border-radius:0}

/* --- calculator: one card, two quiet halves ------------------------------ */
.hf-calc{border-radius:18px;box-shadow:0 16px 40px -28px rgba(16,35,61,.35);padding:clamp(20px,2.4vw,30px);gap:clamp(24px,3vw,44px);margin-top:20px;max-width:1060px;margin-left:auto;margin-right:auto}
.hf-calc__hint{font-size:13px;margin:8px 0 0}
.hf-calc__row{margin-top:14px}
.hf-field__in{border-width:1px;border-radius:10px;padding:0 14px}
.hf-field__in input{font-size:17px;padding:11px 0}
.hf-calc__x{padding-bottom:11px;font-size:15px}
.hf-calc__area{background:none;border-radius:0;padding:0;margin-top:14px}
.hf-calc__area .r{padding:9px 0;font-size:13.5px}
.hf-calc__area .r b{font-size:14px}
.hf-calc__area .r--req{border-top:1px solid rgba(18,43,76,.18)}
.hf-calc__area .r--req b{font-size:16px;font-weight:800}
.hf-calc__res{border:1px dashed rgba(18,43,76,.16);border-radius:12px;background:none;min-height:0;padding:18px 16px;margin-top:12px}
.hf-calc__res .ic{width:36px;height:36px;font-size:17px;box-shadow:none;background:var(--bg-light);margin-bottom:8px}
.hf-calc__res h4{font-size:15px;margin:0 0 3px}
.hf-calc__res p{font-size:12.5px}
.hf-calc__mixrow{background:none;border:0;border-bottom:1px solid rgba(18,43,76,.1);border-radius:0;box-shadow:none;padding:9px 2px;margin-bottom:0}
.hf-calc__mix .hf-calc__mixrow:last-child{border-bottom:0}
.hf-calc__foot{margin-top:14px}
.hf-calc__total .v{font-size:24px;letter-spacing:-.5px}
.hf-calc__go{border-radius:10px;padding:13px 22px}
.hf-calc__go.on:hover{transform:none}

@media(max-width:920px){
	.hf-ovgrid{grid-template-columns:1fr;gap:18px}
	.hf-ovside{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:12px}
}
@media(max-width:760px){
	.hf-ovcompact .hfv2-h2{font-size:clamp(23px,6.4vw,28px)}
	.hf-specx{padding:14px;border-radius:12px}
	.hf-calc{border-radius:12px}
	.hf-zrow{padding:10px 2px;border-radius:0}
}

/* --- calculator joins the dark surface (2026-07-27, follow-up) ------------
   The white card made this the one tab on its own background. Same
   treatment as the specification container: hairline border on navy,
   light type, green only for labels, affirmatives and the action. */
.hf-calc{background:transparent;border:1px solid rgba(255,255,255,.12);box-shadow:none}
.hf-calc__lbl{color:#53cd63}
.hf-calc__hint{color:rgba(255,255,255,.65)}
.hf-field label{color:#53cd63}
.hf-field__in{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.hf-field__in:focus-within{border-color:#53cd63}
.hf-field__in input{color:#fff}
.hf-field__in input::placeholder{color:rgba(255,255,255,.35)}
.hf-field__in span{color:rgba(255,255,255,.6)}
.hf-calc__x{color:#53cd63}
.hf-calc__area .r{color:rgba(255,255,255,.72)}
.hf-calc__area .r b{color:#fff}
.hf-calc__area .r+.r{border-top-color:rgba(255,255,255,.12)}
.hf-calc__area .r--req{border-top-color:rgba(255,255,255,.28)}
.hf-calc__rwrap{border-left-color:rgba(255,255,255,.12)}
.hf-calc__res{border-color:rgba(255,255,255,.22)}
.hf-calc__res .ic{background:rgba(255,255,255,.08);color:#53cd63}
.hf-calc__res h4{color:#fff}
.hf-calc__res p{color:rgba(255,255,255,.6)}
.hf-calc__mixrow{border-bottom-color:rgba(255,255,255,.12)}
.hf-calc__mixrow b{color:#fff}
.hf-calc__mixrow span{color:rgba(255,255,255,.7)}
.hf-calc__total .l{color:rgba(255,255,255,.55)}
.hf-calc__total .v{color:#fff}
.hf-calc__total .v small{color:rgba(255,255,255,.6)}
/* on navy, a navy button is invisible — the armed action is green */
.hf-calc__go{background:rgba(255,255,255,.12);color:#fff;opacity:.55}
.hf-calc__go.on{opacity:1;background:var(--green);color:var(--green-ink)}
.hf-calc__go.on:hover{background:#3fca52;color:var(--green-ink)}
@media(max-width:920px){.hf-calc__rwrap{border-top-color:rgba(255,255,255,.12)}}

/* ============================================================================
   PRODUKTDETAILS — Design "Premium Section Komprimierung", 02.08.2026
   Quelle: claude.ai/design, Datei "Product Details.dc.html".

   Bewusst eine geschlossene Schicht am Ende der Datei statt eines chirurgischen
   Umbaus der 156 verstreuten Altregeln (Zeilen ~654-780): die Altregeln teilen
   sich Selektoren mit Bloecken ausserhalb dieser Sektion, ein Rueckbau haette
   dort Kollateralschaden riskiert. Alles hier ist auf .hf-ovcompact begrenzt und
   in einem Stueck rueckbaubar.
   ========================================================================= */
.hf-ovcompact{
  --pd-bg:#081A2E; --pd-card:#0E2440; --pd-call:#122A45;
  --pd-acc:#48D07A; --pd-pill:#CDEBD3; --pd-pill-ink:#0A2033;
  --pd-body:#E6EDF4; --pd-mut:#93A7BC; --pd-lead:#9DB0C4; --pd-lab:#7C93AB;
  --pd-line:rgba(255,255,255,.09); --pd-edge:rgba(255,255,255,.07);
  background:var(--pd-bg);
  padding:clamp(34px,4.2vw,48px) 0 clamp(40px,4.6vw,56px);
}
/* Der Radialschimmer stammt aus der Vorgaengerfassung; das Design ist flach. */
.hf-ovcompact::before{display:none}
.hf-ovcompact .hfv2-wrap{max-width:1240px}
.hf-ovcompact .hfv2-center{max-width:none;display:flex;flex-direction:column;align-items:center;gap:12px}

/* --- Kopf ---------------------------------------------------------------- */
.hf-ovcompact .hfv2-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--pd-acc)}
.hf-ovcompact .hfv2-eyebrow::before,.hf-ovcompact .hfv2-eyebrow::after{content:"";width:44px;height:2px;background:var(--pd-acc);display:block}
.hf-ovcompact .hfv2-h2{margin:0;font-size:clamp(28px,3.2vw,38px);line-height:1.04;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.hf-ovcompact .hfv2-lead{margin:0!important;font-size:16px;line-height:1.5;color:var(--pd-lead);max-width:620px;text-wrap:pretty}

/* --- Reiter als Pillenleiste --------------------------------------------- */
.hf-ovcompact .hf-ovtoggle{
  display:inline-grid;grid-auto-flow:column;gap:4px;margin:16px auto 0!important;padding:6px;
  border-radius:999px;background:var(--pd-card);border:1px solid rgba(255,255,255,.08);box-shadow:none
}
.hf-ovcompact .hf-ovtoggle button{
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 22px;border-radius:999px;border:0;background:transparent;color:var(--pd-lead);cursor:pointer;
  transition:background .18s ease,color .18s ease
}
.hf-ovcompact .hf-ovtoggle button:hover{color:#fff}
.hf-ovcompact .hf-ovtoggle button.on{background:var(--pd-pill);color:var(--pd-pill-ink)}
.hf-ovcompact .hf-ovtoggle button:focus-visible{outline:2px solid var(--pd-pill);outline-offset:3px}
.hf-ovcompact .hf-ovwrap{margin-top:28px}

/* --- Overview ------------------------------------------------------------ */
/* Design-Stand 02.08.2026: beide Spalten gleich hoch, der letzte Block der
   linken Spalte steht unten buendig mit der Karte rechts. */
.hf-ovcompact .hf-ovgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:stretch}
.hf-ovcompact .hf-ovmain{display:flex;flex-direction:column;gap:16px}
.hf-ovcompact .hf-ovdesc-w{order:1;margin:0}
.hf-ovcompact .hf-ovdesc{margin:0;font-size:16px;line-height:1.6;color:var(--pd-body);text-wrap:pretty}
.hf-ovcompact .hf-ovdesc p+p{color:var(--pd-mut)}
/* Der Sparhinweis sitzt im Design unter dem Text, nicht darueber. */
.hf-ovcompact .hf-ovsave2{
  order:3;display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:4px;
  padding:14px 18px;border:0;border-left:3px solid var(--pd-acc);border-radius:10px;background:var(--pd-call);box-shadow:none
}

/* --- Key details: Zweispaltenraster auf Haarlinien ----------------------- */
.hf-ovcompact .hf-ovside{
  padding:20px 22px;border-radius:12px;background:var(--pd-card);border:1px solid var(--pd-edge);
  display:flex;flex-direction:column;gap:14px
}
.hf-ovcompact .hf-ovside__l{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--pd-acc)}

/* --- Specification: dreispaltige Liste ----------------------------------- */
.hf-ovcompact .hf-specx{background:none;border:0;padding:0;box-shadow:none}
.hf-ovcompact .hf-specx__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;margin:0}
.hf-ovcompact .hf-sxr{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:10px 0;background:none;border:0;border-bottom:1px solid var(--pd-line);border-radius:0;box-shadow:none
}
.hf-ovcompact .hf-sxr__l{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--pd-mut)}
.hf-ovcompact .hf-sxr__v{font-size:15px;font-weight:700;color:#fff;text-align:right}
.hf-ovcompact .hf-sxr.is-yes .hf-sxr__v{color:var(--pd-acc)}
.hf-ovcompact .hf-sxr.is-minor{opacity:.72}
.hf-ovcompact .hf-specx__foot{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:24px;padding:16px 22px;border:0;border-left:3px solid var(--pd-acc);border-radius:12px;background:var(--pd-call)
}
.hf-ovcompact .hf-sxf__ic{display:none}
.hf-ovcompact .hf-sxf__t{font-size:15px;font-weight:700;color:#fff}
.hf-ovcompact .hf-sxf__d{font-size:14px;color:var(--pd-mut)}

/* --- Delivery ------------------------------------------------------------ */
.hf-ovcompact .hf-pdwrap{margin-top:28px;align-items:start}
.hf-ovcompact .hf-pdh{font-size:clamp(20px,2vw,26px);margin:0 0 10px}
.hf-ovcompact .hf-zrow{border-radius:12px;background:rgba(255,255,255,.03);border-color:var(--pd-edge)}

/* --- Room calculator ----------------------------------------------------- */
.hf-ovcompact .hf-calc{
  margin-top:0;padding:0;gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  background:none;border:0;border-radius:0;box-shadow:none;align-items:start
}
.hf-ovcompact .hf-calc__lbl{color:var(--pd-acc);letter-spacing:.16em}
.hf-ovcompact .hf-calc__lbl::before{display:none}
.hf-ovcompact .hf-calc__hint{color:var(--pd-mut);font-size:16px;line-height:1.6;max-width:520px}
.hf-ovcompact .hf-field label{color:var(--pd-lab);font-size:12px;letter-spacing:.16em}
.hf-ovcompact .hf-field__in{background:var(--pd-card);border:1px solid rgba(255,255,255,.12);border-radius:12px}
.hf-ovcompact .hf-field__in:focus-within{border-color:var(--pd-acc)}
.hf-ovcompact .hf-field__in input{color:#fff;font-size:20px;font-weight:600}
.hf-ovcompact .hf-field__in span{color:var(--pd-lab)}
.hf-ovcompact .hf-calc__x{color:var(--pd-lab)}
.hf-ovcompact .hf-calc__area{background:var(--pd-card);border:1px solid var(--pd-edge);border-radius:12px}
.hf-ovcompact .hf-calc__area .r{color:var(--pd-mut)}
.hf-ovcompact .hf-calc__area .r b{color:#fff}
.hf-ovcompact .hf-calc__area .r+.r{border-top-color:var(--pd-line)}
.hf-ovcompact .hf-calc__rwrap{
  border:1px solid var(--pd-edge);border-radius:12px;background:var(--pd-card);padding:20px 22px
}
.hf-ovcompact .hf-calc__res{border:0;background:none;padding:0;min-height:0;text-align:left;align-items:stretch}
.hf-ovcompact .hf-calc__res .ic{display:none}
.hf-ovcompact .hf-calc__res h4{color:#fff;font-size:16px}
.hf-ovcompact .hf-calc__res p{color:var(--pd-mut)}
.hf-ovcompact .hf-calc__mixrow{background:rgba(255,255,255,.04);border-color:var(--pd-edge);color:var(--pd-body);box-shadow:none}
.hf-ovcompact .hf-calc__mixrow b{color:#fff}
.hf-ovcompact .hf-calc__mixrow span{color:var(--pd-mut)}
.hf-ovcompact .hf-calc__foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--pd-line)}
.hf-ovcompact .hf-calc__total .l{color:var(--pd-lab);letter-spacing:.16em}
.hf-ovcompact .hf-calc__total .v{color:#fff;font-size:26px;letter-spacing:-.02em}
.hf-ovcompact .hf-calc__total .v small{color:var(--pd-mut)}
/* Der Aktionsknopf hing an var(--green), das nur unter .hfv2-page definiert ist.
   Die Sektion soll unabhaengig von ihrem Vorfahren richtig aussehen. */
.hf-ovcompact .hf-calc__go{
  border:1px solid var(--pd-edge);border-radius:999px;padding:12px 22px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.08);color:#fff;opacity:.55
}
.hf-ovcompact .hf-calc__go.on{opacity:1;background:var(--pd-acc);color:#07261A;border-color:transparent}
.hf-ovcompact .hf-calc__go.on:hover{background:#8FE7AE;color:#07261A}
.hf-ovcompact .hf-sxf__btn{
  border-radius:999px;padding:11px 20px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--pd-acc);color:#07261A;border:1px solid transparent
}
.hf-ovcompact .hf-sxf__btn:hover{background:#8FE7AE;color:#07261A}
.hf-ovcompact .hf-sxf__btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.hf-ovcompact .hf-sxf__btn--ghost:hover{background:rgba(255,255,255,.10);color:#fff}

/* --- Schmalere Viewports ------------------------------------------------- */
@media(max-width:1000px){
  .hf-ovcompact .hf-specx__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
}
@media(max-width:860px){
  .hf-ovcompact .hf-ovgrid,.hf-ovcompact .hf-calc{grid-template-columns:1fr;gap:24px}
  }
@media(max-width:640px){
  .hf-ovcompact{padding:28px 0 34px}
  .hf-ovcompact .hfv2-eyebrow::before,.hf-ovcompact .hfv2-eyebrow::after{width:24px}
  .hf-ovcompact .hf-specx__grid{grid-template-columns:1fr;gap:0}
  /* Vier Pillen passen nicht in 390 px — die Leiste scrollt seitlich, wie in der
     Vorgaengerfassung. inline-grid kann das nicht, deshalb hier flex. */
  .hf-ovcompact .hf-ovtoggle{
    display:flex!important;max-width:100%;overflow-x:auto;scrollbar-width:none;
    justify-content:flex-start;-webkit-overflow-scrolling:touch
  }
  .hf-ovcompact .hf-ovtoggle::-webkit-scrollbar{display:none}
  .hf-ovcompact .hf-ovtoggle button{
    padding:9px 14px!important;font-size:11.5px!important;letter-spacing:.08em!important;
    white-space:nowrap;flex:0 0 auto
  }
    }

/* --- Overview rechts: Preis fuehrt, Key details folgen (02.08.2026) --------
   Der Quadratmeterpreis ist die Zahl, nach der auf dieser Seite gesucht wird.
   Er stand vorher nur in der Buy-Box ganz oben; in der Produktdetail-Sektion
   fehlte er, waehrend der Sparhinweis den Prozentsatz ohne Bezugsgroesse nannte.
   Key details bleiben, sind aber leiser gesetzt. */
.hf-ovcompact .hf-ovside{gap:18px}
/* NICHT .hf-ovprice nennen — die Klasse gibt es in dieser Datei schon (Zeile ~532,
   altes Preisraster) und sie setzt text-align:center. */
.hf-ovrate{display:flex;flex-direction:column;gap:12px;text-align:left}
.hf-ovpr{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.09)}
.hf-ovpr__r{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 14px;padding:12px 12px 13px;background:var(--pd-card)}
.hf-ovpr__r.is-best{background:linear-gradient(90deg,rgba(72,208,122,.10),rgba(72,208,122,0) 62%)}
.hf-ovpr__k{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pd-lab)}
.hf-ovpr__b{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;color:#07261A;background:var(--pd-acc);border-radius:999px;padding:3px 8px}
.hf-ovpr__v{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.hf-ovpr__r.is-best .hf-ovpr__v{color:var(--pd-acc)}
.hf-ovpr__v small{margin-left:5px;font-size:12px;font-weight:600;letter-spacing:0;color:var(--pd-lab)}
.hf-ovpr__s{grid-column:1;font-size:12.5px;line-height:1.45;color:var(--pd-mut)}
.hf-ovpr__a{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pd-acc);text-decoration:none}
.hf-ovpr__a:hover{color:#8FE7AE}
/* Key details untergeordnet: kleinere Werte, ruhigere Ueberschrift, Trennlinie. */
@media(max-width:640px){
  .hf-ovpr__v{font-size:21px}
  }