/* ============================================================
   home.css — native homepage section library (HOT / BRAND / COMP)
   Loaded ONLY on the front page + variant preview pages (speed).
   Static-first: pure HTML/CSS; only countdown + sticky bar use tiny JS.
   Width convention matches .wh-sec (max-width:1480px; padding:0 24px).
   Uses the --wh-* custom props from warehouse-clone.css :root.
   ============================================================ */
:root{--wh-home-maxw:1400px;}
.wh-home-native{--_pad:24px;}
.wh-home-native img{max-width:100%;height:auto;}
.wh-band{width:100%;}
.wh-band__inner{max-width:var(--wh-home-maxw);margin:0 auto;padding:0 24px;}
.wh-eyebrow{display:block;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--wh-accent);margin:0 0 10px;}
.wh-h2{font-size:clamp(26px,2.4vw,34px);line-height:1.15;font-weight:700;color:var(--wh-dark);margin:0 0 8px;}
.wh-sub{color:var(--wh-muted,#6b6b6b);font-size:16px;line-height:1.6;margin:0;}
.wh-center{text-align:center;}
.wh-center .wh-sub{max-width:640px;margin:0 auto;}

/* ---------- 1. HOT hero ---------- */
.wh-hot-hero{max-width:var(--wh-home-maxw);margin:28px auto 0;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;}
.wh-hh-eyebrow{display:block;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--wh-accent);margin:0 0 12px;}
.wh-hh-title{font-size:clamp(32px,4vw,52px);line-height:1.05;font-weight:700;color:var(--wh-dark);margin:0 0 16px;}
.wh-hh-lead{font-size:17px;line-height:1.6;color:var(--wh-muted,#5b5b5b);margin:0 0 18px;max-width:34em;}
.wh-hh-rating{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:14px;color:#5b5b5b;}
.wh-hh-stars{color:#f5a623;letter-spacing:2px;font-size:16px;}
.wh-hh-price{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;flex-wrap:wrap;}
.wh-hh-now{font-size:30px;font-weight:700;color:var(--wh-dark);}
.wh-hh-was{font-size:18px;color:#a5a5a5;text-decoration:line-through;}
.wh-hh-save{background:var(--wh-sale,#e6003a);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.03em;}
.wh-hh-bullets{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;}
.wh-hh-bullets li{position:relative;padding-left:26px;font-size:14.5px;color:#3a3a3a;text-transform:capitalize;line-height:1.4;}
.wh-hh-bullets li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--wh-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;}
.wh-hh-cta{display:flex;gap:12px;flex-wrap:wrap;}
.wh-hh-media{position:relative;display:flex;justify-content:center;align-items:center;}
.wh-hh-media img{width:100%;max-width:480px;aspect-ratio:1/1;object-fit:cover;border-radius:16px;display:block;box-shadow:0 14px 38px rgba(20,20,20,.12);}
@media(max-width:860px){.wh-hot-hero{grid-template-columns:1fr;}.wh-hh-media{order:-1;}.wh-hh-media img{aspect-ratio:16/10;}.wh-hh-bullets{grid-template-columns:1fr;}}

/* ---------- 2. trust bar ---------- */
.wh-trustbar{background:var(--wh-bg,#f6f5f3);margin:0;}
.wh-tb-inner{max-width:var(--wh-home-maxw);margin:0 auto;padding:34px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.wh-tb-item{display:flex;align-items:flex-start;gap:12px;}
.wh-tb-item svg{width:26px;height:26px;flex:0 0 26px;stroke:var(--wh-accent);fill:none;stroke-width:1.8;margin-top:2px;}
.wh-tb-item strong{display:block;font-size:14.5px;color:var(--wh-dark);font-weight:600;line-height:1.3;}
.wh-tb-item span{display:block;font-size:12.5px;color:#787878;line-height:1.45;margin-top:2px;}
@media(max-width:820px){.wh-tb-inner{grid-template-columns:1fr 1fr;}}

/* ---------- generic section shell ---------- */
.wh-hsec{max-width:var(--wh-home-maxw);margin:0 auto;padding:40px 24px;}
.wh-hsec--tint{background:var(--wh-bg,#f6f5f3);max-width:none;margin:0;padding:56px 0;}
.wh-hsec--tint > .wh-hsec-in{max-width:var(--wh-home-maxw);margin:0 auto;padding:0 24px;}
.wh-hsec-head{text-align:center;margin:0 0 32px;}

/* ---------- 3. benefits ---------- */
.wh-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.wh-bene{background:#fff;border:1px solid #ececec;border-radius:16px;padding:26px 22px;}
.wh-bene svg{width:30px;height:30px;stroke:var(--wh-accent);fill:none;stroke-width:1.7;margin:0 0 14px;}
.wh-bene h3{font-size:17px;font-weight:600;color:var(--wh-dark);margin:0 0 8px;}
.wh-bene p{font-size:13.5px;line-height:1.55;color:#6b6b6b;margin:0;}
@media(max-width:960px){.wh-benefits-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.wh-benefits-grid{grid-template-columns:1fr;}}

/* ---------- 4. usecases (image tiles) ---------- */
.wh-uc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.wh-uc{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;display:block;}
.wh-uc img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.wh-uc:hover img{transform:scale(1.05);}
.wh-uc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);}
.wh-uc span{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;font-weight:700;font-size:16px;letter-spacing:.01em;}
@media(max-width:820px){.wh-uc-grid{grid-template-columns:1fr 1fr;}}

/* ---------- 5. steps ---------- */
.wh-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.wh-step{text-align:center;padding:0 10px;}
.wh-step-n{width:46px;height:46px;border-radius:50%;background:var(--wh-accent);color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.wh-step h3{font-size:17px;font-weight:600;color:var(--wh-dark);margin:0 0 8px;}
.wh-step p{font-size:14px;line-height:1.55;color:#6b6b6b;margin:0;}
@media(max-width:720px){.wh-steps-grid{grid-template-columns:1fr;gap:22px;}}

/* ---------- 6. video strip ---------- */
.wh-video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.wh-vtile{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:9/12;}
.wh-vtile img{width:100%;height:100%;object-fit:cover;}
.wh-vtile::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22);}
.wh-vtile .wh-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;}
.wh-vtile .wh-play::before{content:"";border-left:14px solid var(--wh-dark);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px;}
.wh-vtile cap,.wh-vtile figcaption{position:absolute;left:12px;bottom:10px;z-index:2;color:#fff;font-size:12.5px;font-weight:600;text-transform:capitalize;}
@media(max-width:820px){.wh-video-grid{grid-template-columns:1fr 1fr;}}

/* ---------- 7. compare ---------- */
.wh-compare{max-width:900px;margin:0 auto;background:#fff;border:1px solid #ececec;border-radius:18px;overflow:hidden;}
.wh-cmp-head{display:grid;grid-template-columns:1fr 150px 150px;background:var(--wh-dark);color:#fff;}
.wh-cmp-head > div{padding:16px 18px;font-weight:700;font-size:14px;}
.wh-cmp-head > div:nth-child(1){opacity:.7;font-weight:500;}
.wh-cmp-head .wh-cmp-us{text-align:center;color:#fff;background:var(--wh-accent);}
.wh-cmp-head .wh-cmp-them{text-align:center;opacity:.75;}
.wh-cmp-row{display:grid;grid-template-columns:1fr 150px 150px;border-top:1px solid #f0f0f0;}
.wh-cmp-row > div{padding:14px 18px;font-size:14px;display:flex;align-items:center;}
.wh-cmp-row .wh-cmp-feat{text-transform:capitalize;color:#3a3a3a;}
.wh-cmp-row .wh-y,.wh-cmp-row .wh-n{justify-content:center;font-weight:800;}
.wh-cmp-row .wh-y{color:var(--wh-stock,#2e9c5a);}
.wh-cmp-row .wh-n{color:#d0d0d0;}
@media(max-width:600px){.wh-cmp-head,.wh-cmp-row{grid-template-columns:1fr 64px 64px;}.wh-cmp-head>div,.wh-cmp-row>div{padding:12px 10px;font-size:12.5px;}}

/* ---------- 8. text marquee ---------- */
.wh-tmarquee{background:var(--wh-dark);color:#fff;overflow:hidden;margin:0;padding:16px 0;}
.wh-tmarquee-track{display:flex;width:max-content;animation:wh-tmarquee 26s linear infinite;}
.wh-tmarquee-track span{padding:0 26px;font-weight:700;font-size:16px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;opacity:.92;}
.wh-tmarquee:hover .wh-tmarquee-track{animation-play-state:paused;}
@keyframes wh-tmarquee{to{transform:translateX(-50%);}}

/* ---------- 10. reviews ---------- */
.wh-rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.wh-rev{background:#fff;border:1px solid #ececec;border-radius:16px;padding:22px;}
.wh-rev-stars{color:#f5a623;letter-spacing:1px;font-size:15px;margin:0 0 12px;}
.wh-rev-q{font-size:14px;line-height:1.6;color:#3a3a3a;margin:0 0 14px;}
.wh-rev-who{font-size:13px;font-weight:600;color:var(--wh-dark);}
.wh-rev-who::before{content:"— ";color:#bbb;}
@media(max-width:960px){.wh-rev-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.wh-rev-grid{grid-template-columns:1fr;}}

/* ---------- 11. countdown ---------- */
.wh-countdown{background:var(--wh-dark);color:#fff;text-align:center;margin:0;padding:56px 24px;}
.wh-countdown h3{font-size:clamp(22px,2.2vw,28px);font-weight:700;margin:0 0 18px;color:#fff;}
.wh-cd-clock{display:inline-flex;gap:12px;margin:0 0 22px;}
.wh-cd-box{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 14px;min-width:62px;}
.wh-cd-box b{display:block;font-size:26px;font-weight:700;line-height:1;}
.wh-cd-box i{font-style:normal;font-size:11px;opacity:.7;text-transform:uppercase;letter-spacing:.05em;}
.wh-countdown .wh-btn{background:#fff;color:var(--wh-dark);}
.wh-countdown .wh-btn:hover{background:#f0f0f0;}

/* ---------- 12. guarantee ---------- */
.wh-guar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.wh-guar{text-align:center;padding:8px;}
.wh-guar svg{width:34px;height:34px;stroke:var(--wh-accent);fill:none;stroke-width:1.7;margin:0 0 14px;}
.wh-guar h3{font-size:16px;font-weight:600;color:var(--wh-dark);margin:0 0 7px;}
.wh-guar p{font-size:13.5px;line-height:1.55;color:#6b6b6b;margin:0;}
@media(max-width:720px){.wh-guar-grid{grid-template-columns:1fr;gap:20px;}}

/* ---------- 13. gallery ---------- */
.wh-gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.wh-gal-grid a{border-radius:12px;overflow:hidden;aspect-ratio:1/1;display:block;background:#f0f0ee;}
.wh-gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.wh-gal-grid a:hover img{transform:scale(1.06);}
@media(max-width:820px){.wh-gal-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- 14. faq (native details) ---------- */
.wh-faq{max-width:820px;margin:0 auto;}
.wh-faq details{border-bottom:1px solid #e6e6e6;}
.wh-faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 2px;position:relative;font-size:16px;font-weight:600;color:var(--wh-dark);}
.wh-faq summary::-webkit-details-marker{display:none;}
.wh-faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--wh-accent);transition:transform .2s;}
.wh-faq details[open] summary::after{content:"–";}
.wh-faq .wh-faq-a{padding:0 40px 18px 2px;font-size:14.5px;line-height:1.65;color:#5b5b5b;}

/* ---------- 15. final CTA ---------- */
.wh-cta{position:relative;margin:0;padding:clamp(56px,6vw,76px) 24px;text-align:center;color:#fff;background:linear-gradient(120deg,var(--wh-accent-d,#0a6c3d),var(--wh-accent,#12995a));}
.wh-cta h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;margin:0 0 14px;color:#fff;}
.wh-cta p{font-size:17px;line-height:1.6;max-width:600px;margin:0 auto 26px;color:rgba(255,255,255,.92);}
.wh-cta .wh-btn{background:#fff;color:var(--wh-accent-d,#0a6c3d);}

/* ---------- 17. sticky buy bar ---------- */
.wh-sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;border-top:1px solid #e4e4e4;box-shadow:0 -4px 20px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .28s ease;}
.wh-sticky-bar.is-in{transform:translateY(0);}
.wh-sticky-in{max-width:var(--wh-home-maxw);margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:16px;}
.wh-sticky-name{font-size:14px;font-weight:600;color:var(--wh-dark);flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wh-sticky-price{font-size:18px;font-weight:700;color:var(--wh-dark);}
.wh-sticky-bar .wh-btn{flex:0 0 auto;}
@media(max-width:600px){.wh-sticky-name{display:none;}}

/* categories reuse: existing [wh_collections] carousel; static fallback cards */
.wh-cat3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.wh-cat3 a{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;display:block;background:#eee;}
.wh-cat3 img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.wh-cat3 a:hover img{transform:scale(1.05);}
.wh-cat3 span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px;color:#fff;font-weight:700;font-size:18px;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);}
@media(max-width:720px){.wh-cat3{grid-template-columns:1fr;}}

/* ---------- grey base + layered surfaces (white / tint cards + full-width accent bands) ----------
   Keep the ORIGINAL grey body (#F4F6F8) as backdrop. Content cards ALTERNATE white and a soft
   brand tint (#eaf3ee) so it's never all-white; the dark marquee/countdown + gradient CTA break
   out FULL-WIDTH to cut across the card flow and add depth. Uniform 24px grey gaps, 48px card
   padding. Surface class (wh-surf-white / wh-surf-tint) is set per-section in build-hot.php. */
:root{--wh-gap:24px;}
.wh-home-native{background:transparent;}
/* contained cards */
.wh-home-native > .wh-hot-hero,
.wh-home-native > .wh-trustbar,
.wh-home-native > .wh-hsec{
  max-width:var(--wh-home-maxw);margin:0 auto var(--wh-gap);border-radius:18px;overflow:hidden;box-sizing:border-box;padding:48px 44px;
}
.wh-home-native > :first-child{margin-top:var(--wh-gap);}
/* ONLY two surface colours: white (raised card) + the page's grey (open section).
   Depth comes from the shadow lifting white cards off the grey — NOT a third colour. */
.wh-surf-white{background:#fff;box-shadow:0 2px 20px rgba(20,20,20,.055);}
.wh-surf-tint{background:transparent;box-shadow:none;}
/* trustbar + inner-wrapper padding resets */
.wh-home-native > .wh-trustbar{padding:0;}
.wh-home-native > .wh-trustbar > .wh-tb-inner{padding:32px 44px;max-width:none;}
.wh-home-native .wh-hsec-in{padding:0;max-width:none;}
/* full-width accent bands cut across the card flow (24px grey above/below) */
.wh-home-native > .wh-tmarquee,
.wh-home-native > .wh-countdown,
.wh-home-native > .wh-cta{
  width:100vw;max-width:100vw;margin:var(--wh-gap) calc(50% - 50vw);border-radius:0;box-sizing:border-box;
}
/* inner item cards flat on the surface (no card-on-card) */
.wh-home-native .wh-bene,.wh-home-native .wh-rev{border:0;background:transparent;padding:0;}
.wh-home-native .wh-benefits-grid,.wh-home-native .wh-rev-grid{gap:30px 26px;}

/* ---------- hero BANNER — FULL-WIDTH wide-screen banner (COMP homepage), bestar-style:
   edge-to-edge bg image + dark overlay + centred text/CTA. Full-bleed via 100vw + 50%-50vw. ---------- */
.wh-home-native > .wh-hero-banner{
  position:relative;width:100vw;max-width:100vw;margin:0 calc(50% - 50vw) var(--wh-gap);border-radius:0;overflow:hidden;box-sizing:border-box;
  background-size:cover;background-position:center;min-height:clamp(420px,46vw,600px);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.wh-home-native > .wh-hero-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,40,26,.42),rgba(15,40,26,.64));}
.wh-hb-inner{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:clamp(44px,6vw,84px) 24px;color:#fff;}
.wh-hb-eyebrow{display:block;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:#fff;opacity:.9;margin:0 0 16px;}
.wh-hb-title{font-size:clamp(34px,4.6vw,56px);line-height:1.06;font-weight:700;color:#fff;margin:0 0 18px;letter-spacing:-.01em;}
.wh-hb-lead{font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,.92);margin:0 auto 28px;max-width:580px;}
.wh-hb-meta{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.92);margin:0 0 24px;}
.wh-hb-meta .wh-hh-stars{color:#f5c451;letter-spacing:2px;}
.wh-hb-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.wh-home-native > .wh-hero-banner .wh-btn{background:#fff;color:var(--wh-dark);padding:14px 34px;font-size:16px;font-weight:700;}
.wh-home-native > .wh-hero-banner .wh-btn:hover{background:rgba(255,255,255,.88);}


/* ---------- BRAND/COMP shared sections: product grid, story, stats, 5-col categories ---------- */
.wh-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.wh-prod-card{background:#fff;border:1px solid #ececec;border-radius:14px;overflow:hidden;text-decoration:none;display:block;transition:box-shadow .18s,transform .18s;}
.wh-prod-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.08);transform:translateY(-3px);}
.wh-prod-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#f4f4f2;}
.wh-prod-body{padding:14px 16px 18px;}
.wh-prod-name{font-size:14.5px;font-weight:600;color:var(--wh-dark);margin:0 0 6px;line-height:1.35;}
.wh-prod-price{font-size:15px;font-weight:700;color:var(--wh-dark);}
.wh-prod-price s{color:#a5a5a5;font-weight:400;font-size:13px;margin-right:6px;}
@media(max-width:960px){.wh-prod-grid{grid-template-columns:1fr 1fr;}}
.wh-story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;}
.wh-story-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;display:block;}
.wh-story-body h2{font-size:clamp(24px,2.4vw,32px);font-weight:700;color:var(--wh-dark);margin:0 0 14px;}
.wh-story-body p{font-size:15.5px;line-height:1.7;color:#5b5b5b;margin:0 0 14px;}
@media(max-width:820px){.wh-story{grid-template-columns:1fr;}.wh-story-img{order:-1;}}
.wh-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.wh-stat b{display:block;font-size:clamp(28px,3vw,40px);font-weight:700;color:var(--wh-accent);line-height:1;}
.wh-stat span{display:block;font-size:13.5px;color:var(--wh-muted,#6b6b6b);margin-top:8px;}
@media(max-width:600px){.wh-stats-grid{grid-template-columns:1fr 1fr;gap:28px;}}
.wh-cat5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.wh-cat5 a{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;display:block;}
.wh-cat5 img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.wh-cat5 a:hover img{transform:scale(1.05);}
.wh-cat5 a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%);}
.wh-cat5 span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;color:#fff;font-weight:700;font-size:15px;}
@media(max-width:900px){.wh-cat5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.wh-cat5{grid-template-columns:1fr 1fr;}}

/* ---------- COMP: flash-sale band + category-card grid + deals ---------- */
.wh-flash{background:linear-gradient(100deg,var(--wh-accent,#2E7D4F) 0%,var(--wh-accent-d,#0a6c3d) 100%);color:#fff;margin:0;position:relative;overflow:hidden;}
.wh-flash::after{content:"";position:absolute;top:-40%;right:-4%;width:280px;height:180%;background:radial-gradient(rgba(255,255,255,.12),transparent 70%);transform:rotate(18deg);pointer-events:none;}
.wh-flash-in{position:relative;z-index:1;max-width:var(--wh-home-maxw);margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.wh-flash-tag{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);padding:6px 15px;border-radius:999px;white-space:nowrap;}
.wh-flash-tag::before{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M13 2 3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M13 2 3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E") center/contain no-repeat;}
.wh-flash-txt{font-size:15.5px;font-weight:500;flex:1 1 auto;letter-spacing:.01em;}
.wh-flash .wh-btn{background:#fff;color:var(--wh-accent-d,#0a6c3d);font-weight:700;padding:11px 26px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.wh-flash .wh-btn:hover{background:#eef7f1;}

/* ---------- USP feature cards (bestar-style, COMP homepage) ---------- */
.wh-home-native > .wh-usp-sec{max-width:var(--wh-home-maxw);margin:0 auto var(--wh-gap);padding:0 24px;box-sizing:border-box;}
.wh-usp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.wh-usp{display:flex;align-items:flex-start;gap:18px;background:#fff;border:1px solid #eef0f2;border-radius:14px;padding:24px 28px;box-shadow:0 2px 16px rgba(20,20,20,.045);}
.wh-usp svg{width:34px;height:34px;flex:0 0 34px;stroke:var(--wh-accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}
.wh-usp h3{font-size:18px;font-weight:700;color:var(--wh-accent);margin:0 0 5px;letter-spacing:-.01em;}
.wh-usp p{font-size:14px;line-height:1.55;color:#6b7178;margin:0;}
@media(max-width:720px){.wh-usp-grid{grid-template-columns:1fr;}}
.wh-catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.wh-catgrid a{background:#fff;border:1px solid #ececec;border-radius:14px;overflow:hidden;text-decoration:none;display:block;transition:box-shadow .18s,transform .18s;}
.wh-catgrid a:hover{box-shadow:0 8px 22px rgba(0,0,0,.08);transform:translateY(-2px);}
.wh-catgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#f4f4f2;}
.wh-cg-b{padding:12px 14px;}
.wh-cg-n{font-size:14px;font-weight:600;color:var(--wh-dark);}
.wh-cg-c{font-size:12px;color:var(--wh-muted,#8a9096);margin-top:2px;}
@media(max-width:900px){.wh-catgrid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.wh-catgrid{grid-template-columns:1fr 1fr;}}
.wh-deals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.wh-deal{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;display:block;text-decoration:none;}
.wh-deal img{width:100%;height:100%;object-fit:cover;}
.wh-deal::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.05));}
.wh-deal-txt{position:absolute;left:22px;top:50%;transform:translateY(-50%);z-index:2;color:#fff;}
.wh-deal-txt b{display:block;font-size:19px;font-weight:700;margin:0 0 4px;}
.wh-deal-txt span{font-size:13.5px;opacity:.92;}
@media(max-width:820px){.wh-deals-grid{grid-template-columns:1fr;}}

/* ═══════════ dynamic category modules (tabs) — comprehensive home ═══════════ */
.wh-catmod-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wh-viewall{font-size:14px;font-weight:600;color:var(--wh-accent);text-decoration:none;white-space:nowrap}
.wh-viewall:hover{text-decoration:underline}
.wh-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.wh-tab{appearance:none;border:1px solid var(--wh-line);background:#fff;color:var(--wh-dark);
  font:600 13.5px/1 inherit;padding:9px 16px;border-radius:999px;cursor:pointer;transition:all .15s;white-space:nowrap}
.wh-tab:hover{border-color:var(--wh-accent);color:var(--wh-accent)}
.wh-tab.is-active{background:var(--wh-accent);border-color:var(--wh-accent);color:#fff}
.wh-surf-tint .wh-tab{background:#fff}
.wh-tab-panel{transition:opacity .18s}
.wh-empty{grid-column:1/-1;color:#888;padding:20px 0;font-size:14px}
@media(max-width:900px){
  .wh-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .wh-tab{flex:0 0 auto}
  .wh-tab-panel{grid-template-columns:repeat(2,1fr)!important}
}

/* all product modules are white now → hairline divider between them for separation */
.wh-catmod{border-top:1px solid var(--wh-line)}