/* ============================================================
   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,#E6CC00),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,#E6CC00);}

/* ---------- 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 (#FFF7CC) 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:0;}
/* 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,#FFE000) 0%,var(--wh-accent-d,#E6CC00) 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,#E6CC00);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:#FFF7CC;}

/* ---------- 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}
}

/* ===== WHHERO2:新首页大 banner(桌面+mobile) ===== */
.wh-hero2{position:relative;width:100vw;margin:0 calc(50% - 50vw) var(--wh-gap,24px);min-height:560px;display:flex;align-items:center;background-size:cover;background-position:center 40%;overflow:hidden}
.wh-hero2::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(38,4,32,.92) 0%,rgba(17,17,17,.78) 38%,rgba(255,224,0,.28) 68%,rgba(0,0,0,.05) 100%)}
.wh-hero2-in{position:relative;z-index:1;max-width:1400px;width:100%;margin:0 auto;padding:64px 32px;color:#fff}
.wh-hero2-eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FFF0A8;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);padding:7px 14px;border-radius:999px;margin-bottom:20px}
.wh-hero2-title{font-family:'Space Grotesk',Inter,sans-serif;font-weight:800;font-size:clamp(34px,4.6vw,60px);line-height:1.06;letter-spacing:-.02em;color:#fff;margin:0 0 16px;max-width:640px}
.wh-hero2-sub{font-size:clamp(15px,1.4vw,19px);line-height:1.55;color:rgba(255,255,255,.88);margin:0 0 28px;max-width:520px}
.wh-hero2-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.wh-hero2-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 30px;border-radius:10px;background:#fff;color:var(--wh-accent);font-weight:700;font-size:15.5px;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.28);transition:.15s}
.wh-hero2-btn:hover{transform:translateY(-2px);color:var(--wh-accent-d)}
.wh-hero2-btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);box-shadow:none}
.wh-hero2-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.wh-hero2-chips{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.92)}
@media(max-width:768px){
  .wh-hero2{min-height:420px}
  .wh-hero2::before{background:linear-gradient(160deg,rgba(38,4,32,.94) 0%,rgba(17,17,17,.82) 55%,rgba(255,224,0,.5) 100%)}
  .wh-hero2-in{padding:44px 20px}
  .wh-hero2-title{font-size:31px}
  .wh-hero2-sub{font-size:15px;margin-bottom:22px}
  .wh-hero2-cta{flex-direction:column;gap:10px}
  .wh-hero2-btn{width:100%;padding:14px 20px}
  .wh-hero2-chips{gap:12px;font-size:12.5px}
}
/* WHHOMEMOD:主页产品模块——tab 可见、全白、紧凑、卡对齐 shop */
.wh-catmod{background:#fff!important;padding:26px 30px 22px!important;margin-bottom:14px!important}
.wh-catmod-head{margin-bottom:10px!important}
.wh-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px!important}
.wh-tab{background:#fff!important;color:#3a3f45!important;border:1px solid #d9dce0!important;border-radius:999px!important;padding:7px 16px!important;font-size:13px!important;font-weight:600!important;cursor:pointer;line-height:1.2!important;transition:.12s}
.wh-tab:hover{border-color:var(--wh-accent)!important;color:var(--wh-accent)!important}
.wh-tab.is-active{background:var(--wh-accent)!important;color:#fff!important;border-color:var(--wh-accent)!important}
.wh-prod-grid{gap:12px!important}
.wh-prod-card{border:1px solid #e5e7eb!important;border-radius:10px!important;background:#fff;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:.15s}
.wh-prod-card:hover{border-color:transparent!important;box-shadow:0 10px 26px rgba(0,0,0,.12);transform:translateY(-2px)}
.wh-prod-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.wh-prod-body{padding:10px 12px 12px}
.wh-prod-name{font-size:13.5px;line-height:1.35;color:#1c1c1c;font-weight:500;min-height:36px}
.wh-prod-price{margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wh-prod-price del{color:#9aa0a6;font-weight:400;font-size:12.5px}
.wh-prod-price ins{color:#ee0000;font-weight:700;font-size:15px;text-decoration:none}
.wh-hsave{background:#ee0000;color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px}
.wh-prod-card .wh-loop-stock{margin-top:6px;font-size:12px;color:#1f8a3b;display:flex;align-items:center;gap:6px}
.wh-prod-card .wh-dot{width:7px;height:7px;border-radius:50%;background:#2fae57;display:inline-block}
.wh-prod-card .wh-oos{color:#c0392b}.wh-prod-card .wh-oos .wh-dot{background:#c0392b}
@media(max-width:768px){.wh-tab-panel.wh-prod-grid{grid-template-columns:repeat(2,1fr)!important}.wh-catmod{padding:18px 14px!important}}
/* WHSAVELINE:产品卡 Save 徽章统一——价格一行,Save 始终独占下一行(紧贴内容) */
.wh-prod-price{display:block!important;line-height:1.55!important}
.wh-prod-price del{margin-right:7px}
.wh-prod-price ins{white-space:nowrap}
.wh-hsave{display:table!important;margin-top:6px!important}
/* WHHERO2MOBILE:手机版 hero 用竖图 + 顶部渐变放文字 */
@media(max-width:768px){
  .wh-hero2{background-image:url(general/gen-2-mobile.jpg)!important;background-position:center bottom!important;min-height:78vh!important;align-items:flex-start!important}
  .wh-hero2::before{background:linear-gradient(180deg,rgba(38,4,32,.88) 0%,rgba(17,17,17,.52) 34%,rgba(255,224,0,.12) 60%,rgba(0,0,0,0) 100%)!important}
  .wh-hero2-in{padding:40px 22px!important}
  .wh-hero2-title{font-size:clamp(28px,8vw,40px)!important}
}
/* WHTITLE2LINE:主页产品卡标题最多 2 行 */
.wh-prod-name{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:37px;max-height:38px;line-height:1.35}
/* WHCBANNER:电商促销 banner——品牌紫 + 真实分类 tile 拼贴 */
.wh-cbanner{position:relative;width:100vw;margin:0 calc(50% - 50vw) 22px;background:#FFE000;display:grid;grid-template-columns:1.08fr 0.9fr 1.08fr;gap:14px;align-items:center;padding:34px 44px;overflow:hidden}
.wh-cb-side{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.wh-cb-tile{display:flex;flex-direction:column;align-items:center;text-decoration:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:9px 7px;transition:.15s}
.wh-cb-tile:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);transform:translateY(-3px)}
.wh-cb-thumb{width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#fff}
.wh-cb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.wh-cb-label{margin-top:7px;font-size:11.5px;font-weight:600;color:#fff;text-align:center;line-height:1.2;letter-spacing:.01em}
.wh-cb-center{text-align:center;color:#fff;padding:0 12px;max-width:560px;margin:0 auto}
.wh-cb-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FFF0A8;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);padding:6px 14px;border-radius:999px;margin-bottom:16px}
.wh-cb-title{font-family:'Space Grotesk',Inter,sans-serif;font-weight:800;font-size:clamp(26px,3vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px;color:#fff}
.wh-cb-sub{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.86);margin:0 auto 22px;max-width:440px}
.wh-cb-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.wh-cb-btn{display:inline-flex;align-items:center;padding:14px 30px;border-radius:10px;background:#fff;color:#FFE000;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.3);transition:.15s}
.wh-cb-btn:hover{transform:translateY(-2px)}
.wh-cb-btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.62);box-shadow:none}
.wh-cb-btn--ghost:hover{background:rgba(255,255,255,.12)}
.wh-cb-badges{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;justify-items:start;max-width:340px;margin:0 auto;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9)}
.wh-cb-badges span::before{content:"\2713";margin-right:5px;color:#7CE6B0;font-weight:700}
@media(max-width:900px){
  .wh-cbanner{grid-template-columns:1fr;padding:26px 16px;gap:20px}
  .wh-cb-center{order:-1}
  .wh-cb-side{grid-template-columns:repeat(6,1fr);gap:8px}
  .wh-cb-label{font-size:9.5px}
}
@media(max-width:520px){ .wh-cb-side{grid-template-columns:repeat(3,1fr)} }
/* WHCATGRIDPURPLE:部门 tile 统一紫色渐变遮罩 + 白字标签(杂乱照片统一成品牌风) */
.wh-catgrid a{position:relative!important}
.wh-catgrid img{aspect-ratio:1/1!important}
.wh-catgrid a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(180deg,rgba(45,7,38,0) 0%,rgba(45,7,38,.55) 45%,rgba(45,7,38,.9) 100%);pointer-events:none;transition:.18s}
.wh-catgrid a:hover::after{background:linear-gradient(180deg,rgba(255,224,0,.1) 0%,rgba(17,17,17,.7) 45%,rgba(45,7,38,.94) 100%)}
.wh-catgrid .wh-cg-b{position:absolute!important;left:0;right:0;bottom:0;padding:12px 14px!important;z-index:1}
.wh-catgrid .wh-cg-n{color:#fff!important;font-weight:700!important}
.wh-catgrid .wh-cg-c{color:rgba(255,255,255,.85)!important}
/* 产品页右列(产品信息)sticky——Estimate 已移入,跟随滚动 */
@media(min-width:900px){
  .single-product .wh-row .wh-right{position:sticky!important;top:16px!important;align-self:flex-start!important}
}
/* WHCOLL6:部门 tile 一行 6 个 + Collections 页分区标题 */
.wh-catgrid{grid-template-columns:repeat(6,1fr)!important}
.wh-coll-sec{margin:0 0 34px}
.wh-coll-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px;border-bottom:2px solid #f0e6ee;padding-bottom:8px}
.wh-coll-title{font-family:'Space Grotesk',Inter,sans-serif;font-weight:800;font-size:22px;color:#FFE000;margin:0}
.wh-coll-viewall{font-size:13.5px;font-weight:600;color:#FFE000;text-decoration:none;white-space:nowrap}
.wh-coll-viewall:hover{text-decoration:underline}
@media(max-width:900px){.wh-catgrid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:560px){.wh-catgrid{grid-template-columns:1fr 1fr!important}}
/* WHBANNERNOGAP:banner 上方不留空隙(紧贴 header) */
.wh-home-native > .wh-cbanner:first-child,.wh-cbanner{margin-top:0!important}

/* WHMARQUEE-fix 2026-07-12: 装饰性促销跑马灯即使在 prefers-reduced-motion 下也滚动(用户要求;主题默认把动画砍成0.001s) */
@media (prefers-reduced-motion: reduce){
  .wh-tmarquee-track{animation-duration:26s!important;animation-play-state:running!important;}
}

/* WHCBBTN-fix 2026-07-12: ghost 按钮(Browse Collections)hover 文字保持白色(原被某规则改暗看不清) */
.wh-cb-btn--ghost:hover,.wh-cb-btn--ghost:hover *,.wh-cb-btn--ghost:focus,.wh-cb-btn--ghost:focus *{color:#fff!important;}