/* ============================================================================
   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:0}
.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:0;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:0}
.hfv2-hero__dot-fill{position:absolute;inset:0;display:block;border-radius:0;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:0;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:0 8px 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:0;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:0;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 8px 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:0;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:8px 8px 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:0;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:0;padding:14px 16px}
.hfv2-wstat .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:8px;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:0;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:0;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:0;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:0 8px 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:0;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:0;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:0;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:0;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:0!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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0}
 .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:0;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:8px;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:0;padding:4px;flex:none}
.hf-stog button{border:0;background:none;padding:9px 16px;border-radius:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:0;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:8px;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:0}
.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:0;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:0}
.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:0}
.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:0;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:8px;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:0;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:0;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:0;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:0;padding:12px 16px;font-size:14px;min-width:200px}
.hf-pdcheck{background:var(--green);border-radius:0;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:0;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:0;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:0;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:0;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:0;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:0}
	.hf-calc{border-radius:0}
	.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:0;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:0;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:0;background:var(--pd-call);box-shadow:none
}

/* --- Key details: Zweispaltenraster auf Haarlinien ----------------------- */
.hf-ovcompact .hf-ovside{
  padding:20px 22px;border-radius:0;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:0;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:0;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:0}
.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:0;padding:4px 14px}
/* Die Zeilen (Room area / +10% / Required) brauchen INNENraender -- die
   mobile Basisregel stellt padding:0, die Werte klebten am Kachelrahmen
   (Screenshot 31.08.2026). */
.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:0;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:0;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:0;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:0;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}
  }

/* ============================================================================
   PRODUKTDETAILS — Design "Product Details Section", 30.08.2026
   Volle Breite, zwei Spalten, kein Rahmen und keine Innenbreite. Liegt als
   eigene Schicht ueber .hf-ovcompact und ist in einem Stueck rueckbaubar.
   ========================================================================= */
.hfpd2{
  --pd-bg:#07090a; --pd-card:#0e1214; --pd-call:#111618;
  --pd-acc:#3ecf4c; --pd-acc-ink:#08260d; --pd-pill:#3ecf4c; --pd-pill-ink:#08260d;
  --pd-body:#c8d1d6; --pd-mut:#8b949a; --pd-lead:#9aa4aa; --pd-lab:#7d878d;
  --pd-line:rgba(255,255,255,.10); --pd-edge:rgba(255,255,255,.09);
  --pd-mono:ui-monospace,'IBM Plex Mono',Menlo,monospace;
  background:var(--pd-bg);padding:0;overflow:visible
}
.hfpd2::before{display:none}
.hfpd2 .hfpd2__grid{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);width:100%;background:var(--pd-bg)}
/* linke Spalte: Produktfoto, Kategorie-Chip, Lagerzeile */
.hfpd2 .hfpd2__media{position:relative;min-height:560px;display:flex;background:#0a0d0e;border-right:1px solid var(--pd-line)}
.hfpd2 .hfpd2__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hfpd2 .hfpd2__badge{position:absolute;top:22px;left:22px;z-index:2;padding:9px 14px;background:#12171a;border:1px solid var(--pd-line);color:#fff;font-family:var(--pd-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.hfpd2 .hfpd2__stock{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;padding:16px 22px;background:rgba(8,11,12,.88);color:#fff;font-size:14px;font-weight:600}
.hfpd2 .hfpd2__dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--pd-acc)}
.hfpd2 .hfpd2__stock.is-order .hfpd2__dot{background:#e0a33a}
/* rechte Spalte */
.hfpd2 .hfpd2__body{padding:56px 6vw 56px 56px;max-width:900px;text-align:left}
.hfpd2 .hfpd2__eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-family:var(--pd-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pd-acc)}
.hfpd2 .hfpd2__eyebrow::before{content:"";width:26px;height:2px;background:var(--pd-acc);flex:none}
/* Reiter: eckig, links buendig, auch auf dem Handy sichtbar */
.hfv2-page .hfpd2 .hf-ovtoggle,.hfpd2 .hf-ovtoggle{display:flex!important;grid-auto-flow:row;width:auto;max-width:none;flex-wrap:wrap;justify-content:flex-start;gap:10px;margin:0 0 26px!important;padding:0;background:none;border:0;border-radius:0;overflow:visible}
.hfpd2 .hf-ovtoggle button{flex:0 0 auto;min-height:44px;padding:13px 20px;border-radius:2px;background:#171b1f;color:#fff;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.hfpd2 .hf-ovtoggle button:hover{background:#1e2429;color:#fff}
.hfpd2 .hf-ovtoggle button.on{background:var(--pd-acc);color:var(--pd-acc-ink)}
.hfpd2 .hf-ovacc{display:none!important}
.hfv2-page .hfpd2 .hf-ovpanel{display:none!important}
.hfv2-page .hfpd2 .hf-ovpanel.on{display:block!important}
.hfpd2 .hf-ovwrap{margin-top:0}
/* Overview: Text ueber Preiskarte, eine Spalte */
.hfpd2 .hf-ovgrid{display:block;max-width:none;margin:0}
.hfpd2 .hf-ovmain{display:block}
.hfpd2 .hf-ovdesc{margin:0 0 26px;font-size:15.5px;line-height:1.68;color:var(--pd-body)}
.hfpd2 .hf-ovside{display:block;padding:0;border:0;border-radius:0;background:none}
.hfpd2 .hf-ovrate{display:block}
/* Kartenrahmen liegt auf Kopfzeile + Zeilenliste, damit der Rechner-Link
   darunter frei steht — so steht er auch im Entwurf. */
.hfpd2 .hf-ovside__l{margin:0;padding:16px 20px;background:var(--pd-card);border:1px solid var(--pd-edge);border-bottom:0;border-radius:2px 2px 0 0;font-family:var(--pd-mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pd-acc)}
.hfpd2 .hf-ovpr{gap:0;background:var(--pd-card);border:1px solid var(--pd-edge);border-top:0;border-radius:0 0 2px 2px}
.hfpd2 .hf-ovpr__r{grid-template-columns:1fr auto;align-items:center;gap:4px 18px;padding:18px 20px;background:none;border-bottom:1px solid var(--pd-edge)}
.hfpd2 .hf-ovpr__r:last-child{border-bottom:0}
.hfpd2 .hf-ovpr__r.is-best{background:rgba(62,207,76,.07)}
.hfpd2 .hf-ovpr__k{grid-column:1;grid-row:1;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;color:#fff}
.hfpd2 .hf-ovpr__r.is-best .hf-ovpr__k{color:var(--pd-acc)}
.hfpd2 .hf-ovpr__b{border-radius:2px;padding:3px 7px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.hfpd2 .hf-ovpr__s{grid-column:1;grid-row:2;font-size:12.5px;color:var(--pd-mut)}
.hfpd2 .hf-ovpr__v{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;font-size:27px}
.hfpd2 .hf-ovpr__a{margin:22px 0 0;padding-bottom:3px;border-bottom:1px solid rgba(62,207,76,.5)}
/* Specs, Delivery, Rechner: gleiche Flaeche, nur linksbuendig und ohne Kasten */
.hfpd2 .hf-specx__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.hfpd2 .hf-pdwrap,.hfpd2 .hf-calc{max-width:none;margin:0}
.hfpd2 .hf-pdh{margin-top:0}
/* Abschluss */
.hfpd2 .hfpd2__foot{margin-top:30px;padding-top:26px;border-top:1px solid var(--pd-line)}
.hfpd2 .hfpd2__still{margin:0 0 16px;font-size:14.5px;color:#fff}
.hfpd2 .hfpd2__still span{color:var(--pd-mut)}
.hfpd2 .hfpd2__cta{display:flex;gap:12px;flex-wrap:wrap}
.hfpd2 .hfpd2__btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:2px;cursor:pointer;text-decoration:none;font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.hfpd2 .hfpd2__btn--green{background:var(--pd-acc);color:var(--pd-acc-ink)}
.hfpd2 .hfpd2__btn--green:hover{background:#31b33e}
.hfpd2 .hfpd2__btn--dark{background:#171b1f;color:#fff;border:1px solid var(--pd-line)}
.hfpd2 .hfpd2__btn--dark:hover{background:#1e2429}
@media(max-width:960px){
.hfpd2 .hf-specx__grid{grid-template-columns:1fr}
}
@media(max-width:860px){
.hfpd2 .hfpd2__grid{grid-template-columns:1fr}
.hfpd2 .hfpd2__media{min-height:300px;border-right:0;border-bottom:1px solid var(--pd-line)}
.hfpd2 .hfpd2__body{padding:28px 20px 32px;max-width:none}
.hfpd2 .hfpd2__cta .hfpd2__btn{flex:1 1 100%;justify-content:center}
.hfpd2 .hf-ovpr__v{font-size:23px}
}

/* ============================================================================
   ABSCHLUSS — Design "Final CTA Section", 30.08.2026
   Flache Flaeche statt Produktfoto mit Weichzeichner. Die Karte sitzt links
   auf derselben Hoehe wie die Produktdetails darueber und traegt oben eine
   gruene Kante. Eigene Schicht, in einem Stueck rueckbaubar.
   ========================================================================= */
.hffin2{
  --fin-bg:#07090a; --fin-card:#0b0e0f; --fin-acc:#3ecf4c; --fin-acc-ink:#08260d;
  --fin-line:rgba(255,255,255,.12); --fin-mut:#8b949a;
  --fin-mono:ui-monospace,'IBM Plex Mono',Menlo,monospace;
  display:block;min-height:0;padding:0 6vw 0 56px;
  background:var(--fin-bg)!important;background-image:none!important;overflow:visible
}
.hffin2::before{display:none}
.hfv2-page .hffin2 .hf-final__card,.hffin2 .hf-final__card{
  width:min(660px,100%);margin:0;padding:30px 34px 26px;border-radius:0;
  background:var(--fin-card)!important;border:1px solid var(--fin-line);border-top:2px solid var(--fin-acc);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none
}
.hffin2 .hf-final__ey{gap:14px;font-family:var(--fin-mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--fin-acc)}
.hffin2 .hf-final__t{margin:12px 0 10px;font-size:clamp(28px,3.1vw,40px);line-height:1.04;letter-spacing:-1.2px}
.hffin2 .hf-final__t span{display:inline;color:var(--fin-acc)}
.hfv2-page .hffin2 .hf-final__d,.hffin2 .hf-final__d{margin:0 0 20px;max-width:520px;font-size:14.5px;line-height:1.56;color:#b6c0c6!important;text-shadow:none}
.hffin2 .hf-final__cta{display:flex;flex-wrap:wrap;gap:10px;max-width:none}
.hffin2 .hf-final__add,.hffin2 .hf-final__sample{
  flex:0 1 auto;min-height:48px;padding:0 22px;border-radius:2px;border:0;
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;box-shadow:none
}
.hffin2 .hf-final__add{background:var(--fin-acc);color:var(--fin-acc-ink)}
.hffin2 .hf-final__add:hover{background:#31b33e;box-shadow:none}
.hffin2 .hf-final__sample{background:#171b1f;color:#fff;border:1px solid var(--fin-line)}
.hffin2 .hf-final__sample:hover{background:#1e2429;border-color:rgba(255,255,255,.2)}
.hffin2 .hf-final__more{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding-bottom:3px;
  border-bottom:1px solid rgba(62,207,76,.5);color:var(--fin-acc);text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase
}
.hffin2 .hf-final__more:hover{color:#8fe7ae;border-bottom-color:#8fe7ae}
/* Der Link ist optisch nur 22 px hoch. Die Tippflaeche wird unsichtbar auf
   44 px gebracht, ohne die Unterlaenge zu verschieben. */
.hffin2 .hf-final__more{position:relative}
.hffin2 .hf-final__more::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.hffin2 .hf-final__trust{
  gap:6px 0;margin-top:20px;padding-top:14px;border-top:1px solid var(--fin-line);
  font-family:var(--fin-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase
}
.hfv2-page .hffin2 .hf-final__trust span,.hffin2 .hf-final__trust span{color:var(--fin-mut)!important}
.hffin2 .hf-final__trust span+span::before{content:"|";margin:0 16px;color:rgba(255,255,255,.22)}
@media(max-width:860px){
.hffin2{padding:0 20px}
.hfv2-page .hffin2 .hf-final__card,.hffin2 .hf-final__card{width:100%;padding:22px 18px 20px}
.hffin2 .hf-final__t{font-size:28px;letter-spacing:-.8px;margin:10px 0 8px}
.hffin2 .hf-final__cta{flex-direction:column}
.hffin2 .hf-final__add,.hffin2 .hf-final__sample{width:100%;justify-content:center}
.hffin2 .hf-final__trust{flex-direction:column;gap:9px}
.hffin2 .hf-final__trust span+span::before{display:none}
}

/* =====================================================================
   .hfpd2 — kompakter, lesbar, ruhiger   (30.08.2026)
   ---------------------------------------------------------------------
   In einem Stueck entfernbar.

   1. LESBARKEIT — der wichtigste Punkt. Auf einem Kundenbildschirm stand
      der Beschreibungstext dunkelblau auf der fast schwarzen Flaeche und
      war kaum zu entziffern. Die Ebene selbst setzt ihn hell
      (.hfpd2 .hf-ovdesc{color:var(--pd-body)} = #c8d1d6), also kann die
      Farbe nur von INNEN kommen: der Text ist die WooCommerce-
      Produktbeschreibung, sie laeuft durch wp_kses_post() und behaelt
      dabei die Inline-Auszeichnungen aus dem Editor -- ein dort gesetztes
      style="color:#..." schlaegt jede Stylesheet-Regel.

      Nachweisen laesst sich das nur an den Live-Inhalten; hier steht
      deshalb kein Beweis, sondern eine Absicherung: innerhalb dieser
      dunklen Flaeche gibt die Sektion die Textfarbe vor. Gegen ein
      Inline-Attribut hilft nur !important -- das ist hier kein Kniff,
      sondern die einzige Ebene, die gewinnt.

      Absichtlich NICHT erfasst: Links behalten ihr Gruen, damit sie
      erkennbar bleiben.

   2. KOMPAKTER. Innenabstaende, Bildhoehe und Preiszeilen enger. Die
      44px-Tippflaechen der Reiter und die 52px des Knopfes bleiben.

   3. RUHIGER. Der Grund der inaktiven Reiter (#171b1f) sass sehr nah an
      der Flaeche darunter; er bekommt eine Haarlinie statt mehr Helligkeit
      -- Kanten statt Kontrastsprung, wie im Rest des Systems.

   Rueckbau: diesen Block loeschen.
   ===================================================================== */

/* -- 1. Lesbarkeit ----------------------------------------------------- */
.hfv2-page .hfpd2 .hf-ovdesc,
.hfv2-page .hfpd2 .hf-ovdesc *:not(a){
	color:var(--pd-body)!important;
	background:none!important;
}
.hfv2-page .hfpd2 .hf-ovdesc a{color:var(--pd-acc)!important}

/* -- 2. Kompakter ------------------------------------------------------ */
.hfpd2 .hfpd2__body{padding:40px 48px 36px 48px}
.hfpd2 .hfpd2__media{min-height:440px}
.hfpd2 .hfpd2__eyebrow{margin:0 0 16px}
.hfv2-page .hfpd2 .hf-ovtoggle{margin:0 0 20px}
.hfpd2 .hf-ovdesc{margin:0 0 20px;font-size:15px;line-height:1.6}
.hfpd2 .hf-ovside__l{padding:13px 18px}
.hfpd2 .hf-ovpr__r{padding:14px 18px}
.hfpd2 .hf-ovpr__v{font-size:25px}
.hfpd2 .hf-ovpr__a{margin:18px 0 0}
.hfpd2 .hfpd2__foot{margin-top:22px;padding-top:20px}

/* -- 3. Ruhiger -------------------------------------------------------- */
.hfpd2 .hf-ovtoggle button{
	background:transparent;
	border:1px solid var(--pd-line);
}
.hfpd2 .hf-ovtoggle button:hover{background:#171b1f}
.hfpd2 .hf-ovtoggle button.on{
	background:var(--pd-acc);
	border-color:var(--pd-acc);
	color:var(--pd-acc-ink);
}

@media(max-width:760px){
	.hfpd2 .hfpd2__body{padding:26px 20px 30px}
	.hfpd2 .hfpd2__media{min-height:240px}
}

/* =====================================================================
   .hffin2 — Heldenbild zurueck, groesser, aufgewertet   (30.08.2026)
   ---------------------------------------------------------------------
   In einem Stueck entfernbar.

   WAS VORHER WAR. Die aeltere Generation (.hf-final, Zeile 636 f.) stand auf
   einem Produktfoto mit Verlauf darueber und war clamp(460px,58vh,580px)
   hoch. Die .hffin2-Ebene hat beides abgeschaltet:

       background:var(--fin-bg)!important;background-image:none!important
       .hffin2::before{display:none}
       min-height:0; padding:0 6vw 0 56px

   Uebrig blieb eine flache schwarze Flaeche, auf der die Karte links klebte
   und rechts daneben viel Nichts stand.

   DER WEG ZURUECK. Nicht ueber ein Inline-background-image: das
   `background-image:none!important` oben wuerde es schlagen, denn ein
   !important im Stylesheet gewinnt gegen ein Inline-style ohne. Das Markup
   uebergibt den Pfad stattdessen als --fin-hero, und hier wird er mit
   eigenem !important eingesetzt: gleiche Spezifitaet, spaeter in der Datei,
   gewinnt. Faellt diese Ebene weg, greift wieder das none und die Sektion
   sieht aus wie vorher -- der Rueckbau ist damit wirklich vollstaendig.

   LESBARKEIT ueber einem Foto. Der Verlauf ist die Bedingung dafuer, dass
   die Karte auf JEDEM Produktbild traegt, auch auf einer hellen Eiche. Er
   laeuft von links (dicht) nach rechts (offen), damit rechts das Holz
   sichtbar bleibt -- die Karte sitzt links. Zusaetzlich behaelt die Karte
   ihren deckenden Grund; ein durchscheinender Kasten waere ueber einem
   gemusterten Foto nicht verlaesslich lesbar, und Textkontrast wird hier
   nicht dem Zufall des jeweiligen Produktfotos ueberlassen.

   GROESSER. min-height zurueck, Innenabstand der Karte grosszuegiger,
   Ueberschrift eine Stufe hoeher.

   Rueckbau: diesen Block loeschen.
   ===================================================================== */

.hffin2{
	position:relative;
	min-height:clamp(420px,52vh,560px);
	display:flex;
	align-items:center;
	padding:clamp(36px,4.5vw,64px) 6vw clamp(36px,4.5vw,64px) 56px;
	overflow:hidden;
	background-image:var(--fin-hero,none)!important;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}
/* Der Verlauf. display wird zurueckgeholt — die Ebene darueber hatte ihn
   auf none gesetzt. */
.hffin2::before{
	content:"";
	display:block!important;
	position:absolute;
	inset:0;
	z-index:0;
	/* Links dicht genug fuer die Karte, rechts offen genug, dass das Holz
	   noch Holz ist. Der erste Entwurf lag bei .94/.88/.55/.30 und hat das
	   Foto praktisch zugedeckt -- dann kann man es auch weglassen. */
	background:linear-gradient(100deg,
		rgba(6,8,9,.92) 0%,
		rgba(6,8,9,.80) 34%,
		rgba(6,8,9,.40) 66%,
		rgba(6,8,9,.10) 100%);
}
/* Ohne Bild braucht es keinen Verlauf — sonst dunkelt er die flache
   Flaeche ein zweites Mal ab. */
.hffin2:not([style*="--fin-hero"])::before{display:none!important}

.hfv2-page .hffin2 .hf-final__card,.hffin2 .hf-final__card{
	position:relative;
	z-index:1;
	width:min(620px,100%);
	padding:38px 40px 34px;
}
.hffin2 .hf-final__t{
	margin:14px 0 12px;
	font-size:clamp(32px,3.6vw,46px);
}
.hfv2-page .hffin2 .hf-final__d,.hffin2 .hf-final__d{
	margin:0 0 24px;
	font-size:15px;
	line-height:1.6;
}
.hffin2 .hf-final__trust{margin-top:22px;padding-top:18px}
/* Diese Ebene soll ohne fremde Hilfe stehen. Der Unterstreichungs-Reset kommt
   live aus dem Theme; steht er dort einmal nicht mehr, waeren die Knoepfe
   unterstrichen. Eine Zeile hier, und die Sektion haengt nicht daran. */
.hffin2 .hf-final__add,
.hffin2 .hf-final__sample,
.hffin2 .hf-final__more{text-decoration:none}

@media(max-width:760px){
	.hffin2{
		min-height:0;
		display:block;
		padding:0 20px;
		background-image:none!important;
	}
	.hffin2::before{display:none!important}
	.hfv2-page .hffin2 .hf-final__card,.hffin2 .hf-final__card{
		width:100%;
		padding:26px 20px 24px;
	}
	.hffin2 .hf-final__t{font-size:29px;margin:10px 0 9px}
}

/* =====================================================================
   Produktseite: Navy, weisse Schrift, kompakt   (30.08.2026)
   ---------------------------------------------------------------------
   In einem Stueck entfernbar.

   1. NAVY STATT SCHWARZ. .hfpd2 und .hffin2 standen auf #07090a. Die Werte
      unten sind KEINE Erfindung: sie stehen bereits in dieser Datei, in der
      aelteren Generation unter .hf-ovcompact (#081A2E, #0E2440, #122A45).
      Das Navy war also schon einmal die Farbe dieser Seite.

      Nachgerechnet gegen #0a1f3a -- alle bestanden:
          weiss    #ffffff  16,54    --pd-mut  #8b949a  5,35
          --pd-acc #3ecf4c   8,06    --pd-lead #9aa4aa  6,51
      Nur --pd-lab lag mit 4,51 auf der Kante der 4,5-Schwelle; bei einem
      Wert, der auf Rundung steht, ist "bestanden" kein Ergebnis. Er geht
      auf #95a0ac = 6,22.

   2. WEISSE SCHRIFT. --pd-body war #c8d1d6 (ein helles Grau) und ist jetzt
      Weiss. Das gilt AUCH gegen die Inline-Auszeichnungen, die die
      WooCommerce-Produktbeschreibung aus dem Editor mitbringt -- auf dem
      Kundenbildschirm stand der Text dunkelblau auf Schwarz. Dagegen hilft
      nur !important; es ist hier kein Kniff, sondern die einzige Ebene, die
      gegen ein style-Attribut gewinnt.

   3. KUERZER. Die Beschreibung ist Herstellertext und laeuft ueber zehn
      Zeilen. Sie wird auf sechs geklammert, mit weichem Auslauf nach unten.
      Der VOLLE Text bleibt im Dokument -- er verschwindet nur aus der
      Ansicht, nicht aus der Seite, und Suchmaschinen wie Vorleseprogramme
      lesen ihn weiter.

      OFFEN, bewusst nicht entschieden: ein "mehr lesen"-Schalter waere die
      vollstaendige Loesung. Der gehoert aber zum Inhalt, nicht zur Optik.

   4. GLEICHE HOEHE. Die vier Reiter trugen unterschiedlich viel, also sprang
      die Sektionshoehe beim Umschalten. Der Panelbereich bekommt eine
      Mindesthoehe.

      GRENZE, die genannt werden muss: "Specs" auf die Hoehe von "Delivery"
      zu bringen hiesse, Produktdaten auszublenden. Die Tabelle wird enger
      gesetzt und kommt damit naeher heran -- gleich hoch wird sie nicht,
      und das waere auch die falsche Loesung.

   Rueckbau: diesen Block loeschen.
   ===================================================================== */

.hfpd2{
	--pd-bg:       #0a1f3a;
	--pd-card:     #0d2440;
	--pd-call:     #122a45;
	--pd-body:     #ffffff;
	--pd-lab:      #95a0ac;
	--pd-line:     rgba(255,255,255,.14);
	--pd-edge:     rgba(255,255,255,.12);
}
.hffin2{
	--fin-bg:   #0a1f3a;
	--fin-card: #0d2440;
	--fin-line: rgba(255,255,255,.16);
}
.hfpd2 .hfpd2__media{border-right-color:var(--pd-line)}
.hfpd2 .hfpd2__badge{background:#122a45}
.hfpd2 .hfpd2__stock{background:rgba(10,31,58,.90)}
/* Der Umriss-Knopf stand auf #171b1f -- ein Grau, das fuer die schwarze
   Flaeche gemacht war und im Navy als Fremdkoerper sitzt. */
.hfpd2 .hfpd2__btn--dark{background:#122a45;border-color:var(--pd-line)}
.hfpd2 .hfpd2__btn--dark:hover{background:#173453}
.hffin2 .hf-final__sample{background:#122a45}
.hffin2 .hf-final__sample:hover{background:#173453}

/* -- 2. Weisse Schrift, auch gegen Inline-Styles ----------------------- */
.hfv2-page .hfpd2 .hf-ovdesc,
.hfv2-page .hfpd2 .hf-ovdesc *:not(a){color:#fff!important;background:none!important}
/* Ueberschriften INNERHALB der Reiter: sie erbten --hfh-ink (#182033) aus
   hf-global.css. Auf Weiss war das richtig, auf Navy sind es 1,02:1 -- die
   Zeile "Delivery" waere unsichtbar gewesen. Live faerbt sie heute eine
   Regel von ausserhalb dieser Ebene weiss; darauf soll sie sich nicht
   verlassen muessen. Im Render gemessen, nicht vermutet. */
.hfv2-page .hfpd2 .hf-ovpanel :is(h2,h3,h4){color:#fff}

/* -- 3. Kuerzer: sechs Zeilen, weicher Auslauf ------------------------- */
.hfpd2 .hf-ovdesc{
	/* 2026-08-31 — WAR -webkit-line-clamp, UND DAS KONNTE NICHT WIRKEN.
	   line-clamp zaehlt Zeilen in einem -webkit-box mit INLINE-Inhalt. Die
	   Produktbeschreibung bringt aber Blockelemente mit: <h3>, mehrere <p>.
	   Auf denen klammert es Boxen statt Zeilen -- im Render gemessen blieb
	   der Block bei 185px statt bei sechs Zeilen.

	   max-height klammert unabhaengig davon, was drinsteht. 9,6em sind bei
	   1,6 Zeilenhoehe rund sechs Zeilen; der Auslauf bleibt.
	   (Der zweite Grund, warum vorher nichts geschah, steckte im Markup:
	   das <p class="hf-ovdesc"> wurde vom Parser am <h3> geschlossen, der
	   Text lag also gar nicht in diesem Element. Siehe pdp.php.) */
	max-height:9.6em;
	overflow:hidden;
	/* Der Auslauf macht sichtbar, dass da noch Text steht -- eine harte
	   Kante mitten im Satz sieht nach Fehler aus, nicht nach Absicht. */
	-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.25) 100%);
	mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.25) 100%);
}
/* Die Beschreibung kommt aus dem Editor und bringt eigene Abstaende mit --
   ein <h3> mit Standardmargin sprengt jede Klammer. */
.hfpd2 .hf-ovdesc>*{margin:0 0 8px}
.hfpd2 .hf-ovdesc>*:last-child{margin-bottom:0}
.hfpd2 .hf-ovdesc h3{font-size:15px;font-weight:700;line-height:1.4}

/* -- 4. Gleiche Hoehe, kompakter --------------------------------------- */
/* Die Mindesthoehe war zuerst auf die Hoehe des GROESSTEN Reiters gesetzt
   (Specs, 268px). Das verhinderte zwar jedes Springen, liess aber unter dem
   kurzen Overview-Text ein grosses Loch stehen -- das Gegenteil von
   "kompakter". Sie liegt jetzt knapp ueber der Overview-Hoehe: die drei
   kurzen Reiter sind damit gleich hoch und ruhig, und nur Specs waechst
   darueber hinaus. Eine Datentabelle auf die Hoehe von "Delivery" zu
   zwingen hiesse, Produktdaten auszublenden. */
.hfpd2 .hf-ovwrap{min-height:150px}
.hfpd2 .hfpd2__body{padding:34px 44px 30px 44px}
.hfpd2 .hfpd2__media{min-height:400px}
.hfv2-page .hfpd2 .hf-ovtoggle{margin:0 0 18px}
.hfpd2 .hfpd2__eyebrow{margin:0 0 14px}
.hfpd2 .hf-ovdesc{margin:0 0 18px;font-size:14.5px;line-height:1.58}

/* Spec-Tabelle enger, Haarlinien statt Abstand */
.hfpd2 .hf-sxr{padding:9px 0}
.hfpd2 .hf-sxr__l{font-size:13.5px}
.hfpd2 .hf-sxr__v{font-size:13.5px}
.hfpd2 .hf-specx__grid{gap:0 32px}

/* Preisblock ruhiger */
.hfpd2 .hf-ovside__l{padding:11px 16px;letter-spacing:.12em}
.hfpd2 .hf-ovpr__r{padding:12px 16px}
.hfpd2 .hf-ovpr__v{font-size:23px}
.hfpd2 .hf-ovpr__a{margin:16px 0 0}
.hfpd2 .hfpd2__foot{margin-top:18px;padding-top:16px}

@media(max-width:760px){
	.hfpd2 .hf-ovwrap{min-height:0}
	.hfpd2 .hfpd2__body{padding:24px 20px 28px}
	.hfpd2 .hfpd2__media{min-height:230px}
	.hfpd2 .hf-ovdesc{-webkit-line-clamp:8}
}

/* =====================================================================
   .hfpd2 — enger und ruhiger, zweiter Durchgang   (30.08.2026)
   ---------------------------------------------------------------------
   In einem Stueck entfernbar.

   Die Richtung kommt nicht aus dem Bauch: MASTER-PROMPT 2 nennt sie unter
   "Die Altoptik, die verschwindet" -- Schatten ersatzlos, HAARLINIEN statt
   Rahmen, Volltonflaechen statt Verlaeufe, Radius gegen null. Der erste
   Durchgang hat nur Abstaende zurueckgenommen; hier verschwinden die Kaesten.

   1. DER PREISBLOCK WAR EIN KASTEN IM KASTEN. Kopfzeile und Zeilenliste
      trugen je eigenen Grund (--pd-card), einen 1px-Rahmen aussen herum und
      abgerundete Ecken -- eine Karte, die auf einer Karte sitzt, die in einer
      dunklen Spalte sitzt. Uebrig bleiben die Haarlinien zwischen den Zeilen.
      Das spart eine Rahmenstaerke, zwei Innenabstaende und den Radius.

      Gerechnet, bevor der Grund wegfaellt -- die Zeilen stehen danach direkt
      auf #0a1f3a:
          weiss    #ffffff  16,54     --pd-mut  #8b949a  5,35
          --pd-acc #3ecf4c   8,06
      Die gruen hinterlegte Bestzeile behaelt ihren Ton; sie ist die einzige
      Flaeche, die hier noch eine ist, und traegt damit die Aussage allein.

   2. DIE REITER WAREN KNOEPFE. Grauer Vollton mit Radius, vier nebeneinander.
      Jetzt Umriss auf Haarlinie, nur der aktive ist gefuellt -- die Reihe
      liest sich als eine Zeile statt als vier Schaltflaechen. Die 44px
      Tippflaeche bleibt: die Hoehe geht nicht unter min-height.

   3. RHYTHMUS. Augenbraue, Reiterreihe, Text und Preisblock standen in vier
      verschiedenen Abstaenden zueinander. Sie liegen jetzt auf einer Skala
      (14 / 18 / 22), damit die Spalte eine Ordnung hat und nicht nur eng ist.

   Rueckbau: diesen Block loeschen.
   ===================================================================== */

/* -- 1. Preisblock ohne Kasten ----------------------------------------- */
.hfpd2 .hf-ovside__l{
	margin:0;
	padding:0 0 9px;
	background:none;
	border:0;
	border-bottom:1px solid var(--pd-line);
	border-radius:0;
	font-size:10.5px;
	letter-spacing:.14em;
}
.hfpd2 .hf-ovpr{
	background:none;
	border:0;
	border-radius:0;
}
.hfpd2 .hf-ovpr__r{
	padding:13px 0;
	border-bottom:1px solid var(--pd-line);
}
/* Die Bestzeile bleibt eine Flaeche — sie ist jetzt die einzige, also traegt
   sie die Aussage ohne Hilfe. Etwas Luft links und rechts, damit sie nicht
   an der Textkante klebt. */
.hfpd2 .hf-ovpr__r.is-best{
	background:rgba(62,207,76,.09);
	padding-left:14px;
	padding-right:14px;
	margin:0 -14px;
}
.hfpd2 .hf-ovpr__k{font-size:14.5px}
.hfpd2 .hf-ovpr__s{font-size:12px}
.hfpd2 .hf-ovpr__v{font-size:24px;letter-spacing:-.5px}
.hfpd2 .hf-ovpr__b{padding:2px 6px;font-size:9.5px}
.hfpd2 .hf-ovpr__a{margin:16px 0 0;font-size:11.5px;letter-spacing:.1em}

/* -- 2. Reiter als Umriss, nur der aktive gefuellt ---------------------- */
.hfpd2 .hf-ovtoggle button{
	min-height:44px;
	padding:0 16px;
	border:1px solid var(--pd-line);
	border-radius:0;
	background:none;
	font-size:11.5px;
	letter-spacing:.1em;
}
.hfpd2 .hf-ovtoggle button:hover{background:rgba(255,255,255,.06)}
.hfpd2 .hf-ovtoggle button.on{
	background:var(--pd-acc);
	border-color:var(--pd-acc);
	color:var(--pd-acc-ink);
}
.hfv2-page .hfpd2 .hf-ovtoggle{gap:8px;margin:0 0 18px}

/* -- 3. Rhythmus und Enge ---------------------------------------------- */
.hfpd2 .hfpd2__body{padding:30px 40px 26px 40px}
.hfpd2 .hfpd2__media{min-height:380px}
.hfpd2 .hfpd2__eyebrow{margin:0 0 14px}
.hfpd2 .hf-ovdesc{margin:0 0 22px;font-size:14px;line-height:1.6}
/* GLEICHE HOEHE IN JEDEM REITER.
   Eine feste Mindesthoehe war der falsche Hebel: sie ist entweder zu klein
   (dann waechst Specs darueber hinaus und die Sektion springt weiter) oder
   zu gross (dann steht unter den kurzen Reitern ein Loch). Beides war hier
   schon der Fall.

   Die vier Panels liegen jetzt uebereinander in DERSELBEN Rasterzelle. Der
   Container nimmt damit von selbst die Hoehe des groessten an und behaelt
   sie -- ohne eine Zahl, die jemand pflegen muesste, und ohne dass eine
   spaetere Textaenderung sie wieder falsch macht.

   Ausgeblendet wird ueber visibility, nicht ueber display: nur so bleibt die
   Hoehe stehen. Der verborgene Inhalt faellt trotzdem aus Tabreihenfolge und
   Vorleseprogramm heraus -- display:none waere hier falsch, visibility:hidden
   ist genau richtig.

   NUR ab 761px. Darunter ist die Sektion ein Akkordeon, und dort ist
   Aufklappen der Sinn; ein Stapel wuerde die Seite unnoetig lang machen.
   Dasselbe Verfahren wie in der Kategorie-Sektion. */
@media(min-width:761px){
	.hfpd2 .hf-ovwrap{display:grid}
	.hfv2-page .hfpd2 .hf-ovwrap>.hf-ovpanel{
		grid-area:1/1;
		display:block!important;
		visibility:hidden;
	}
	.hfv2-page .hfpd2 .hf-ovwrap>.hf-ovpanel.on{visibility:visible}
}

/* Damit die gemeinsame Hoehe niedrig BLEIBT, muss der groesste Reiter
   kleiner werden -- das ist Specs. Drei Spalten statt zwei ab 1100px: die
   21 Zeilen brauchen dann sieben statt elf Zeilenhoehen. */
@media(min-width:1100px){
	.hfpd2 .hf-specx__grid{grid-template-columns:repeat(3,minmax(0,1fr));column-count:3;gap:0 28px}
}
.hfpd2 .hfpd2__foot{margin-top:22px;padding-top:16px}
.hfpd2 .hfpd2__btn{min-height:48px;padding:0 20px;font-size:11.5px}

/* Spec-Tabelle: Haarlinien tragen die Struktur, nicht Abstand */
.hfpd2 .hf-sxr{padding:8px 0}
.hfpd2 .hf-sxr__l,.hfpd2 .hf-sxr__v{font-size:13px}

@media(max-width:760px){
	.hfpd2 .hfpd2__body{padding:22px 20px 26px}
	.hfpd2 .hfpd2__media{min-height:220px}
	.hfpd2 .hf-ovpr__r.is-best{margin:0;padding-left:12px;padding-right:12px}
}

/* =============================================================================
   PRODUKTDETAILS — Seitenrand, Specs, Delivery, Rechner  (2026-08-31, v1.11.53)
   Auf Wunsch, in fuenf Punkten. Steht am Dateiende, hinter allen frueheren
   Ebenen. Rueckbau: Block weg.
   ========================================================================== */

/* -- 1. Seitenrand -----------------------------------------------------------
   Gemessen: die Sektion hatte 0 px Rand links und rechts und lief bis an den
   Bildschirmrand, waehrend die uebrigen Sektionen auf min(1180px,92vw) sitzen.
   Dasselbe Mass hier, damit die Seiten zusammenpassen. */
.hfv2-page .hfpd2 > .hfpd2__grid,
.hfv2-page .hfpd2 > .hfv2-wrap{width:min(1180px,92vw);margin-inline:auto}
.hfv2-page .hfpd2{padding-inline:0}

/* -- 2. Der Text endet, er verblasst nicht -----------------------------------
   Die Kuerzung passiert jetzt serverseitig an einer Satzgrenze (pages/pdp.php);
   Hoehenklammer und Maske sind damit gegenstandslos und wuerden den sauberen
   Schluss wieder anschneiden. */
.hfv2-page .hfpd2 .hf-ovdesc{
  max-height:none;overflow:visible;
  -webkit-mask-image:none;mask-image:none
}
.hfv2-page .hfpd2 .hf-ovmore{margin:0 0 22px}
.hfv2-page .hfpd2 .hf-ovmore > summary{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pd-acc,#3ecf4c)
}
.hfv2-page .hfpd2 .hf-ovmore > summary::-webkit-details-marker{display:none}
.hfv2-page .hfpd2 .hf-ovmore > summary::after{content:"+";font-size:15px;line-height:1}
.hfv2-page .hfpd2 .hf-ovmore[open] > summary::after{content:"–"}
.hfv2-page .hfpd2 .hf-ovmore__b{
  margin-top:10px;padding-top:12px;border-top:1px solid var(--pd-line,rgba(255,255,255,.14));
  font-size:15px;line-height:1.65;color:var(--pd-body,#c8d1d6)
}
.hfv2-page .hfpd2 .hf-ovmore__b > *{margin:0 0 10px}
.hfv2-page .hfpd2 .hf-ovmore__b > *:last-child{margin-bottom:0}

/* -- 3. Specs: Karten statt Tabellenzeilen ----------------------------------
   Die Werte standen als nackte Zeilen mit duenner Trennlinie nebeneinander --
   auf drei Spalten verteilt las sich das wie ein Ausdruck. Jede Angabe sitzt
   jetzt in einer eigenen eingelassenen Flaeche: Bezeichnung klein und
   gedaempft darueber, Wert gross darunter. */
.hfv2-page .hfpd2 .hf-specx__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px
}
.hfv2-page .hfpd2 .hf-sxr{
  display:block;padding:11px 13px;border:0;border-radius:0;
  background:var(--pd-call,#122a45)
}
.hfv2-page .hfpd2 .hf-sxr__l{
  display:block;margin:0 0 4px;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pd-lab,#95a0ac);text-align:left
}
.hfv2-page .hfpd2 .hf-sxr__v{
  display:block;font-size:14.5px;font-weight:700;line-height:1.3;
  color:#fff;text-align:left
}
.hfv2-page .hfpd2 .hf-sxr.is-yes .hf-sxr__v{color:var(--pd-acc,#3ecf4c)}
.hfv2-page .hfpd2 .hf-sxr.is-minor{opacity:1}

/* -- 4. Delivery: volle Breite, gegliedert -----------------------------------
   Der Reiter stand in einer schmalen Spalte mit drei Absaetzen untereinander.
   Jetzt zwei Spalten ueber die volle Breite: links der Ablauf, rechts die
   Randbedingungen als eingelassene Karte. */
.hfv2-page .hfpd2 .hf-ovpanel[data-p="delivery"] .hf-pdwrap{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:18px;align-items:start;width:100%;max-width:none
}
.hfv2-page .hfpd2 .hf-pdleft{min-width:0}
.hfv2-page .hfpd2 .hf-pdintro{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--pd-body,#c8d1d6)}
.hfv2-page .hfpd2 .hf-pdintro:last-child{margin-bottom:0}
.hfv2-page .hfpd2 .hf-pdships{
  margin:0;padding:14px 16px;border:1px solid var(--pd-line,rgba(255,255,255,.14));
  background:var(--pd-call,#122a45);
  font-size:13.5px;line-height:1.6;color:var(--pd-body,#c8d1d6)
}
.hfv2-page .hfpd2 .hf-pdh{
  margin:0 0 10px;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pd-lab,#95a0ac)
}

/* -- 5. Rechner: Luft --------------------------------------------------------
   Die Felder klebten an ihren Beschriftungen und die Ergebniskarte an den
   Eingaben. Groessere Innenabstaende, klare Abstaende zwischen den Bloecken,
   und die Eingabefelder auf 16px Schriftgroesse -- darunter zoomt iOS beim
   Antippen in das Feld hinein. */
.hfv2-page .hfpd2 .hf-calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:22px;align-items:start
}
.hfv2-page .hfpd2 .hf-calc__lbl{
  display:block;margin:0 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pd-acc,#3ecf4c)
}
.hfv2-page .hfpd2 .hf-calc__hint{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--pd-mut,#8b949a)}
.hfv2-page .hfpd2 .hf-calc__row{display:flex;align-items:flex-end;gap:12px;margin:0 0 14px}
.hfv2-page .hfpd2 .hf-field{flex:1 1 0;min-width:0}
.hfv2-page .hfpd2 .hf-field > label{
  display:block;margin:0 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pd-lab,#95a0ac)
}
.hfv2-page .hfpd2 .hf-field__in{
  display:flex;align-items:center;gap:8px;padding:0 12px;min-height:52px;
  border:1px solid var(--pd-line,rgba(255,255,255,.16));background:var(--pd-call,#122a45)
}
.hfv2-page .hfpd2 .hf-field__in input{
  flex:1 1 auto;min-width:0;border:0;background:none;color:#fff;
  font-family:inherit;font-size:16px;font-weight:700;padding:0
}
.hfv2-page .hfpd2 .hf-calc__x{align-self:center;margin:0 2px;color:var(--pd-mut,#8b949a);font-size:15px}
.hfv2-page .hfpd2 .hf-calc__rwrap{
  border:1px solid var(--pd-line,rgba(255,255,255,.14));background:var(--pd-call,#122a45)
}
.hfv2-page .hfpd2 .hf-calc__res{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;
  /* KEINE border-bottom mehr: .hf-calc__res ist im heutigen Markup der
     CONTAINER (Leerzustand + #hf-mix), nicht die Ergebniszeile. Seine
     Unterkante plus die Oberkante der Summenzeile ergaben ZWEI Striche
     unter "automatically" (Screenshot 31.08.2026) -- einer bleibt. */
  font-size:14px;color:var(--pd-body,#c8d1d6)
}
.hfv2-page .hfpd2 .hf-calc__res:last-child{border-bottom:0}
.hfv2-page .hfpd2 .hf-calc__mix{
  padding:18px;border:1px solid var(--pd-line,rgba(255,255,255,.14));
  background:var(--pd-card,#0d2440)
}
.hfv2-page .hfpd2 .hf-calc__total{margin:12px 0 0;font-size:30px;font-weight:800;line-height:1.1;color:#fff}
.hfv2-page .hfpd2 .hf-calc__foot{margin-top:14px}
.hfv2-page .hfpd2 .hf-calc__go{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:50px;padding:0 18px;border-radius:0;
  border:1px solid var(--pd-line,rgba(255,255,255,.2));background:none;color:#fff;
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase
}

@media(max-width:860px){
  .hfv2-page .hfpd2 .hf-ovpanel[data-p="delivery"] .hf-pdwrap{grid-template-columns:1fr}
  .hfv2-page .hfpd2 .hf-calc{grid-template-columns:1fr;gap:16px}
  .hfv2-page .hfpd2 .hf-specx__grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
}

/* =============================================================================
   PRODUKTDETAILS KOMPAKTER  (2026-08-31, v1.11.54)

   Gemessen: die Sektion stand bei 924 px, und der Treiber war eindeutig der
   Specs-Reiter mit 620 px -- 16 Karten in nur ZWEI Spalten, also acht Reihen
   zu je 62 px. Die uebrigen Reiter lagen bei 407 (Overview), 335 (Rechner)
   und 266 (Delivery).

   Schmalere Mindestbreite laesst vier Spalten zu; damit werden aus acht
   Reihen vier. Dazu flachere Karten und weniger Polster im ganzen Block.
   Steht am Dateiende, hinter der Ebene von 1.11.53.
   ========================================================================== */

/* Specs: Bezeichnung und Wert auf EINER Zeile.
   Der erste Versuch verschmaelerte nur die Spalten -- gemessen wurden die
   Karten dadurch HOEHER statt niedriger (62 -> 87 px), weil lange Werte wie
   "American Black Walnut" oder "14mm x 150mm x 400-1400mm" umbrechen. Zwei
   Zeilen je Angabe sind der Kostenpunkt, nicht die Spaltenzahl. Eine Zeile
   je Angabe, Bezeichnung links gedaempft, Wert rechts. */
.hfv2-page .hfpd2 .hf-specx__grid{
  /* 255px, nicht 300: gemessen ist das Raster 581 px breit bei 1440 und
     538 bei 1200. Mit 300 passte nur EINE Spalte hinein und die 16 Zeilen
     standen untereinander -- 624 px. Mit 255 sind es zwei Spalten und acht
     Zeilen. Unter rund 530 px faellt es von selbst auf eine Spalte zurueck. */
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:0 22px
}
.hfv2-page .hfpd2 .hf-sxr{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;background:none;
  border-bottom:1px solid var(--pd-line,rgba(255,255,255,.12))
}
.hfv2-page .hfpd2 .hf-sxr__l{
  margin:0;flex:0 1 auto;min-width:0;
  font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--pd-lab,#95a0ac)
}
.hfv2-page .hfpd2 .hf-sxr__v{
  flex:0 1 auto;min-width:0;text-align:right;
  font-size:13.5px;font-weight:700;line-height:1.3
}

/* Overview: der zweite Treiber. Nur Abstaende, kein Text. */
.hfv2-page .hfpd2 .hf-ovdesc{margin:0 0 14px;font-size:14.5px;line-height:1.6}
.hfv2-page .hfpd2 .hf-ovmore{margin:0 0 14px}
.hfv2-page .hfpd2 .hf-ovmore > summary{min-height:38px;font-size:11.5px}
.hfv2-page .hfpd2 .hf-ovmore__b{margin-top:8px;padding-top:10px;font-size:14px;line-height:1.6}

/* Delivery und Rechner: dieselbe Straffung, damit nichts aus der Reihe faellt */
.hfv2-page .hfpd2 .hf-pdintro{margin:0 0 10px;font-size:14px;line-height:1.6}
.hfv2-page .hfpd2 .hf-pdships{padding:12px 14px;font-size:13px}
.hfv2-page .hfpd2 .hf-calc{gap:18px}
.hfv2-page .hfpd2 .hf-calc__hint{margin:0 0 12px;font-size:13.5px}
.hfv2-page .hfpd2 .hf-calc__row{gap:10px;margin:0 0 12px}
.hfv2-page .hfpd2 .hf-field__in{min-height:48px;padding:0 11px}
.hfv2-page .hfpd2 .hf-calc__res{padding:10px 12px;font-size:13.5px}
.hfv2-page .hfpd2 .hf-calc__mix{padding:15px}
.hfv2-page .hfpd2 .hf-calc__total{margin:10px 0 0;font-size:26px}
.hfv2-page .hfpd2 .hf-calc__go{min-height:46px}

/* Die Reiterleiste und der Kopf duerfen ebenfalls enger stehen. */
.hfv2-page .hfpd2 .hf-ovtoggle{margin-bottom:14px;gap:6px}
.hfv2-page .hfpd2 .hf-ovtoggle button{min-height:44px;padding:11px 14px;font-size:11.5px}

@media(max-width:860px){
  .hfv2-page .hfpd2 .hf-specx__grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:7px}
}

/* =============================================================================
   PRODUKTDETAILS: RAHMEN OBEN/UNTEN UND FEINSCHLIFF  (2026-08-31, v1.11.55)

   Gemessen: .hfpd2 hatte padding:0, Raster, Bildspalte und <img> begannen
   alle bei top=0 -- das Bild stiess an die Kante der Sektion, waehrend die
   rechte Spalte erst bei 62 px anfing. Das las sich unruhig. Jetzt liegt ein
   navyfarbener Streifen oben UND unten, wie bei den uebrigen Sektionen.
   ========================================================================== */
.hfv2-page .hfpd2{padding-block:clamp(20px,2.4vw,36px)}

/* -- Specs: Trennlinie zwischen den Spalten, ruhigere Zeilen ---------------- */
.hfv2-page .hfpd2 .hf-specx__grid{position:relative}
.hfv2-page .hfpd2 .hf-sxr{transition:background-color .18s ease}
.hfv2-page .hfpd2 .hf-sxr:hover{background:rgba(255,255,255,.035)}
/* Die letzte Zeile jeder Spalte traegt keinen Strich mehr -- sonst haengt
   unten eine Linie ohne Inhalt darunter. */
.hfv2-page .hfpd2 .hf-sxr:last-child,
.hfv2-page .hfpd2 .hf-sxr:nth-last-child(2){border-bottom:0}
.hfv2-page .hfpd2 .hf-sxr__v{letter-spacing:-.1px}

/* -- Delivery: Gliederung statt Absatzfolge --------------------------------- */
.hfv2-page .hfpd2 .hf-ovpanel[data-p="delivery"] .hf-pdh{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pd-acc,#3ecf4c)
}
.hfv2-page .hfpd2 .hf-ovpanel[data-p="delivery"] .hf-pdh::before{
  content:"";width:26px;height:2px;background:var(--pd-acc,#3ecf4c);flex:none
}
/* Der erste Absatz traegt die Kernaussage und darf groesser stehen. */
.hfv2-page .hfpd2 .hf-pdleft .hf-pdintro:first-of-type{
  font-size:16px;line-height:1.6;color:#fff
}
.hfv2-page .hfpd2 .hf-pdleft .hf-pdintro:first-of-type strong{color:var(--pd-acc,#3ecf4c)}
/* Die Randbedingungen als eingelassene Karte mit gruener Kante links. */
.hfv2-page .hfpd2 .hf-pdships{
  border:0;border-left:2px solid var(--pd-acc,#3ecf4c);
  background:var(--pd-call,#122a45);padding:13px 15px
}
/* Der Verweis liest sich als Ziel, nicht als Fliesstext. */
.hfv2-page .hfpd2 .hf-ovpanel[data-p="delivery"] a{
  display:inline-flex;align-items:center;gap:8px;min-height:38px;
  font-weight:700;text-decoration:none;
  border-bottom:1px solid currentColor
}

/* -- Rechner: klarere Rangfolge -------------------------------------------- */
.hfv2-page .hfpd2 .hf-calc__lbl{
  display:flex;align-items:center;gap:10px
}
.hfv2-page .hfpd2 .hf-calc__lbl::before{
  content:"";width:26px;height:2px;background:currentColor;flex:none
}
/* Die Ergebniszeilen: die letzte ist das Ergebnis und traegt mehr Gewicht. */
.hfv2-page .hfpd2 .hf-calc__res:last-child{
  background:rgba(255,255,255,.04);font-weight:700;color:#fff
}
.hfv2-page .hfpd2 .hf-calc__mix{
  border-color:var(--pd-acc,#3ecf4c);
  box-shadow:inset 3px 0 0 0 var(--pd-acc,#3ecf4c)
}
.hfv2-page .hfpd2 .hf-calc__total{letter-spacing:-1px}
.hfv2-page .hfpd2 .hf-calc__go:hover{
  border-color:var(--pd-acc,#3ecf4c);color:var(--pd-acc,#3ecf4c)
}
/* Eingabefelder: die Fokusmarke muss sichtbar sein, sonst tastet man blind.
   3:1 gegen die Feldflaeche ist die Schwelle aus WCAG 1.4.11. */
.hfv2-page .hfpd2 .hf-field__in:focus-within{
  border-color:var(--pd-acc,#3ecf4c);
  box-shadow:0 0 0 1px var(--pd-acc,#3ecf4c)
}

/* Delivery wirklich ueber die volle Breite  (2026-08-31, v1.11.55)
   Der Zweispalter lag auf .hf-pdwrap -- im Markup steckt aber der GESAMTE
   Inhalt in .hf-pdleft, die zweite Spalte blieb also leer und der Text stand
   in der linken Haelfte. Nachgesehen im gerenderten Markup, nicht vermutet.
   Jetzt ist .hf-pdleft selbst das Raster: Ueberschrift ueber beide Spalten,
   die Kernaussage links, die Randbedingungen und der Verweis rechts. */
.hfv2-page .hfpd2 .hf-ovpanel[data-p="delivery"] .hf-pdwrap{
  display:block;width:100%;max-width:none
}
.hfv2-page .hfpd2 .hf-pdleft{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:0 26px;align-items:start;width:100%
}
.hfv2-page .hfpd2 .hf-pdleft > .hf-pdh{grid-column:1/-1}
.hfv2-page .hfpd2 .hf-pdleft > .hf-pdintro:first-of-type{grid-column:1;margin:0}
.hfv2-page .hfpd2 .hf-pdleft > .hf-pdships{grid-column:2;grid-row:2;margin:0}
/* Der Verweis steht unter der Kernaussage, nicht unter der Karte. */
.hfv2-page .hfpd2 .hf-pdleft > .hf-pdintro:last-of-type{grid-column:1;margin:14px 0 0!important}
@media(max-width:860px){
  .hfv2-page .hfpd2 .hf-pdleft{grid-template-columns:1fr;gap:14px 0}
  .hfv2-page .hfpd2 .hf-pdleft > .hf-pdships{grid-column:1;grid-row:auto}
  .hfv2-page .hfpd2 .hf-pdleft > .hf-pdintro:last-of-type{margin:0!important}
}