/** Shopify CDN: Minification failed

Line 14:48 Unexpected "/"

**/
/* ============================================================
   hab-home.css — HAB homepage (Avone v4) ported from prototype
   "Homepage Outdoors V4 - Category Switch.html".
   Every rule is scoped under .hab-home (the section wrapper class
   set via each section's schema "class"), so nothing leaks into
   the rest of the Avone theme. Header/footer/nav are Avone's and
   are intentionally NOT ported here.
   Collision-prone names are hab-prefixed: .hab-hero/.hab-trail/
   .hab-feature/.hab-closing/.hab-btn*/.hab-wrap/.hab-eyebrow/
   .hab-reveal and keyframes hab-kb/hab-dash/hab-cue.
   ============================================================ */

/* ── shared primitives ── */
.hab-home img{max-width:100%;display:block}
.hab-home a{color:inherit;text-decoration:none}
.hab-home h1,.hab-home h2,.hab-home h3,.hab-home h4{margin:0;font-family:var(--hab-display);font-weight:700;line-height:1.05;letter-spacing:-.015em}
.hab-home p{margin:0}
.hab-home em{font-style:normal}
.hab-home .hab-wrap{max-width:var(--hab-wrap);margin:0 auto;padding:0 clamp(20px,4vw,42px)}
.hab-home .hab-eyebrow{font-family:var(--hab-display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--hab-accent)}

.hab-home .hab-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--hab-display);font-weight:600;font-size:14px;letter-spacing:.02em;padding:14px 22px;border-radius:3px;cursor:pointer;border:1.5px solid transparent;transition:transform .15s ease}
.hab-home .hab-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hab-home .hab-btn:hover{transform:translateY(-2px)}
.hab-home .hab-btn-primary{background:var(--hab-accent);color:#fff}
.hab-home .hab-btn-line{border-color:rgba(245,241,232,.5);color:var(--hab-ivory)}
.hab-home .hab-btn-line:hover{background:rgba(245,241,232,.12)}
.hab-home .hab-btn-ivory{background:var(--hab-ivory);color:var(--hab-ink)}
.hab-home .hab-btn-lg{padding:16px 26px;font-size:15px}

/* ───────── Category strip — Tier-3 (§18.3) ─────────
   Renders in normal flow at the top (dark forest bar). Once it scrolls off the
   top (sentinel IntersectionObserver in hab-home.js), a fixed bottom-bar CLONE
   slides up from the bottom of the viewport. The original stays in flow, so
   there is NO layout jump. */
.hab-home .hab-cat-strip-sentinel{height:0;margin:0;padding:0;border:0}
.hab-home .hab-cat-strip .hab-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:5px;padding-bottom:5px}
/* fixed bottom-bar clone (built by hab-home.js; identical styling, only position + shadow change) */
.hab-home .hab-cat-strip-clone{position:fixed;left:0;right:0;bottom:0;z-index:1000;border-top:1px solid rgba(244,240,230,.14);border-bottom:0;box-shadow:0 -8px 32px -12px rgba(34,30,24,.45);padding-bottom:max(env(safe-area-inset-bottom,0px),0px);transform:translateY(100%);visibility:hidden;transition:transform .25s ease,visibility .25s ease;will-change:transform}
.hab-home .hab-cat-strip-clone.on{transform:translateY(0);visibility:visible}
/* slimmer bottom-stuck variant — pills only, tighter padding (full prompt stays on the in-flow strip) */
.hab-home .hab-cat-strip-clone .hab-wrap{justify-content:center;padding-top:3px;padding-bottom:3px}
@media(max-width:880px){
  .hab-home .hab-cat-strip .hab-wrap{flex-direction:column;align-items:stretch;gap:8px}
}
@media(prefers-reduced-motion:reduce){.hab-home .hab-cat-strip-clone{transition:none}}

/* ───────── Announcement bar (§2) ───────── */
.hab-home .hab-announce{background:var(--hab-announce-bg,#000)}
.hab-home .hab-announce-track{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;max-width:var(--hab-wrap);margin:0 auto;padding:8px clamp(20px,4vw,42px)}
.hab-home .hab-pip{display:inline-flex;align-items:center;gap:8px;font-family:var(--hab-mono);font-weight:500;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--hab-ivory-70);white-space:nowrap}
.hab-home a.hab-pip:hover{color:var(--hab-ivory)}
.hab-home .hab-pip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hab-rust);flex:0 0 auto}
@media(max-width:680px){.hab-home .hab-announce-track{gap:10px 18px}.hab-home .hab-pip:nth-child(n+3){display:none}}

/* ───────── Brands strip (§4) ───────── */
/* Wave 14.0 · bg now 3-branch merchant-driven via --brands-bg (set / custom / else→scheme).
   Emit lives in sections/hab-brands-strip.liquid root_style capture. Chain:
     --brands-bg (inline)  →  --section-bg (scheme class)  →  --hab-cream (literal fallback)
   Selector uses .hab-brands.hab-brands (specificity 0-3-0) to beat the L1069
   16-section scheme-driven group `.hab-home .hab-brands, .hab-signup, ...`
   which sits later in source at 0-2-0 and would otherwise strip --brands-bg
   in favour of --section-bg. Wave 14.0 lesson: merchant-tunable bg needs to
   win over scheme-driven bg default, so specificity bump not source-order fix. */
.hab-home .hab-brands.hab-brands{padding:clamp(48px,7vw,90px) 0;background-color:var(--brands-bg, var(--section-bg, var(--hab-cream)))}
.hab-home .hab-brands .sec-head{margin-bottom:34px}

/* Carousel wrapper — position:relative anchors the chevron buttons */
.hab-home .brand-carousel{position:relative}

/* Nav chevrons — desktop only. Circular button that overlays the track
   edges. Toggled via [hidden] attribute in hab-home.js based on
   scrollWidth vs clientWidth + scrollLeft position. */
.hab-home .brand-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:#fff;border:1px solid var(--hab-hair);color:var(--hab-ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(42,34,27,.35);
  transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;
}
.hab-home .brand-nav:hover{transform:translateY(-50%) scale(1.06);border-color:var(--hab-accent);color:var(--hab-accent)}
.hab-home .brand-nav[hidden]{display:none}
.hab-home .brand-nav svg{width:20px;height:20px}
.hab-home .brand-nav.prev{left:-22px}
.hab-home .brand-nav.next{right:-22px}

/* Scroll track — horizontal, snap-mandatory, hidden scrollbar. Wave 5
   replaced the 6-col CSS grid with a scroll carousel to accommodate up
   to 12 brand blocks without overflowing the row. */
.hab-home .brand-grid{
  display:flex;gap:14px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 4px 6px;scroll-padding:4px;
}
.hab-home .brand-grid::-webkit-scrollbar{display:none}

/* Card — flex item with fixed min-width so the row is scrollable rather
   than flexbox-shrunk; snap-align:start locks each card to the left edge
   after a scroll gesture. Wave 5.3 bumped min-height 120→148 and reduced
   horizontal padding 20→14 (~30%) so the enlarged 68px logo has room. */
.hab-home .brand-card{
  flex:0 0 auto;min-width:180px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;
  min-height:148px;padding:24px 14px 18px;
  background:#fff;border:1px solid var(--hab-hair);border-radius:8px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.hab-home a.brand-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(42,34,27,.45);border-color:var(--hab-accent)}
/* Wordmark: upsized to 24px/700, min-height + centered flex so it occupies
   the same 44px vertical footprint as the image variant. Result: meta rows
   line up across all cards regardless of variant. */
/* Wave 5.3 — wordmark min-height matched to logo (68px) so both variants
   occupy the same slot and the est/country meta row sits at the same y
   across image cards and wordmark cards. Font-size unchanged — wordmark
   text just centres within a taller box. */
.hab-home .brand-mark{font-family:var(--hab-display);font-weight:700;font-size:24px;letter-spacing:-.01em;color:var(--hab-ink);line-height:1;min-height:68px;display:flex;align-items:center;justify-content:center}
/* Image logo — Wave 5.3 bumped 44→68px content-box height and max-width
   80→85% so the uploaded bitmap fills more of the card. The <img> HTML
   attrs (width=180 height=68) were updated to match — sets the initial
   aspect-ratio hint so there's no reflow between HTML-attr-reserved space
   and CSS-driven size. object-fit:contain still letterboxes if the uploaded
   bitmap's aspect ratio differs from 180:68. */
/* Wave 7a step 8: 68→72px. Per-brand logo_padding metaobject field
   is applied via inline style attribute in hab-brands-strip.liquid
   as `padding: <n>px 0` — lets specific brands whose source PNGs
   sit tight to the glyph get a per-card breathing tweak. */
.hab-home .brand-logo{height:72px;max-height:72px;width:auto;max-width:85%;object-fit:contain;display:block;margin:0 auto;box-sizing:content-box}
.hab-home .brand-meta{font-family:var(--hab-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(42,34,27,.72)}
/* Mobile: tighter card min-width so ~2.3 cards peek in the viewport;
   chevrons hidden — touch swipe is the primary interaction. */
@media(max-width:880px){
  .hab-home .brand-card{min-width:150px}
  .hab-home .brand-nav{display:none}
}
/* Small mobile — Wave 5.3 scales the enlarged logo/card down proportionally
   so the 68px logo doesn't dominate a 150px-wide card at phone widths. */
@media(max-width:640px){
  .hab-home .brand-card{min-height:128px}
  .hab-home .brand-logo{height:52px;max-height:52px}
  .hab-home .brand-mark{min-height:52px}
}
/* Reduced-motion: instant scroll on programmatic scrollBy() calls too,
   backed up by the JS which passes behavior:'instant' when reduce is set. */
@media (prefers-reduced-motion:reduce){
  .hab-home .brand-grid{scroll-behavior:auto}
}

/* ───────── Bestsellers shelf (§6) ───────── */
.hab-home .hab-shelf{padding:clamp(56px,8vw,104px) 0;background:var(--hab-paper)}
.hab-home .hab-shelf .sec-head{margin-bottom:32px}
.hab-home .shelf-viewall{align-self:end;justify-self:end;display:inline-flex;align-items:center;gap:7px;font-family:var(--hab-display);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--hab-accent)}
.hab-home .shelf-viewall svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hab-home .shelf-empty{color:rgba(42,34,27,.72);font-style:italic}
.hab-home .shelf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hab-home .prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hab-hair);border-radius:10px;overflow:hidden;color:var(--hab-ink);transition:transform .2s ease,box-shadow .2s ease}
.hab-home .prod:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(42,34,27,.5)}
.hab-home .prod .ph{position:relative;aspect-ratio:1/1;background:var(--hab-cream);overflow:hidden}
.hab-home .prod .ph img{width:100%;height:100%;object-fit:cover}
.hab-home .prod .badge{position:absolute;top:12px;left:12px;font-family:var(--hab-display);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--hab-accent);color:#fff;padding:5px 9px;border-radius:99px}
.hab-home .prod-body{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;flex:1}
.hab-home .prod .brand{font-family:var(--hab-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(42,34,27,.72)}
.hab-home .prod-title{font-family:var(--hab-display);font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1.2}
.hab-home .prod .rate{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(42,34,27,.7)}
.hab-home .prod .rate .stars{color:var(--hab-brass);letter-spacing:1px;font-size:13px;line-height:1}
.hab-home .prod .rate .rate-num{font-family:var(--hab-display);font-weight:600;font-size:12px;color:var(--hab-ink)}
.hab-home .prod .rate .rate-count{font-family:var(--hab-mono);font-size:10.5px;color:rgba(42,34,27,.72)}
.hab-home .prod .feature{font-size:13px;color:rgba(42,34,27,.72);line-height:1.45}
.hab-home .prod .pricing{margin-top:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;padding-top:6px}
.hab-home .prod .pricing .price{font-family:var(--hab-display);font-weight:700;font-size:17px;color:var(--hab-ink)}
.hab-home .prod .pricing .was{font-size:13px;color:rgba(42,34,27,.45);text-decoration:line-through}
.hab-home .prod .pricing .save{font-family:var(--hab-display);font-weight:600;font-size:11px;letter-spacing:.02em;color:var(--hab-rust)}
@media(max-width:880px){.hab-home .shelf-grid{grid-template-columns:repeat(2,1fr)}}
/* Wave 27.8 — horizontal swipe carousel at ≤767px replaces the vertical
   1-col stack Paul flagged as "very long scroll". CSS scroll-snap, no JS.
   78% flex-basis keeps one card fully visible with a peek of the next
   as a swipe affordance. Native touch scroll + snap-align:start behaves
   naturally on iOS/Android. Scrollbar hidden. Desktop untouched. */
@media(max-width:767px){
  .hab-home .hab-shelf .shelf-grid{
    display:flex; flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:16px;
    gap:12px;
    padding:0 16px 8px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hab-home .hab-shelf .shelf-grid::-webkit-scrollbar{display:none}
  .hab-home .hab-shelf .shelf-grid .prod{
    flex:0 0 78%;
    scroll-snap-align:start;
    min-width:0;
  }
}

/* ───────── Founder note (§7) ───────── */
.hab-home .hab-founder{padding:clamp(56px,8vw,110px) 0;background:var(--hab-paper)}
.hab-home .founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
.hab-home .founder .portrait{aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--hab-cream);border:1px solid var(--hab-hair)}
.hab-home .founder .portrait img{width:100%;height:100%;object-fit:cover}
.hab-home .founder .copy .hab-eyebrow{display:block;margin-bottom:14px}
.hab-home .founder .copy h2{font-size:clamp(26px,3.4vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.hab-home .founder .copy h2 em{color:var(--hab-accent)}
.hab-home .founder .quote{margin:20px 0 0;border:0;padding:0;font-family:var(--hab-body);font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--hab-ink)}
.hab-home .founder .quote p{margin:0}
.hab-home .founder .sig{margin-top:20px;display:flex;flex-direction:column;gap:2px}
.hab-home .founder .sig-name{font-family:var(--hab-display);font-weight:700;font-size:16px;color:var(--hab-ink)}
.hab-home .founder .sig-role{font-family:var(--hab-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(42,34,27,.72)}
.hab-home .founder .creds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;border-top:1px solid var(--hab-hair);padding-top:24px}
.hab-home .founder .cred b{display:block;font-family:var(--hab-display);font-weight:700;font-size:20px;color:var(--hab-ink)}
.hab-home .founder .cred span{font-size:12px;color:rgba(42,34,27,.72)}
@media(max-width:880px){.hab-home .founder{grid-template-columns:1fr}.hab-home .founder .creds{grid-template-columns:repeat(2,1fr)}}

/* ───────── Reviews block (§10) · Wave 20.0 rebuild ───────── */
/* Wave 14.0 lesson: .hab-reviews sits in the L1086 shared scheme-group `.hab-home .foo, ...`
   at 0-2-0 specificity; a single-class rule here loses. Double-class bump `.hab-reviews.hab-reviews`
   raises us to 0-3-0 so merchant --reviews-bg overrides the scheme default. */
.hab-home .hab-reviews.hab-reviews{padding:clamp(56px,8vw,110px) 0;background-color:var(--reviews-bg, var(--section-bg, transparent))}
/* bg-image overlay: wires the previously-emitted-but-unread --section-bg-image + opacity vars */
.hab-home .hab-reviews.hab-reviews[data-has-bg-image="true"]{position:relative;isolation:isolate}
.hab-home .hab-reviews.hab-reviews[data-has-bg-image="true"]::before{content:"";position:absolute;inset:0;background-image:var(--section-bg-image);background-size:cover;background-position:center;opacity:var(--section-bg-image-opacity,1);z-index:-1;pointer-events:none}
.hab-home .hab-reviews .reviews-head{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(22px,4vw,48px);align-items:center;margin-bottom:38px}
.hab-home .hab-reviews .agg{text-align:center}
.hab-home .hab-reviews .agg-score{font-family:var(--hab-display);font-weight:800;font-size:54px;line-height:1;color:var(--hab-ink)}
.hab-home .hab-reviews .agg-count{font-family:var(--hab-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(42,34,27,.72);margin-top:6px}
/* Aggregate stars — partial-fill overlay driven by --agg-fill (percentage set in section root_style).
   Empty stars are the base colour; filled overlay is clipped by width. Scoped under .hab-reviews (Wave 20.0). */
.hab-home .hab-reviews .agg-stars{position:relative;display:inline-block;color:var(--reviews-star-empty-color, rgba(216,178,74,.25));letter-spacing:2px;font-size:16px;margin-top:6px;line-height:1}
.hab-home .hab-reviews .agg-stars .stars-empty{display:inline-block}
.hab-home .hab-reviews .agg-stars .stars-fill{position:absolute;top:0;left:0;display:inline-block;overflow:hidden;white-space:nowrap;width:var(--agg-fill, 100%);color:var(--reviews-star-color, var(--hab-brass))}
.hab-home .hab-reviews .reviews-intro{text-align:center}
.hab-home .hab-reviews .reviews-intro h2{font-size:clamp(24px,3.2vw,40px);font-weight:700;letter-spacing:-.02em}
.hab-home .hab-reviews .reviews-intro .lede{margin-top:10px;color:rgba(42,34,27,.72);font-size:15px;line-height:1.6;max-width:46ch;margin-inline:auto}
.hab-home .hab-reviews .reviews-badge{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:16px 18px;background-color:var(--reviews-badge-bg, var(--hab-white, #fff));border:1px solid var(--hab-hair);border-radius:10px;color:var(--hab-ink)}
.hab-home .hab-reviews .reviews-badge img{max-height:28px;width:auto;height:auto}
.hab-home .hab-reviews .reviews-badge .b-label{font-family:var(--hab-display);font-weight:700;font-size:13px;color:var(--hab-ink)}
.hab-home .hab-reviews .reviews-badge .b-sub{font-size:11px;color:rgba(42,34,27,.72)}
.hab-home .hab-reviews .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hab-home .hab-reviews .review{display:flex;flex-direction:column;gap:12px;background-color:var(--reviews-card-bg, var(--hab-white, #fff));border:1px solid var(--reviews-card-border, var(--hab-hair));border-radius:10px;padding:22px}
/* Per-card stars — integer fill (rating range 1..5 step 1). Scoped under .hab-reviews (Wave 20.0). */
.hab-home .hab-reviews .review .stars{color:var(--reviews-star-color, var(--hab-brass));letter-spacing:1px;font-size:14px;line-height:1}
.hab-home .hab-reviews .review .quote{margin:0;border:0;padding:0;font-family:var(--hab-body);font-size:15px;line-height:1.55;color:var(--hab-ink)}
.hab-home .hab-reviews .review .quote p{margin:0}
.hab-home .hab-reviews .review .prod-tag{align-self:flex-start;font-family:var(--hab-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--hab-accent);background:var(--hab-tint-2);padding:4px 9px;border-radius:99px}
.hab-home .hab-reviews .review .by{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:6px}
.hab-home .hab-reviews .review .av{width:38px;height:38px;border-radius:50%;background-color:var(--reviews-avatar-bg, var(--hab-primary));color:var(--hab-ivory);display:flex;align-items:center;justify-content:center;font-family:var(--hab-display);font-weight:700;font-size:13px;flex:0 0 auto}
.hab-home .hab-reviews .review .who{display:block;font-family:var(--hab-display);font-weight:700;font-size:13.5px;color:var(--hab-ink)}
.hab-home .hab-reviews .review .where{display:block;font-size:11.5px;color:rgba(42,34,27,.72)}
@media(max-width:880px){.hab-home .hab-reviews .reviews-head{grid-template-columns:1fr;text-align:center}.hab-home .hab-reviews .reviews-grid{grid-template-columns:1fr}}

/* ───────── FAQ block (§11) ───────── */
.hab-home .hab-faq{padding:clamp(56px,8vw,110px) 0;background:var(--hab-paper)}
.hab-home .faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start}
.hab-home .hab-faq .intro .hab-eyebrow{display:block;margin-bottom:14px}
.hab-home .hab-faq .intro h2{font-size:clamp(26px,3.4vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.hab-home .hab-faq .intro h2 em{color:var(--hab-accent)}
.hab-home .hab-faq .intro > p{margin-top:14px;color:rgba(42,34,27,.72);font-size:15px;line-height:1.6;max-width:42ch}
.hab-home .hab-faq .help{margin-top:24px;padding:20px;background:var(--hab-cream);border:1px solid var(--hab-hair);border-radius:10px}
.hab-home .hab-faq .help .help-label{font-family:var(--hab-display);font-weight:700;font-size:15px;color:var(--hab-ink)}
.hab-home .hab-faq .help p{margin-top:6px;font-size:13.5px;color:rgba(42,34,27,.7)}
.hab-home .hab-faq .help a{display:inline-block;margin-top:12px;font-family:var(--hab-display);font-weight:600;font-size:13px;letter-spacing:.03em;color:var(--hab-accent)}
.hab-home .qs{display:flex;flex-direction:column}
.hab-home details.faq{border-top:1px solid var(--hab-hair)}
.hab-home details.faq:last-child{border-bottom:1px solid var(--hab-hair)}
.hab-home details.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;font-family:var(--hab-display);font-weight:600;font-size:16px;color:var(--hab-ink)}
.hab-home details.faq summary::-webkit-details-marker{display:none}
.hab-home details.faq .ic{position:relative;width:18px;height:18px;flex:0 0 auto}
.hab-home details.faq .ic::before,.hab-home details.faq .ic::after{content:"";position:absolute;background:var(--hab-accent);transition:transform .25s ease}
.hab-home details.faq .ic::before{top:8px;left:0;width:18px;height:2px}
.hab-home details.faq .ic::after{top:0;left:8px;width:2px;height:18px}
.hab-home details.faq[open] .ic::after{transform:scaleY(0)}
.hab-home details.faq .ans{padding:0 0 20px;font-family:var(--hab-body);font-size:14.5px;line-height:1.6;color:rgba(42,34,27,.8)}
.hab-home details.faq .ans p{margin:0}
.hab-home details.faq .ans a{color:var(--hab-accent);text-decoration:underline;text-underline-offset:2px}
@media(max-width:880px){.hab-home .faq-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hab-home details.faq .ic::before,.hab-home details.faq .ic::after{transition:none}}

/* ───────── Journal teaser (§9) ───────── */
.hab-home .hab-journal{padding:clamp(56px,8vw,110px) 0;background:var(--hab-paper)}
.hab-home .hab-journal .sec-head{margin-bottom:32px}
/* Wave 11.0 · dormant `.journal` + `.post` block pruned. Current markup uses `.hab-journal__*` BEM — see §Journal-teaser (rebuilt Wave 11.0) block below. */

/* ───────── Newsletter panel (§12) ───────── */
/* Wave 15.0 · bg 3-branch via --newsletter-bg (set / custom / else→scheme).
   Selector uses .hab-signup.hab-signup (0-3-0) to beat the L1078 scheme
   group `.hab-home .hab-signup, .hab-brands, ...` which sits later at 0-2-0
   and would otherwise strip --newsletter-bg in favour of --section-bg.
   Wave 14.0 lesson applied verbatim. */
.hab-home .hab-signup.hab-signup{padding:clamp(48px,7vw,90px) 0;background-color:var(--newsletter-bg, var(--section-bg, var(--hab-ivory)))}
/* Inner panel + input + button — colours now merchant-tunable via section captures (--newsletter-panel-* / --newsletter-input-* / --newsletter-button-*).
   Fallbacks match the pre-Wave-15.0 forest/ivory/brass look so an untouched install renders identically. */
.hab-home .hab-signup .panel{background-color:var(--newsletter-panel-bg, var(--hab-forest));color:var(--hab-ivory);border-radius:14px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.hab-home .hab-signup .panel-copy h2{font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.02em;color:var(--hab-ivory)}
.hab-home .hab-signup .panel-copy p{margin-top:12px;color:var(--hab-ivory-70);font-size:15px;line-height:1.6;max-width:42ch}
.hab-home .hab-signup .newsletter-form{margin:0}
.hab-home .hab-signup .row{display:flex;gap:8px;flex-wrap:wrap}
/* Wave 15.0 · min-height:44px on input + button (WCAG tap target floor).
   box-sizing:border-box so padding + border stay inside the 44px envelope. */
.hab-home .hab-signup .row input[type=email]{flex:1 1 200px;min-height:44px;box-sizing:border-box;background-color:var(--newsletter-input-bg, rgba(245,241,232,.08));border:1px solid var(--newsletter-input-border, rgba(245,241,232,.25));border-radius:4px;color:var(--hab-ivory);padding:13px 15px;font-family:var(--hab-body);font-size:15px}
.hab-home .hab-signup .row input[type=email]::placeholder{color:var(--hab-ivory-70)}
.hab-home .hab-signup .row input[type=email]:focus{outline:0;border-color:var(--hab-accent)}
.hab-home .hab-signup .row button{min-height:44px;box-sizing:border-box;background-color:var(--newsletter-button-bg, var(--hab-accent));color:var(--newsletter-button-color, #fff);border:1px solid var(--newsletter-button-border, transparent);border-radius:4px;padding:0 24px;font-family:var(--hab-display);font-weight:600;font-size:14px;letter-spacing:.02em;cursor:pointer;transition:transform .15s ease,background-color .18s ease,color .18s ease}
.hab-home .hab-signup .row button:hover{transform:translateY(-2px);background-color:var(--newsletter-button-hover-bg, var(--newsletter-button-bg, var(--hab-accent)));color:var(--newsletter-button-hover-color, var(--newsletter-button-color, #fff))}
.hab-home .hab-signup small{display:block;margin-top:12px;color:var(--hab-ivory-70);font-size:11.5px;line-height:1.5;max-width:48ch}
.hab-home .hab-signup small a{color:var(--hab-ivory-70);text-decoration:underline}
.hab-home .hab-signup small p{margin:0}
.hab-home .hab-signup .form--success{color:var(--newsletter-success-color, var(--hab-ivory));font-family:var(--hab-display);font-weight:600;font-size:16px}
/* Wave 15.0 · form.errors was rendered via default_errors with browser default styling — invisible on dark forest panel. Now styled via --newsletter-error-color merchant control. */
.hab-home .hab-signup .errors,
.hab-home .hab-signup ul.errors{color:var(--newsletter-error-color, #F5B7B1);font-family:var(--hab-body);font-size:13px;line-height:1.4;list-style:none;padding:0;margin:0 0 12px}
.hab-home .hab-signup .errors li{margin:0 0 4px}
@media(max-width:768px){.hab-home .hab-signup .panel{grid-template-columns:1fr}}

/* ── reveal (only hidden when JS is active, so content never gets
      stranded invisible if hab-home.js fails to load) ── */
.js .hab-home .hab-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .hab-home .hab-reveal.in{opacity:1;transform:none}

/* ───────── Hero ───────── */
.hab-home .hab-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;color:var(--hab-ivory)}
.hab-home .hero-slides{position:absolute;inset:0;z-index:0}
/* Wave 7e hotfix — mobile media wrapper. Two .hero-slides stack (both
   position:absolute, inset:0); this rule swaps which is display:block by
   viewport. See homepage-v4/docs/hero-spec.md §Mobile media. */
.hab-home .hab-hero .hero-slides--desktop{display:block}
.hab-home .hab-hero .hero-slides--mobile{display:none}
@media (max-width:767px){
  .hab-home .hab-hero .hero-slides--desktop{display:none}
  .hab-home .hab-hero .hero-slides--mobile{display:block}
}
.hab-home .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hab-home .hero-slide.on{opacity:1}
.hab-home .hero-slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.04)}
.hab-home .hero-slide.on .bg{animation:hab-kb 9s ease-out forwards}
@keyframes hab-kb{from{transform:scale(1.04)}to{transform:scale(1.14)}}
.hab-home .hero-slide .bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(245,241,232,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,232,.05) 1px,transparent 1px);background-size:54px 54px}
.hab-home .hero-slide .ph-tag{position:absolute;left:18px;bottom:18px;background:rgba(42,34,27,.5);color:var(--hab-ivory-70);font-family:var(--hab-display);font-size:10px;letter-spacing:.04em;padding:5px 10px;border-radius:2px}
.hab-home .hab-hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(20,16,12,.82),rgba(20,16,12,.4) 48%,rgba(20,16,12,.12) 72%,transparent)}
.hab-home .route-overlay{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.hab-home .route-overlay path{fill:none;stroke:var(--hab-accent);stroke-width:2.5;stroke-dasharray:7 9;opacity:.7;animation:hab-dash 22s linear infinite}
@keyframes hab-dash{to{stroke-dashoffset:-320}}
.hab-home .route-overlay .node{fill:var(--hab-ivory)}
.hab-home .route-overlay .node-ring{fill:none;stroke:var(--hab-accent);stroke-width:2}
.hab-home .route-rider{position:absolute;z-index:2;width:98px;height:47px;left:0;top:0;pointer-events:none;will-change:transform;opacity:0;filter:drop-shadow(0 3px 6px rgba(20,16,12,.5))}
.hab-home .route-rider.ready{opacity:.95}
.hab-home .route-rider svg{width:100%;height:100%;overflow:visible}
.hab-home .route-rider .rr-fill{fill:var(--hab-ivory);stroke:none}
.hab-home .route-rider .rr-stroke{fill:none;stroke:var(--hab-ivory);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.hab-home .route-rider{display:none}}
@media(max-width:700px){.hab-home .route-rider{display:none}}

.hab-home .hero-inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(40px,7vh,84px);padding-top:172px}
.hab-home .top-tags{display:flex;gap:10px;position:absolute;top:108px;left:0;right:0;padding:0 clamp(20px,4vw,42px)}
.hab-home .field-tag{font-family:var(--hab-display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hab-ivory-70);border:1px solid rgba(245,241,232,.28);border-radius:99px;padding:6px 12px}
.hab-home .stage{max-width:760px;transition:opacity .45s ease,transform .45s ease}
.hab-home .stage.swap{opacity:0;transform:translateY(14px)}
.hab-home .stage .hab-eyebrow{margin-bottom:18px;color:var(--hab-ivory);opacity:.92}
.hab-home .stage h1{font-size:clamp(38px,6.4vw,78px);font-weight:800;line-height:.98;letter-spacing:-.03em;color:var(--hab-ivory)}
.hab-home .stage h1 .sketch{position:relative;white-space:nowrap;color:#fff}
.hab-home .stage h1 .sketch svg{position:absolute;left:0;right:0;bottom:-.16em;width:100%;height:.32em;fill:none;stroke:var(--hab-accent);stroke-width:5;stroke-linecap:round}
.hab-home .stage .lede{font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--hab-ivory-70);max-width:52ch;margin-top:20px}
.hab-home .ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hab-home .meta-row{display:flex;gap:30px;margin-top:32px;flex-wrap:wrap}
.hab-home .meta-row .m{display:flex;flex-direction:column;gap:2px}
.hab-home .meta-row .m b{font-family:var(--hab-display);font-weight:700;font-size:21px;color:var(--hab-ivory)}
.hab-home .meta-row .m span{font-size:11.5px;color:var(--hab-ivory-70);letter-spacing:.02em}

/* (in-hero category switcher removed in Tier-3 — global cat-strip is the single nav) */

.hab-home .scroll-cue{position:absolute;right:clamp(20px,4vw,42px);bottom:30px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;font-family:var(--hab-display);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--hab-ivory-45)}
.hab-home .scroll-cue .line{width:1px;height:42px;background:linear-gradient(var(--hab-ivory-45),transparent);animation:hab-cue 2s ease-in-out infinite}
@keyframes hab-cue{0%,100%{transform:scaleY(.5);transform-origin:top}50%{transform:scaleY(1)}}

/* ───────── Trail / category grid ───────── */
.hab-home .hab-trail{padding:clamp(64px,9vw,118px) 0;background:var(--hab-paper);position:relative}
.hab-home .hab-trail::before{content:"";position:absolute;inset:0;background:var(--hab-tint);pointer-events:none}
.hab-home .hab-trail .hab-wrap{position:relative}
.hab-home .sec-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:42px}
.hab-home .sec-head h2{font-size:clamp(28px,3.6vw,46px);font-weight:700;letter-spacing:-.02em}
.hab-home .sec-head h2 em{color:var(--hab-accent)}
.hab-home .sec-head .lead{font-size:15px;color:rgba(42,34,27,.72);line-height:1.6;max-width:46ch;justify-self:end}
.hab-home .trail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hab-home .hab-trail[data-grid="three"] .trail-card.shopping{display:none}
.hab-home .hab-trail[data-grid="four"] .trail-grid{grid-template-columns:repeat(4,1fr)}
.hab-home .hab-trail[data-grid="mosaic"] .trail-grid{grid-template-columns:repeat(4,1fr)}
.hab-home .hab-trail[data-grid="mosaic"] .trail-card.popular{grid-column:span 2;grid-row:span 1}
.hab-home .trail-card{position:relative;border-radius:8px;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--hab-ivory);border:1px solid var(--hab-hair);transition:transform .25s ease,box-shadow .25s ease,outline .3s ease;outline:2px solid transparent;outline-offset:-2px}
.hab-home .trail-card:hover{transform:translateY(-5px);box-shadow:0 24px 44px -26px rgba(42,34,27,.5)}
.hab-home .trail-card .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease}
.hab-home .trail-card:hover .bg{transform:scale(1.05)}
.hab-home .trail-card .scrim{position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(20,16,12,.82))}
.hab-home .trail-card.active{outline-color:var(--hab-accent)}
.hab-home .trail-card .num{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--hab-display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--hab-ivory-70);background:rgba(42,34,27,.4);padding:5px 10px;border-radius:99px}
.hab-home .trail-card .badge-now{position:absolute;top:16px;right:16px;z-index:2;font-family:var(--hab-display);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--hab-accent);color:#fff;padding:5px 9px;border-radius:99px;opacity:0;transition:opacity .3s ease}
.hab-home .trail-card.active .badge-now{opacity:1}
.hab-home .trail-card .ph-tag{position:absolute;top:46px;left:16px;z-index:2;font-family:var(--hab-display);font-size:9px;letter-spacing:.03em;color:var(--hab-ivory-70);background:rgba(42,34,27,.34);padding:3px 7px;border-radius:2px}
.hab-home .trail-card .body{position:relative;z-index:2;padding:22px}
.hab-home .trail-card .k{font-family:var(--hab-display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hab-ivory-70);margin-bottom:8px}
.hab-home .trail-card h3{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.hab-home .trail-card p{font-size:13.5px;color:var(--hab-ivory-70);line-height:1.5;max-width:34ch}
.hab-home .trail-card .go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-family:var(--hab-display);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.hab-home .trail-card .go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── trail chips (quick links under the grid) ── */
.hab-home .trail-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.hab-home .trail-chips a{font-family:var(--hab-display);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--hab-ink);background:#fff;border:1px solid var(--hab-hair);border-radius:99px;padding:8px 15px;transition:border-color .2s,background .2s}
.hab-home .trail-chips a:hover{border-color:var(--hab-accent);background:var(--hab-tint)}

/* ───────── Flagship feature ───────── */
/* Wave 10 · ph-tag removed */
.hab-home .stat-pin{position:absolute;z-index:2;background:rgba(20,16,12,.78);backdrop-filter:blur(8px);border:1px solid rgba(245,241,232,.18);border-radius:7px;padding:11px 15px;display:flex;flex-direction:column;gap:1px}
.hab-home .stat-pin b{font-family:var(--hab-display);font-weight:700;font-size:20px;color:var(--hab-ivory)}
.hab-home .stat-pin span{font-size:10.5px;color:var(--hab-ivory-70);letter-spacing:.03em}
.hab-home .stat-pin.p1{top:20px;right:20px}
.hab-home .stat-pin.p2{bottom:20px;left:20px}
/* Wave 10 · em colour removed — scoped <style> block emits palette */
.hab-home .field-notes{margin:26px 0;display:flex;flex-direction:column;gap:1px}
.hab-home .fn{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid rgba(245,241,232,.13)}
.hab-home .fn .idx{font-family:var(--hab-display);font-weight:700;font-size:12px;color:var(--hab-accent-2)}
.hab-home .fn .lab{font-size:13.5px;color:var(--hab-ivory-70)}
.hab-home .fn .val{font-family:var(--hab-display);font-weight:600;font-size:14px;color:var(--hab-ivory)}

/* ───────── Closing ───────── */
.hab-home .hab-closing{position:relative;padding:clamp(80px,12vw,150px) 0;color:var(--section-fg,var(--hab-ivory));overflow:hidden;text-align:center;background-color:var(--section-bg)}
.hab-home .hab-closing .bg{position:absolute;inset:0;background:var(--hab-hero);background-size:cover;background-position:center}
.hab-home .hab-closing .bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(245,241,232,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,232,.05) 1px,transparent 1px);background-size:54px 54px}
.hab-home .hab-closing .scrim{position:absolute;inset:0;background:rgba(20,16,12,.5)}
.hab-home .hab-closing .inner{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:0 clamp(20px,4vw,42px)}
.hab-home .hab-closing .hab-eyebrow{color:var(--section-accent,var(--hab-ivory));opacity:.85}
.hab-home .hab-closing h2{font-size:calc(clamp(32px,5vw,60px) * var(--h-scale,1));font-weight:800;margin-top:14px;letter-spacing:-.025em;color:var(--section-heading,var(--hab-ivory))}
.hab-home .hab-closing h2 em{color:var(--section-accent,var(--hab-accent))}
.hab-home .hab-closing p{font-size:calc(16px * var(--b-scale,1));color:var(--section-fg,var(--hab-ivory));opacity:.78;margin-top:16px;line-height:1.6}
.hab-home .hab-closing .ctas{justify-content:center}

/* ───────── Responsive ───────── */
@media(max-width:900px){
  .hab-home .sec-head,.hab-home .hab-feature .grid{grid-template-columns:1fr}
  .hab-home .sec-head .lead{justify-self:start}
  .hab-home .trail-grid,
  .hab-home .hab-trail[data-grid="four"] .trail-grid,
  .hab-home .hab-trail[data-grid="mosaic"] .trail-grid{grid-template-columns:1fr}
  .hab-home .hab-trail[data-grid="mosaic"] .trail-card.popular{grid-column:auto}
}
@media(max-width:560px){.hab-home .meta-row{gap:20px}}
@media (prefers-reduced-motion: reduce){
  .hab-home .hero-slide.on .bg{animation:none}
  .hab-home .route-overlay path{animation:none}
  .hab-home .scroll-cue .line{animation:none}
  .hab-home .hab-reveal{opacity:1;transform:none}
}

/* ═════════════════════════════ SALE SECTIONS (Wave 5) ═════════════════════════════ */
/* Shared countdown card (hab-countdown.js injects .hab-cd-grid) + two sale sections:
   hab-sale-collections (three collection cards) and hab-sale-hero (full-bleed banner). */

/* ── shared countdown timer card ── */
.hab-home .hab-countdown-wrap{text-align:center}
.hab-home .hab-countdown{display:inline-flex;flex-direction:column;background:var(--hab-forest);border-radius:8px;padding:20px 32px;border-bottom:3px solid var(--hab-sage);box-shadow:0 12px 34px rgba(20,16,12,.22);color:var(--hab-ivory)}
.hab-home .hab-cd-grid{display:flex;align-items:flex-start;justify-content:center;gap:14px}
.hab-home .hab-cd-seg{display:flex;flex-direction:column;align-items:center;min-width:52px}
.hab-home .hab-cd-num{font-family:var(--hab-display);font-weight:700;font-size:48px;line-height:1;letter-spacing:-.02em;color:var(--hab-ivory);font-variant-numeric:tabular-nums}
.hab-home .hab-cd-lbl{margin-top:9px;font-family:var(--hab-mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--hab-accent-2)}
.hab-home .hab-cd-sep{font-family:var(--hab-display);font-weight:700;font-size:40px;line-height:1;color:var(--hab-accent-2);opacity:.45;align-self:flex-start;padding-top:3px}
.hab-home .hab-cd-num.tick{animation:hab-cd-pulse .18s ease}
@keyframes hab-cd-pulse{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.hab-home .hab-cd-expired{margin:0;font-family:var(--hab-display);font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--hab-ivory)}
.hab-home .hab-countdown-note{margin:10px 0 0;font-family:var(--hab-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hab-ivory-70)}

/* ── Section A · hab-sale-collections (Wave 8 Push 3 · 14 Jul 2026) ──
   FULL native-controls edition. Every visual dimension is a var(--sale-*)
   custom property emitted by the section Liquid (see sections/hab-sale-
   collections.liquid). Fallbacks preserve the pre-Push-3 render when
   the merchant hasn't touched a control — except two intentional shifts
   requested by Paul: card aspect defaults to SQUARE (was 4:5) and card
   image fit defaults to CONTAIN (was cover) so transparent product PNGs
   sit balanced within the tile. Section palette still inherits from
   color_scheme via hab-scheme-* cascade in hab-brand.css. */

.hab-home .hab-sale-collections{padding:clamp(48px,7vw,90px) 0;position:relative;background-color:var(--sale-bg,var(--section-bg,transparent))}
.hab-home .hab-sale-collections[data-has-bg-image]::before{content:'';position:absolute;inset:0;background-image:var(--sale-bg-image);background-size:cover;background-position:center;z-index:0;pointer-events:none}
.hab-home .hab-sale-collections[data-has-bg-image]::after{content:'';position:absolute;inset:0;background:var(--sale-bg-overlay,#000);opacity:var(--sale-bg-overlay-alpha,0);z-index:1;pointer-events:none}
.hab-home .hab-sale-collections > .hab-wrap{position:relative;z-index:2}

.hab-home .hab-sale-collections .sale-head{max-width:640px;margin:0 auto clamp(24px,3vw,36px);text-align:center}
.hab-home .hab-sale-collections[data-align="left"]   .sale-head{text-align:left;margin-left:0;margin-right:auto}
.hab-home .hab-sale-collections[data-align="right"]  .sale-head{text-align:right;margin-left:auto;margin-right:0}
.hab-home .hab-sale-collections[data-align="center"] .sale-head{text-align:center}

.hab-home .hab-sale-collections .sale-head__eyebrow{font-family:var(--sale-eyebrow-font,var(--hab-mono));font-size:var(--sale-eyebrow-size,12px);font-weight:var(--sale-eyebrow-weight,600);letter-spacing:var(--sale-eyebrow-letter,.3em);color:var(--sale-eyebrow-color,var(--hab-c-brass,var(--hab-brass)));text-transform:var(--sale-eyebrow-transform,uppercase);display:inline-block;line-height:1.4}

/* Push 3.4 · badge moved out of heading (14 Jul 2026). Heading is now
   normal block flow (no flex row); badge sits on its own line between
   the heading and subheading, honouring sale_align via inline-block +
   text-align inherited from .sale-head. */
.hab-home .hab-sale-collections .sale-head__heading{margin-top:10px;font-family:var(--sale-heading-font,var(--hab-display));font-size:var(--sale-heading-size,44px);font-weight:var(--sale-heading-weight,700);letter-spacing:-.02em;color:var(--sale-heading-color,currentColor);line-height:1.1}

.hab-home .hab-sale-collections .sale-head__badge{display:inline-block;margin:12px 0;background:var(--sale-badge-bg,var(--hab-c-rust,var(--hab-rust)));color:var(--sale-badge-color,var(--hab-c-ivory,var(--hab-ivory)));border-radius:var(--sale-badge-radius,999px);font-size:var(--sale-badge-size,12px);padding:var(--sale-badge-padding-y,4px) var(--sale-badge-padding-x,12px);font-family:var(--hab-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;line-height:1.2}

.hab-home .hab-sale-collections .sale-head__deck{margin-top:12px;font-family:var(--sale-subheading-font,var(--hab-body));font-size:var(--sale-subheading-size,15px);font-weight:var(--sale-subheading-weight,400);line-height:1.6;color:var(--sale-subheading-color,currentColor);opacity:.82}

.hab-home .hab-sale-collections .sale-head__cta{margin-top:16px;font-family:var(--hab-display);font-size:var(--sale-cta-size,14px);font-weight:var(--sale-cta-weight,600);padding:var(--sale-cta-padding-y,14px) var(--sale-cta-padding-x,28px);border-radius:var(--sale-cta-radius,999px);text-decoration:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.hab-home .hab-sale-collections[data-cta-style="primary"]   .sale-head__cta{background:var(--sale-cta-bg,var(--hab-c-brass,var(--hab-brass)));color:var(--sale-cta-color,var(--hab-c-ivory,var(--hab-ivory)));border:1px solid transparent}
.hab-home .hab-sale-collections[data-cta-style="secondary"] .sale-head__cta{background:transparent;color:var(--sale-cta-color,currentColor);border:1px solid var(--sale-cta-bg,currentColor)}
.hab-home .hab-sale-collections[data-cta-style="ghost"]     .sale-head__cta{background:transparent;color:var(--sale-cta-color,currentColor);border:1px solid transparent;padding-left:4px;padding-right:4px}
.hab-home .hab-sale-collections .sale-head__cta:hover,
.hab-home .hab-sale-collections .sale-head__cta:focus-visible{transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,16,12,.12)}

.hab-home .hab-sale-collections .hab-countdown-wrap{margin-bottom:clamp(32px,5vw,52px);text-align:center}
.hab-home .hab-sale-collections[data-align="left"]   .hab-countdown-wrap{text-align:left}
.hab-home .hab-sale-collections[data-align="right"]  .hab-countdown-wrap{text-align:right}
.hab-home .hab-sale-collections[data-align="center"] .hab-countdown-wrap{text-align:center}
/* Push 3.3 · countdown-cluster fix (14 Jul 2026)
   Was: [class*="digits"|"label"] selectors — matched zero elements
   because hab-countdown.js emits classes .hab-cd-num / .hab-cd-lbl /
   .hab-cd-sep (see build() in assets/hab-countdown.js), not "digits"
   or "value" or "label". All 5 countdown font/size/weight/label
   controls were DEAD. Also: L763 hardcode `.hab-home .hab-countdown
   .hab-cd-num { color: var(--hab-ink) }` (spec 0-3-0) beat my old
   L501 parent-color rule via source-order tie → digits rendered Ink
   on Ink scheme → invisible.
   Now: direct .hab-cd-num / .hab-cd-lbl / .hab-cd-sep at spec 0-4-0
   beats both L763 and L451-453 hardcodes. Merchant custom-props on
   the section root reach the digit spans directly. Expired text
   colour also wired via .hab-cd-expired (was blocked by L456 hardcode). */
/* Push 3.4 · countdown 50% shrink (14 Jul 2026). Halved defaults + box
   padding so the frame stays proportional to the smaller numbers.
   Wave-5 L448 hardcodes padding:20px 32px on .hab-countdown (spec 0-2-0);
   this scoped rule (spec 0-3-0) wins with padding:10px 16px. */
.hab-home .hab-sale-collections .hab-countdown{font-variant-numeric:tabular-nums;color:var(--sale-countdown-color,currentColor);padding:10px 16px}
.hab-home .hab-sale-collections .hab-countdown .hab-cd-num{font-family:var(--sale-countdown-font,var(--hab-mono));font-size:var(--sale-countdown-size,22px);font-weight:var(--sale-countdown-weight,700);color:var(--sale-countdown-color,currentColor)}
.hab-home .hab-sale-collections .hab-countdown .hab-cd-lbl{font-size:var(--sale-countdown-label-size,8px);color:var(--sale-countdown-label-color,currentColor);opacity:.75}
.hab-home .hab-sale-collections .hab-countdown .hab-cd-sep{color:var(--sale-countdown-color,currentColor)}
.hab-home .hab-sale-collections .hab-countdown[data-expired="true"]{background:var(--sale-expired-bg,transparent);color:var(--sale-expired-color,currentColor);border:1px solid var(--sale-expired-border,var(--hab-c-brass,var(--hab-brass)));padding:12px 20px;border-radius:8px;display:inline-block}
.hab-home .hab-sale-collections .hab-countdown[data-expired="true"] .hab-cd-expired{color:var(--sale-expired-color,currentColor)}

.hab-home .sale-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sale-card-gap,24px)}
@media (max-width:1024px){.hab-home .sale-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hab-home .sale-grid{grid-template-columns:1fr}}

.hab-home .sale-card{display:flex;flex-direction:column;background:var(--sale-card-bg,#fff);border:1px solid rgba(42,34,27,.08);border-radius:var(--sale-card-radius,12px);overflow:hidden;color:var(--hab-c-ink,var(--hab-ink));text-decoration:none;box-shadow:0 8px 24px rgba(20,16,12,.10);transition:transform .2s ease,box-shadow .2s ease}
.hab-home .sale-card:hover,
.hab-home .sale-card:focus-visible{transform:translateY(calc(var(--sale-card-hover-lift,4px) * -1));box-shadow:0 16px 40px rgba(20,16,12,.16)}
.hab-home .sale-card-media{position:relative;overflow:hidden;background:var(--sale-card-bg,#fff)}
.hab-home .hab-sale-collections[data-card-aspect="square"]        .sale-card-media{aspect-ratio:1/1}
.hab-home .hab-sale-collections[data-card-aspect="portrait-4-5"]  .sale-card-media{aspect-ratio:4/5}
.hab-home .hab-sale-collections[data-card-aspect="landscape-4-3"] .sale-card-media{aspect-ratio:4/3}
.hab-home .sale-card-media img{position:absolute;inset:var(--sale-card-padding,16px);width:calc(100% - (var(--sale-card-padding,16px) * 2));height:calc(100% - (var(--sale-card-padding,16px) * 2));object-fit:var(--sale-card-fit,contain);object-position:center;transition:transform .5s ease}
.hab-home .sale-card:hover .sale-card-media img{transform:scale(1.03)}
.hab-home .sale-card-media__placeholder{position:absolute;inset:0;background:var(--hab-hero)}
.hab-home .sale-badge{position:absolute;top:12px;left:12px;font-family:var(--hab-display);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--sale-card-overlay-bg,var(--hab-c-rust,var(--hab-rust)));color:var(--sale-card-overlay-color,var(--hab-c-ivory,var(--hab-ivory)));padding:6px 11px;border-radius:99px;z-index:3}
.hab-home .sale-card-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 20px 22px}
/* Title selector scoped to .hab-sale-collections (spec 0-3-0) so it wins
   over the cascade-cleanup rules at lines ~1079 and ~1165 which target
   `.hab-home .hab-sale-collections h3` (spec 0-2-1) with hardcoded
   font-size + `color: var(--section-heading)`. Fallback chain matches
   the merchant expectation: block custom_title_color -> section
   sale_card_title_color -> scheme heading -> currentColor. The
   block-level custom_title_color is emitted as an inline style on the
   .sale-card <a> and wins for descendants via CSS custom-prop cascade. */
.hab-home .hab-sale-collections .sale-card-title{font-family:var(--sale-card-title-font,var(--hab-display));font-weight:700;font-size:var(--sale-card-title-size,19px);letter-spacing:-.01em;line-height:1.2;color:var(--sale-card-title-color,var(--section-heading,currentColor))}
.hab-home .sale-card-cta{margin-top:6px;display:inline-flex;align-items:center;gap:8px;font-family:var(--hab-display);font-weight:600;font-size:14px;color:var(--hab-c-sage,var(--hab-sage))}
.hab-home .sale-card-cta svg{stroke:currentColor;flex-shrink:0}

/* ── Section B · hab-sale-hero ── */
.hab-home .hab-sale-hero{position:relative;display:flex;align-items:center;overflow:hidden;color:var(--hab-ivory)}
.hab-home .hab-sale-hero[data-height="compact"]{min-height:400px}
.hab-home .hab-sale-hero[data-height="standard"]{min-height:560px}
.hab-home .hab-sale-hero[data-height="tall"]{min-height:720px}
.hab-home .sale-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hab-home .sale-hero-bg--grad{background:var(--hab-hero)}
.hab-home .sale-hero-scrim{position:absolute;inset:0;background:#14100c;opacity:calc(var(--ov,40)/100)}
.hab-home .sale-hero-inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;gap:16px;padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(40px,6vw,64px)}
.hab-home .hab-sale-hero[data-align="centre"] .sale-hero-inner{align-items:center;text-align:center}
.hab-home .hab-sale-hero[data-align="left"] .sale-hero-inner{align-items:flex-start;text-align:left}
.hab-home .hab-sale-hero[data-align="left"] .hab-countdown-wrap{text-align:left}
.hab-home .sale-hero-chip{font-family:var(--hab-display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--hab-rust);color:var(--hab-ivory);padding:7px 14px;border-radius:99px}
.hab-home .hab-sale-hero .sale-hero-inner .hab-eyebrow{color:var(--hab-accent-2)}
.hab-home .hab-sale-hero h2{font-size:clamp(30px,5vw,60px);font-weight:800;letter-spacing:-.025em;max-width:24ch;color:var(--hab-ivory)}
.hab-home .hab-sale-hero .deck{font-family:var(--hab-body);font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--hab-ivory-70);max-width:52ch}
.hab-home .hab-sale-hero .hab-countdown-wrap{margin-top:6px}
.hab-home .sale-hero-cta{margin-top:8px}

@media(max-width:820px){
  .hab-home .sale-grid{grid-template-columns:1fr}
  .hab-home .hab-countdown{padding:16px 20px}
  .hab-home .hab-cd-grid{gap:10px}
  .hab-home .hab-cd-seg{min-width:44px}
  .hab-home .hab-cd-num{font-size:32px}
  .hab-home .hab-cd-sep{font-size:26px;padding-top:1px}
}
@media (prefers-reduced-motion: reduce){
  .hab-home .hab-cd-num.tick{animation:none}
  .hab-home .sale-card,.hab-home .sale-card-media .bg{transition:none}
}

/* ═════════════════════════════ WAVE 7a ═════════════════════════════ */

/* ── Announce bar rotation (step 6) ──
   Multiple pips stack in the same slot, only .on visible via opacity
   fade. Rotation cadence handled in hab-home.js (6s interval). Single-
   pip case falls through to the legacy inline behaviour. */
.hab-home .hab-announce-track.rotate{position:relative;display:flex;align-items:center;justify-content:center;min-height:1.8em}
.hab-home .hab-announce-track.rotate .hab-pip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .45s ease;pointer-events:none;white-space:nowrap}
.hab-home .hab-announce-track.rotate .hab-pip.on{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .hab-home .hab-announce-track.rotate .hab-pip{transition:none}
}

/* ── Fit teaser (step 4) ──
   Sage band, ivory type, single-line pitch + primary CTA. Content
   sits inline on desktop, stacks on mobile. */
.hab-home .hab-fit-teaser{padding:clamp(32px,4vw,64px) 0;background:var(--hab-sage);color:var(--hab-ivory)}
.hab-home .hab-fit-teaser .fit-teaser-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px)}
.hab-home .hab-fit-teaser .fit-teaser-copy{flex:1 1 auto;min-width:0}
.hab-home .hab-fit-teaser h2{font-family:var(--hab-display);font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;line-height:1.1;margin:0;color:var(--hab-ivory)}
.hab-home .hab-fit-teaser .fit-teaser-pitch{font-family:var(--hab-body);font-size:clamp(14px,1.5vw,16px);line-height:1.5;color:var(--hab-ivory-70);margin:8px 0 0;max-width:60ch}
.hab-home .hab-fit-teaser .fit-teaser-cta{flex:0 0 auto;background:var(--hab-accent);color:var(--hab-ivory)}
.hab-home .hab-fit-teaser .fit-teaser-cta:hover{background:#a58a15}
@media(max-width:760px){
  .hab-home .hab-fit-teaser .fit-teaser-inner{flex-direction:column;align-items:flex-start;gap:20px}
  .hab-home .hab-fit-teaser .fit-teaser-cta{align-self:stretch;justify-content:center}
}

/* ── Why HAB strip (step 5) ──
   3-tile band on sage. League Spartan headings, brass icons, ivory
   body. Tiles collapse to a single column on mobile. */
.hab-home .hab-why-strip{padding:clamp(32px,3.5vw,56px) 0;background:var(--section-bg,var(--hab-sage));color:var(--section-fg,var(--hab-ivory))}
.hab-home .hab-why-strip .hab-why-strip-title{font-family:var(--hab-display);font-weight:800;font-size:calc(clamp(24px,3vw,36px) * var(--h-scale,1));letter-spacing:-.02em;line-height:1.1;text-align:center;color:var(--section-heading,var(--hab-ivory));margin:0 0 24px}
.hab-home .hab-why-strip .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.hab-home .hab-why-strip .why-tile{text-align:center;padding:8px 4px}
.hab-home .hab-why-strip .why-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--section-accent,var(--hab-accent-2));margin-bottom:16px}
.hab-home .hab-why-strip .why-icon svg{width:100%;height:100%}
.hab-home .hab-why-strip .why-head{font-family:var(--hab-display);font-weight:700;font-size:calc(clamp(17px,1.8vw,20px) * var(--h-scale,1));letter-spacing:-.005em;line-height:1.2;color:var(--section-heading,var(--hab-ivory));margin:0 0 8px}
.hab-home .hab-why-strip .why-body{font-family:var(--hab-body);font-size:calc(14.5px * var(--b-scale,1));line-height:1.55;color:var(--section-fg,var(--hab-ivory));opacity:.78;margin:0;max-width:32ch;margin-left:auto;margin-right:auto}
@media(max-width:760px){
  .hab-home .hab-why-strip .why-grid{grid-template-columns:1fr;gap:32px}
  .hab-home .hab-why-strip .why-tile{padding:0 8px}
}

/* ═════════════════════════════ WAVE 7b — Design refinements ═════════════════════════════ */

/* ── (6) Density variants — from data-density on <body>, set in theme.liquid per template ── */
:root { --hab-section-pad-y: clamp(48px, 6vw, 96px); --hab-heading-scale: 1; }
body[data-density="commercial"] { --hab-section-pad-y: clamp(32px, 4vw, 64px); --hab-heading-scale: 0.92; }
body[data-density="editorial"]  { --hab-section-pad-y: clamp(48px, 6vw, 96px); --hab-heading-scale: 1; }
.hab-home .hab-brands, .hab-home .hab-signup, .hab-home .hab-journal, .hab-home .hab-trail, .hab-home .hab-feature{ padding-top: var(--hab-section-pad-y); padding-bottom: var(--hab-section-pad-y); }
/* Why-strip stays tight regardless of density — compact 3-tile band, not a full editorial section */
.hab-home .hab-why-strip{ padding-top: clamp(32px,3.5vw,56px); padding-bottom: clamp(32px,3.5vw,56px); }

/* ── (10) Category grid tile ratio 4:5 portrait — locked design token §10 (updated Wave 7d).
   Previously 16:11 (landscape) — read poorly with the vertical-format product photography
   the category tiles use (cargo/child/dog trailer shots frame better tall). No responsive
   override: same 4:5 on mobile and desktop. Image is a background-image on `.trail-card .bg`
   with `background-size: cover; background-position: center` (line 363) — subject stays
   centred in the taller frame. */
.hab-home .trail-card{ aspect-ratio: 4 / 5; min-height: 0; }
@media(max-width:900px){ .hab-home .trail-card{ aspect-ratio: 4 / 5; min-height: 0; } }

/* ── Mobile hero (<768px) — Wave 7d hotfix: photo top, copy bottom split ──
   Photo gets 55vh full-bleed, no scrim, no copy overlay. Copy sits in a solid
   Ink band below the image with ivory type. Chip row moves inline into the
   copy flow between subhead and CTAs via CSS `order` (with `display: contents`
   on .stage to hoist its children into .hero-inner's flex context).
   No Liquid changes — DOM stays identical to desktop. */
@media(max-width:767px){
  .hab-home .hab-hero{
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    color: var(--hab-ivory, #F5F1E8);
  }

  /* Photo section — 4:5 aspect (Push 3.7, 14 Jul 2026). Was fixed 55vh
     which cropped merchant's 4:5 portrait uploads. aspect-ratio: 4/5
     matches the media_image_mobile intrinsic 800×1000 → no crop.
     Height auto-scales with viewport width. If merchant later uploads
     other aspects, revisit via a mobile_hero_aspect schema control. */
  .hab-home .hab-hero .hero-slides{ position: relative; inset: auto; flex: 0 0 auto; aspect-ratio: 4 / 5; height: auto; width: 100%; z-index: 0; }
  .hab-home .hab-hero .hero-slide{ position: absolute; inset: 0; }
  .hab-home .hab-hero .hero-slide .bg{ position: absolute; inset: 0; background-size: cover; background-position: center; transform: none; animation: none; }
  .hab-home .hab-hero .hero-slide .bg::after{ display: none; } /* kill the desktop grid overlay on mobile */
  .hab-home .hab-hero .hab-hero-video{ width: 100%; height: 100%; object-fit: cover; }
  .hab-home .hab-hero .scrim{ display: none; }
  .hab-home .hab-hero .scroll-cue,
  .hab-home .hab-hero .route-overlay,
  .hab-home .hab-hero .route-rider{ display: none; }

  /* Copy section — ink bg, ivory type, flex-column so children obey `order` */
  .hab-home .hab-hero .hero-inner{
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    background: var(--hab-espresso, #2A221B);
    color: var(--hab-ivory, #F5F1E8);
    padding: 32px 20px 40px;
    margin: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* Hoist .stage children into .hero-inner's flex context so `order` can shuffle them alongside .top-tags */
  .hab-home .hab-hero .hero-inner .stage{ display: contents; }

  /* Ordering: eyebrow → h1 → subhead → chip row → CTAs */
  .hab-home .hab-hero .hero-inner .stage .hab-eyebrow{ order: 1; }
  .hab-home .hab-hero .hero-inner .stage h1{ order: 2; }
  .hab-home .hab-hero .hero-inner .stage .lede{ order: 3; }
  .hab-home .hab-hero .hero-inner .top-tags{ order: 4; }
  .hab-home .hab-hero .hero-inner .stage .ctas{ order: 5; }

  /* Type sizing — Paul's spec */
  .hab-home .hab-hero .hero-inner .hab-eyebrow{
    color: var(--hab-accent-2, #D8B24A);
    font-family: var(--hab-display, 'League Spartan');
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 6px;
  }
  .hab-home .hab-hero .hero-inner h1{
    color: var(--hab-ivory, #F5F1E8);
    font-family: var(--hab-display, 'League Spartan');
    font-weight: 700;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 0;
  }
  .hab-home .hab-hero .hero-inner .lede{
    color: rgba(245,241,232,.88);
    font-size: 15px;
    line-height: 1.55;
    margin: 20px 0 0;
    max-width: none;
  }

  /* Chip row — brass outline pills, 20px gap above, wraps to a new row if needed.
     `position: static` overrides the desktop `.top-tags{position:absolute;top:108px;left:0}`
     rule (line 327) — without it, the element is out-of-flow and overlaps the subhead. */
  .hab-home .hab-hero .hero-inner .top-tags{
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    top: auto; left: auto; right: auto; bottom: auto;
  }
  .hab-home .hab-hero .hero-inner .top-tags .field-tag{
    display: inline-block;
    padding: 5px 10px;
    font-family: var(--hab-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hab-accent-2, #D8B24A);
    background: transparent;
    border: 1px solid rgba(216, 178, 74, .5);
    border-radius: 99px;
    line-height: 1.3;
    white-space: nowrap;
  }

  /* CTAs — full-width, stacked, 52px height */
  .hab-home .hab-hero .hero-inner .ctas{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    width: 100%;
  }
  .hab-home .hab-hero .hero-inner .ctas > .hab-btn,
  .hab-home .hab-hero .hero-inner .ctas > a{
    width: 100%;
    height: 52px;
    padding: 0 20px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .hab-home .hab-hero .hero-inner .hab-btn-primary{ background: var(--hab-accent, #D8B24A); color: var(--hab-ivory, #F5F1E8); border: 0; }
  .hab-home .hab-hero .hero-inner .hab-btn-line{ background: transparent; color: var(--hab-ivory, #F5F1E8); border: 1.5px solid rgba(245,241,232,.7); }
}

/* ── (9) Sale strip tone-down — brass outline countdown, heading -12% ── */
.hab-home .hab-sale-collections .sale-head h2{ font-size: clamp(24px, 3.3vw, 40px); } /* was 28-46, -12% */
.hab-home .hab-countdown{ background: transparent; border: 2px solid var(--hab-accent-2); box-shadow: none; color: var(--hab-ink); }
.hab-home .hab-countdown .hab-cd-num{ color: var(--hab-ink); }
.hab-home .hab-countdown .hab-cd-lbl{ color: var(--hab-accent); }
.hab-home .hab-countdown .hab-cd-sep{ color: var(--hab-accent-2); }
.hab-home .hab-countdown-note{ color: rgba(42,34,27,.6); }

/* ── (3) Sticky WhatsApp chip — bottom-right sage circle. IO-triggered visibility. ── */
.hab-whatsapp-chip{ position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; background: var(--hab-sage, #5C654D); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px -6px rgba(20,16,12,.4); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s ease; }
.hab-whatsapp-chip.on{ opacity: 1; visibility: visible; transform: translateY(0); }
.hab-whatsapp-chip:hover{ transform: translateY(-4px); }
.hab-whatsapp-chip svg{ width: 26px; height: 26px; fill: #fff; }
.hab-whatsapp-sentinel{ position: absolute; top: 30vh; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media (prefers-reduced-motion: reduce){ .hab-whatsapp-chip{ transition: opacity .2s ease; transform: none; } .hab-whatsapp-chip.on{ transform: none; } }

/* Wave 14.0 · dormant .brand-counter block pruned (class never emitted by hab-brands-strip.liquid — mobile-counter feature was never wired up). */

/* ── (8) Closing CTA — simplified button hierarchy ── */
.hab-home .hab-closing .ctas{ justify-content: center; gap: 20px; align-items: center; flex-wrap: wrap; }
.hab-home .hab-closing-cta__cta-primary{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px; border-radius:3px;
  text-decoration:none; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hab-home .hab-closing .cta-text-link{ font-family: var(--hab-display); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hab-ivory); text-decoration: underline; text-underline-offset: 4px; opacity: .85; }
.hab-home .hab-closing .cta-text-link:hover{ opacity: 1; }

/* ── (2) Fit teaser secondary button (outlined) — used in Hero + Closing CTA ── */
.hab-home .hab-btn-outline{ background: transparent; color: var(--hab-ivory); border: 1.5px solid rgba(245,241,232,.5); }
.hab-home .hab-btn-outline:hover{ background: rgba(245,241,232,.1); border-color: var(--hab-ivory); }

/* ── (1) Hero video positioning + reduced-motion fallback ── */
.hab-home .hab-hero-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }

/* ── YouTube / Vimeo iframe variant ──
   Iframes can't `object-fit: cover`, so we scale them to 16:9 and clip the
   overflow. When the viewport is WIDER than 16:9, width fills 100% and height
   grows to 56.25vw (16:9). When TALLER than 16:9, height fills 100vh and width
   grows to 177.78vh. The excess is hidden by `.hab-hero { overflow: hidden }`
   from the base rule. Iframe stays behind the copy via z-index 0. */
.hab-home .hab-hero .hab-hero-video--embed{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  border: 0;
}
/* Wave 7e hotfix — start invisible, fade in on ready. For iframes the onload
   handler (inline) adds .is-ready after 600ms. For direct <video>, hab-home.js
   adds .is-ready after 600ms on loadeddata. Total perceived transition:
   ~400ms load + 600ms hold + 300ms fade = ~1.3s.
   Applies to both iframe embed (--embed) and direct video (--direct). */
.hab-home .hab-hero .hab-hero-video--embed,
.hab-home .hab-hero .hab-hero-video--direct{
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.hab-home .hab-hero .hab-hero-video--embed.is-ready,
.hab-home .hab-hero .hab-hero-video--direct.is-ready{
  opacity: 1;
}

/* Wave 7e hotfix — Vignette masks over the top/bottom of hero-slides ONLY
   when an iframe embed is present. YouTube can re-show chrome on hover /
   pause / replay; these soft top+bottom gradients hide any residual title
   bar or progress bar behind an 80px darkening at each edge. :has() scoping
   means static-image heroes stay clean.

   Regression fix 2026-07-09: an earlier version of this block declared
   `.hero-slides{ position: relative; }` on the :has() selector — but the
   base `.hero-slides` at line 304 is `position: absolute; inset: 0`. Setting
   position:relative dropped `inset:0` support, collapsed .hero-slides to zero
   height, and killed the entire hero media rendering. `.hero-slides` is
   already `position: absolute` (a valid positioning context), so the
   ::before/::after pseudo-elements can position against it directly — no
   override needed. */
.hab-home .hab-hero:has(.hab-hero-video--embed, .hab-hero-video--direct) .hero-slides::before,
.hab-home .hab-hero:has(.hab-hero-video--embed, .hab-hero-video--direct) .hero-slides::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* Wave 7e hotfix 2 — bumped from 80px to 120px so YouTube's title strip
     (up to ~90px on wide viewports) can't peek out. Bumped z-index from 1
     to 2 because iframes create their own stacking context that some
     browsers render above sibling pseudo-elements at z-index:1 even when
     the iframe itself is z-index:0. */
  height: 120px;
  z-index: 2;
  pointer-events: none;
}
.hab-home .hab-hero:has(.hab-hero-video--embed, .hab-hero-video--direct) .hero-slides::before{
  top: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
.hab-home .hab-hero:has(.hab-hero-video--embed, .hab-hero-video--direct) .hero-slides::after{
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
/* Cinematic-frame iframe letterbox scaling — the iframe must OVERFLOW the
   viewport-height section and get clipped by overflow:hidden. Non-cinematic
   frames sit at their own aspect-ratio, so the iframe just fills the parent
   (rules above cover that). */
@media (min-aspect-ratio: 16/9){
  .hab-home .hab-hero[data-frame="cinematic"] .hab-hero-video--embed{
    height: 56.25vw;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
  }
}
@media (max-aspect-ratio: 16/9){
  .hab-home .hab-hero[data-frame="cinematic"] .hab-hero-video--embed{
    width: 177.78vh;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
  }
}

/* Wave 7e hotfix — Frame aspect ratio control
   ------------------------------------------------------------------
   `data-frame` on the section root swaps the hero from viewport-height
   cinematic mode into a fixed aspect-ratio frame. Cinematic keeps the
   base `.hab-hero{min-height:100vh}` at line 303. Fixed ratios ELECT out
   of that by declaring their own aspect-ratio + min-height:0. Mobile
   photo/copy split (Wave 7d) still applies — the .hero-slides row
   respects the aspect on mobile so the frame ratio drives the photo box. */
@media (min-width: 768px){
  .hab-home .hab-hero[data-frame="16-9"]{ min-height: 0; aspect-ratio: 16 / 9; align-items: stretch; }
  .hab-home .hab-hero[data-frame="21-9"]{ min-height: 0; aspect-ratio: 21 / 9; align-items: stretch; }
  .hab-home .hab-hero[data-frame="4-5"] { min-height: 0; aspect-ratio: 4 / 5;  align-items: stretch; }
  .hab-home .hab-hero[data-frame="1-1"] { min-height: 0; aspect-ratio: 1 / 1;  align-items: stretch; }
}
/* Mobile frame-aspect coupling — DELETED Push 3.8 (14 Jul 2026).
   Was 5 rules at spec 0-4-0 forcing .hero-slides to the merchant's
   desktop frame_aspect on mobile too (16/9 landscape cropped merchant's
   4:5 portrait uploads). Push 3.7's .hab-home .hab-hero .hero-slides
   rule at L670 (spec 0-3-0) now owns mobile aspect uncontested → 4:5
   for all merchants. If per-template mobile aspect control is needed
   later, add a dedicated mobile_hero_aspect schema setting rather than
   reusing the desktop frame_aspect coupling. */

@media (prefers-reduced-motion: reduce){
  /* Direct <video>: hab-home.js pauses it and strips autoplay (line 229-232),
     poster attribute stays visible → static image, no motion.
     Iframe: no JS control, so hide entirely and let the poster .bg div behind
     it show through. */
  .hab-home .hab-hero-video{ animation: none !important; }
  .hab-home .hab-hero .hab-hero-video--embed{ display: none !important; }
}

/* ── Wave 7b hotfix 2 — Closing CTA redesigned button hierarchy ──
   Row 1: primary pair (brass filled + sage outlined w/ phone glyph)
   Row 2: whispered brass eyebrow tertiary link (fit teaser)
   Mobile <768px: Row 1 stacks full-width, Row 2 stays centered. */
.hab-home .hab-closing__row-primary,
.hab-home .hab-closing-cta__row-primary{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:16px;
}
.hab-home .hab-closing__row-tertiary,
.hab-home .hab-closing-cta__row-tertiary{
  margin-top:20px; text-align:center;
}
.hab-home .hab-closing-cta__cta-secondary{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px; border-radius:3px;
  text-decoration:none; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hab-home .hab-closing-cta__cta-tertiary{
  display:inline-block; padding:6px 0;
  font-family:var(--hab-display,'League Spartan');
  font-weight:700; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hab-accent,#D8B24A);
  text-decoration:none;
}
.hab-home .hab-closing-cta__cta-tertiary:hover{ text-decoration:underline; text-underline-offset:4px; }
@media(max-width:767px){
  .hab-home .hab-closing-cta__row-primary{ flex-direction:column; gap:12px; }
  .hab-home .hab-closing-cta__row-primary > *{ width:100%; justify-content:center; text-align:center; }
  .hab-home .hab-closing-cta__cta-primary{ padding:14px 20px; }
  .hab-home .hab-closing-cta__cta-secondary{ padding:14px 20px; }
}

/* ═════════════════════════════ WAVE 7c — Hybrid section style controls ═════════════════════════════ */

/* 5 named schemes, applied via `.hab-scheme-<name>` on the section root. Emit --section-*
   CSS vars scoped to the section; individual color pickers in the schema can override
   the same vars via inline style="" and still win because they cascade after the class. */
.hab-home .hab-scheme-ivory {
  --section-bg: #F5F1E8;
  --section-fg: #2A221B;
  --section-heading: #2A221B;
  --section-accent: #D8B24A;
  --section-btn-bg: #D8B24A;
  --section-btn-label: #F5F1E8;
  --section-link: #5C654D;
}
.hab-home .hab-scheme-sage {
  --section-bg: #5C654D;
  --section-fg: #F5F1E8;
  --section-heading: #F5F1E8;
  --section-accent: #D8B24A;
  --section-btn-bg: #D8B24A;
  --section-btn-label: #F5F1E8;
  --section-link: #F5F1E8;
}
.hab-home .hab-scheme-ink {
  --section-bg: #2A221B;
  --section-fg: #F5F1E8;
  --section-heading: #F5F1E8;
  --section-accent: #D8B24A;
  --section-btn-bg: #D8B24A;
  --section-btn-label: #F5F1E8;
  --section-link: #D8B24A;
}
.hab-home .hab-scheme-white {
  --section-bg: #FFFFFF;
  --section-fg: #2A221B;
  --section-heading: #2A221B;
  --section-accent: #5C654D;
  --section-btn-bg: #5C654D;
  --section-btn-label: #F5F1E8;
  --section-link: #5C654D;
}
.hab-home .hab-scheme-brass {
  --section-bg: #D8B24A;
  --section-fg: #F5F1E8;
  --section-heading: #F5F1E8;
  --section-accent: #F5F1E8;
  --section-btn-bg: #F5F1E8;
  --section-btn-label: #2A221B;
  --section-link: #F5F1E8;
}

/* Typography — base font sizes + scale from data-heading-size / data-body-size on section root */
:root {
  --h1-base: clamp(40px, 5.4vw, 62px);
  --h2-base: clamp(28px, 3.4vw, 40px);
  --h3-base: clamp(20px, 2.2vw, 26px);
  --body-base: 16px;
  --body-sm: 14px;
  --body-lg: 18px;
}
.hab-home [data-heading-size="small"]  { --h-scale: 0.85; }
.hab-home [data-heading-size="medium"] { --h-scale: 1.0; }
.hab-home [data-heading-size="large"]  { --h-scale: 1.2; }
.hab-home [data-heading-size="xlarge"] { --h-scale: 1.45; }
.hab-home [data-body-size="small"]     { --b-scale: 0.9; }
.hab-home [data-body-size="medium"]    { --b-scale: 1.0; }
.hab-home [data-body-size="large"]     { --b-scale: 1.15; }

/* Section width containers — `.hab-*__inner` (or `.hab-wrap`, `.inner`) inside a section root
   with `data-width`. Sections without explicit width control inherit their existing layout. */
.hab-home [data-width="page"]   .hab-wrap,
.hab-home [data-width="page"]   .hab-scheme-inner,
.hab-home .hab-closing[data-width="page"]   .inner { max-width: 1280px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 42px); }
.hab-home [data-width="narrow"] .hab-wrap,
.hab-home [data-width="narrow"] .hab-scheme-inner,
.hab-home .hab-closing[data-width="narrow"] .inner { max-width: 720px;  margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.hab-home [data-width="full"]   .hab-wrap,
.hab-home [data-width="full"]   .hab-scheme-inner,
.hab-home .hab-closing[data-width="full"]   .inner { max-width: none;   margin-inline: 0;    padding-inline: clamp(16px, 4vw, 48px); }

/* Background-image overlay for --section-bg-image with opacity control */
.hab-home [data-has-bg-image="true"] {
  background-image: var(--section-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ══════════════════════════════════════════════════════════════
   Wave 7c batch 2b — CSS bind: scheme picker actively re-tints
   ──────────────────────────────────────────────────────────────
   Batches 1, 2a, 2b: 17 sections carry a `.hab-scheme-<name>` class
   on their root, and the scheme classes higher up set `--section-bg`,
   `--section-fg`, `--section-heading`, `--section-accent` on that
   element. Existing per-section rules that hardcoded colours run
   before these — so we re-declare the top-5 colour bindings here,
   AFTER those rules, at matching specificity: source order wins ties.

   Not touching: .hab-hero (still driven by body[data-cat] category
   palette; scheme picker on hero is a placeholder until a future
   refactor collapses the two systems).
   ══════════════════════════════════════════════════════════════ */

/* Root background + text colour for all 17 scheme-aware sections */
.hab-home .hab-announce,
.hab-home .hab-brands,
.hab-home .hab-trail,
.hab-home .hab-fit-teaser,
.hab-home .hab-journal,
.hab-home .hab-signup,
.hab-home .hab-sale-collections,
.hab-home .hab-reviews,
.hab-home .hab-brandhub,
.hab-home .hab-brand,
.hab-home .hab-founder,
.hab-home .hab-faq,
.hab-home .hab-shelf,
.hab-home .hab-feature,
.hab-home .hab-sale-hero {
  background-color: var(--section-bg);
  color: var(--section-fg);
}

/* Headings inside — inherit scheme heading colour unless a per-section rule pins otherwise */
.hab-home .hab-announce h1,   .hab-home .hab-announce h2,   .hab-home .hab-announce h3,
.hab-home .hab-brands h1,     .hab-home .hab-brands h2,     .hab-home .hab-brands h3,
.hab-home .hab-trail h1,      .hab-home .hab-trail h2,      .hab-home .hab-trail h3,
.hab-home .hab-fit-teaser h1, .hab-home .hab-fit-teaser h2, .hab-home .hab-fit-teaser h3,
.hab-home .hab-journal h1,    .hab-home .hab-journal h2,    .hab-home .hab-journal h3,
.hab-home .hab-signup h1,     .hab-home .hab-signup h2,     .hab-home .hab-signup h3,
.hab-home .hab-sale-collections h1, .hab-home .hab-sale-collections h2, .hab-home .hab-sale-collections h3,
.hab-home .hab-reviews h1,    .hab-home .hab-reviews h2,    .hab-home .hab-reviews h3,
.hab-home .hab-brandhub h1,   .hab-home .hab-brandhub h2,   .hab-home .hab-brandhub h3,
.hab-home .hab-brand h1,      .hab-home .hab-brand h2,      .hab-home .hab-brand h3,
.hab-home .hab-founder h1,    .hab-home .hab-founder h2,    .hab-home .hab-founder h3,
.hab-home .hab-faq h1,        .hab-home .hab-faq h2,        .hab-home .hab-faq h3,
.hab-home .hab-shelf h1,      .hab-home .hab-shelf h2,      .hab-home .hab-shelf h3,
.hab-home .hab-feature h1,    .hab-home .hab-feature h2,    .hab-home .hab-feature h3,
.hab-home .hab-sale-hero h1,  .hab-home .hab-sale-hero h2,  .hab-home .hab-sale-hero h3 {
  color: var(--section-heading);
}

/* Accents — eyebrows, chips, badges, italic emphasis */
.hab-home .hab-announce .hab-eyebrow, .hab-home .hab-announce .hab-pip,
.hab-home .hab-brands .hab-eyebrow,
.hab-home .hab-trail .hab-eyebrow,
.hab-home .hab-fit-teaser .hab-eyebrow,
.hab-home .hab-journal .hab-eyebrow,
.hab-home .hab-signup .hab-eyebrow,
.hab-home .hab-sale-collections .hab-eyebrow, .hab-home .hab-sale-collections .sale-chip,
.hab-home .hab-reviews .hab-eyebrow,
.hab-home .hab-brandhub .hab-eyebrow,
.hab-home .hab-brand .hab-eyebrow,
.hab-home .hab-founder .hab-eyebrow,
.hab-home .hab-faq .hab-eyebrow,
.hab-home .hab-shelf .hab-eyebrow,
.hab-home .hab-feature .hab-eyebrow,
.hab-home .hab-sale-hero .hab-eyebrow, .hab-home .hab-sale-hero .sale-hero-chip {
  color: var(--section-accent);
}

/* Italic emphasis in headings (the highlighted word) — scheme accent by default */
.hab-home .hab-announce em, .hab-home .hab-brands em, .hab-home .hab-trail em,
.hab-home .hab-fit-teaser em, .hab-home .hab-journal em, .hab-home .hab-signup em,
.hab-home .hab-sale-collections em, .hab-home .hab-reviews em, .hab-home .hab-brandhub em,
.hab-home .hab-brand em, .hab-home .hab-founder em, .hab-home .hab-faq em,
.hab-home .hab-shelf em, .hab-home .hab-feature em, .hab-home .hab-sale-hero em {
  color: var(--section-accent);
}

/* ══════════════════════════════════════════════════════════════
   Wave 7c deferral 1 — heading + body font-size bindings
   ──────────────────────────────────────────────────────────────
   Bind top-3 typography selectors per section (h1 where relevant,
   h2 for main heading, p for body) to base font-size vars * h-scale
   / b-scale. Merchant "Heading size" and "Body text size" selects
   now visibly change size.

   These rules come AFTER all section-specific font-size hardcodes
   in the file — source order wins ties on specificity. Sections
   where h2 already had specific-purpose rules (why-strip title,
   closing h2) already use calc(existing-clamp * var(--h-scale, 1))
   from batch 1 and stay as-is; the block below applies to the
   remaining 17 sections.
   ══════════════════════════════════════════════════════════════ */

/* h1 — used by hero */
.hab-home .hab-hero h1 { font-size: calc(var(--h1-base) * var(--h-scale, 1)); }

/* h2 — the main heading in most sections */
.hab-home .hab-announce h2,
.hab-home .hab-brands h2,
.hab-home .hab-trail h2,
.hab-home .hab-fit-teaser h2,
.hab-home .hab-journal h2,
.hab-home .hab-signup h2,
.hab-home .hab-sale-collections h2,
.hab-home .hab-reviews h2,
.hab-home .hab-brandhub h2,
.hab-home .hab-brand h2,
.hab-home .hab-founder h2,
.hab-home .hab-faq h2,
.hab-home .hab-shelf h2,
.hab-home .hab-feature h2,
.hab-home .hab-sale-hero h2 {
  font-size: calc(var(--h2-base) * var(--h-scale, 1));
}

/* h3 — subheadings (e.g. why-strip tile heads already bound via .why-head, sale-collections shelf heads) */
.hab-home .hab-brands h3,
.hab-home .hab-trail h3,
.hab-home .hab-fit-teaser h3,
.hab-home .hab-journal h3,
.hab-home .hab-sale-collections h3,
.hab-home .hab-reviews h3,
.hab-home .hab-brandhub h3,
.hab-home .hab-brand h3,
.hab-home .hab-founder h3,
.hab-home .hab-faq h3,
.hab-home .hab-shelf h3,
.hab-home .hab-feature h3 {
  font-size: calc(var(--h3-base) * var(--h-scale, 1));
}

/* Body p — main content paragraph */
.hab-home .hab-announce p,
.hab-home .hab-brands p,
.hab-home .hab-trail p,
.hab-home .hab-fit-teaser p,
.hab-home .hab-journal p,
.hab-home .hab-signup p,
.hab-home .hab-sale-collections p,
.hab-home .hab-reviews p,
.hab-home .hab-brandhub p,
.hab-home .hab-brand p,
.hab-home .hab-founder p,
.hab-home .hab-faq p,
.hab-home .hab-shelf p,
.hab-home .hab-feature p,
.hab-home .hab-sale-hero p,
.hab-home .hab-hero p {
  font-size: calc(var(--body-base) * var(--b-scale, 1));
}
/* Wave 27.17 · hero subhead <p> inherits typography from parent <div class="lede">
   inline style (font-size/family/weight/colour set via Theme Editor). Without this
   the rule above beat the div's inline emission because <p> is the actual text
   container. Specificity 0-0-4-1 wins over 0-0-3-1. */
.hab-home .hab-hero .lede p {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   Wave 7c deferral 2 — hero scheme priority
   ──────────────────────────────────────────────────────────────
   Category palette (body[data-cat]) is the automatic default.
   When merchant picks a non-default scheme on the hero, Liquid
   emits data-scheme-active="true" on the section root, and the
   rules below take over — scheme --section-* vars win.
   Default hero scheme is "ink" (matches the dark cinematic
   look); anything else = merchant override.
   ══════════════════════════════════════════════════════════════ */

.hab-home .hab-hero[data-scheme-active="true"] {
  background: var(--section-bg);
  color: var(--section-fg);
}
.hab-home .hab-hero[data-scheme-active="true"] h1,
.hab-home .hab-hero[data-scheme-active="true"] h2,
.hab-home .hab-hero[data-scheme-active="true"] h3 {
  color: var(--section-heading);
}
.hab-home .hab-hero[data-scheme-active="true"] em,
.hab-home .hab-hero[data-scheme-active="true"] .hab-eyebrow {
  color: var(--section-accent);
}
.hab-home .hab-hero[data-scheme-active="true"] p {
  color: var(--section-fg);
  opacity: .82;
}

/* ══════════════════════════════════════════════════════════════
   Wave 7d — Mobile fixes 2/3/4
   ══════════════════════════════════════════════════════════════ */

/* Fix 2 — Why HAB strip tighter on mobile (<768px) */
@media(max-width:767px){
  .hab-home .hab-why-strip{ padding-top: 40px; padding-bottom: 40px; }
  .hab-home .hab-why-strip .why-grid{ gap: 32px; }
  .hab-home .hab-why-strip .why-icon{ margin-bottom: 8px; }
  .hab-home .hab-why-strip .why-head{ margin-bottom: 6px; }
  .hab-home .hab-why-strip .why-body{ font-size: calc(14px * var(--b-scale, 1)); }
}

/* Fix 3+4 — Carousel base (applies to reviews + journal wrappers).
   Desktop keeps existing grid layout (carousel__track behaves like a grid at ≥768px). */
.hab-home [data-carousel]{ position: relative; }
.hab-home [data-carousel] .carousel__dots{ display: none; }

@media(max-width:767px){
  /* Track becomes a horizontal scroll strip */
  .hab-home [data-carousel] .carousel__track{
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 20px;
    padding: 4px 20px 8px;
    margin: 0 -20px;
    grid-template-columns: none; /* neutralise desktop grid */
  }
  .hab-home [data-carousel] .carousel__track::-webkit-scrollbar{ display: none; }
  .hab-home [data-carousel] .carousel__track{ scrollbar-width: none; }
  .hab-home [data-carousel] .carousel__slide{
    flex: 0 0 calc(100% - 32px);
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  /* Dots row below the track */
  .hab-home [data-carousel] .carousel__dots{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 0;
  }
  .hab-home [data-carousel] .carousel__dot{
    width: 8px; height: 8px; padding: 0;
    border-radius: 50%;
    border: 1px solid var(--hab-accent, #D8B24A);
    background: transparent;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .hab-home [data-carousel] .carousel__dot.is-active{
    background: var(--hab-accent, #D8B24A);
    transform: scale(1.15);
  }
  .hab-home [data-carousel] .carousel__dot:focus-visible{
    outline: 2px solid var(--hab-accent-2, #D8B24A);
    outline-offset: 2px;
  }

  /* Fix 3 — reviews specifics: each card fills viewport-width minus padding, min-height for consistency */
  .hab-home .hab-reviews .reviews-carousel .review{
    min-height: 240px;
  }

  /* Wave 11.0 · dormant `.journal-carousel .post` mobile block pruned — old carousel markup superseded by `.hab-journal__*`. */
}

/* ══════════════════════════════════════════════════════════════
   Wave 7d hotfix 2 — collision + variant swatch fixes
   ══════════════════════════════════════════════════════════════ */

/* Fix 2 — Avone return-to-top vs HAB WhatsApp chip.
   Avone's button is #site-scroll (fixed, right:20px, bottom by default).
   On mobile: hide it entirely (native scroll gesture suffices).
   On desktop: move to bottom-left so it stops fighting WhatsApp for the corner. */
@media(max-width:767px){
  #site-scroll,
  .back-to-top,
  [class*="back-to-top"],
  .scroll-to-top{ display: none !important; }
}
@media(min-width:768px){
  #site-scroll,
  .back-to-top,
  [class*="back-to-top"],
  .scroll-to-top{
    right: auto !important;
    left: 20px !important;
    bottom: 20px !important;
  }
}
/* Belt-and-braces: WhatsApp chip always wins z-index */
.hab-whatsapp-chip{ z-index: 999 !important; }

/* Fix 3 — Product card variant thumbs horizontal on mobile.
   Avone renders <ul class="gridSwatches"><li class="swatch ...">. Existing rule
   gives .gridSwatches li display:inline-block but something upstream is stacking
   them vertically on narrow viewports. Force flex-row wrap and normalise size.
   Applied on all viewports (safe — matches the intended horizontal layout),
   with the wildcard list as a safety net for other themes / renamed selectors. */
.gridSwatches,
.product-card__swatches,
.variant-swatches,
.card-variants,
.product-variants,
.js-variant-images{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  max-width: 100%;
  padding: 0;
  margin-top: 10px;
  list-style: none;
}
.gridSwatches > li,
.gridSwatches > .swatch,
.product-card__swatches > *,
.variant-swatches > *,
.card-variants > *,
.product-variants > *,
.js-variant-images > *{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   Wave 7d hotfix 3 — Collection page belt-and-braces
   ──────────────────────────────────────────────────────────────
   With the CSS gate lifted (theme.liquid loads hab-home.css on
   every template now), hotfix 2's `.gridSwatches` rule already
   applies on collection pages. This block is a safety net for
   any other swatch container class Avone or a plugin might use
   on `/collections/*` — scoped to `body.template-collection` so
   we don't touch PDP swatches, cart drawer swatches, etc.
   ══════════════════════════════════════════════════════════════ */
body.template-collection ul[class*="Swatch"],
body.template-collection [class*="swatch"]{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}
body.template-collection ul[class*="Swatch"] > *,
body.template-collection [class*="swatch"] > *{
  flex: 0 0 auto;
}

/* Ensure the WhatsApp chip renders correctly on every template — not just where
   Avone's own CSS happens to leave the corner alone. Belt-and-braces coordinates
   duplicated at hab-home.css:586. */
.hab-whatsapp-chip{ position: fixed !important; right: 20px !important; bottom: 20px !important; z-index: 999 !important; }

/* ══════════════════════════════════════════════════════════════
   Wave 7d hotfix — Category tile redesign v2
   ──────────────────────────────────────────────────────────────
   New markup on `.trail-card--v2`: big top-left label (League Spartan
   800, uppercase) + small "Collection" eyebrow underneath (IBM Plex
   Serif). Product image is a `background-image` on the `.bg` child,
   sized `contain` and pinned `center bottom` so the trailer sits in
   the lower 2/3 of the tile without cropping.

   Tile background colour comes from Liquid inline style (per-tile,
   picked from an 8-colour palette via the metaobject). Text colour
   auto-inverts via `--tile-fg` — ink on ivory/sand, ivory on the
   rest.

   Legacy `.trail-card` markup (Dynamic route_card blocks + collection-
   ref legacy tiles) unchanged and unaffected — v2 rules only match
   the modifier class. Base `.trail-card` layout at hab-home.css:361–376
   still applies (position:relative, border-radius, overflow:hidden,
   flex column, transitions, hover lift, aspect-ratio from :564).
   The v2 modifier flips `justify-content` and swaps in top-anchored
   padding + new type selectors.
   ══════════════════════════════════════════════════════════════ */
.hab-home .trail-card--v2 {
  justify-content: flex-start;
  padding: 28px 28px 0;
  border-width: 0;
  border-style: solid;
  color: var(--tile-fg, #F5F1E8);
  min-height: 0;
  /* background-color set inline per tile; border-width: 1px emitted inline per tile when merchant configures border source/custom (Wave 9.9.5 Mode B) */
}
.hab-home .trail-card--v2 .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  transform: none;
  transition: transform .4s ease;
}
.hab-home .trail-card--v2:hover .bg {
  transform: translateY(-6px);
}
.hab-home .trail-card--v2 .trail-card__label {
  position: relative;
  z-index: 2;
  font-family: var(--hab-display, 'League Spartan', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--tile-fg, #F5F1E8);
  text-transform: uppercase;
  margin: 0;
}
.hab-home .trail-card--v2 .trail-card__eyebrow {
  position: relative;
  z-index: 2;
  font-family: var(--hab-body, 'IBM Plex Serif', Georgia, serif);
  font-weight: 400;
  font-size: 14px;
  color: var(--tile-fg, #F5F1E8);
  opacity: 0.88;
  margin-top: 6px;
  text-transform: none;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .hab-home .trail-card--v2 { padding: 20px 20px 0; }
  .hab-home .trail-card--v2 .trail-card__label { font-size: clamp(40px, 12vw, 56px); }
}

/* ══════════════════════════════════════════════════════════════
   Wave 7e follow-up — Category grid: full customizer control
   ──────────────────────────────────────────────────────────────
   Every section- and block-level control from the schema maps to a
   CSS custom property or data attribute set inline by Liquid.
   Fallback pattern: `var(--x, existing-value)` — when Liquid doesn't
   emit the custom property (merchant left the setting blank), the
   `var()` falls through to the current visual default. So the pre-
   push visual is preserved when merchant hasn't touched controls.
   ══════════════════════════════════════════════════════════════ */

/* Section head — eyebrow + headline + sub-headline colours + headline size */
.hab-home .hab-trail .sec-head .hab-eyebrow{
  color: var(--grid-eyebrow-color, var(--section-accent, var(--hab-accent-2, #D8B24A)));
}
.hab-home .hab-trail .sec-head h2{
  color: var(--grid-headline-color, var(--section-heading, inherit));
  font-size: calc(var(--grid-headline-size, 40px) * var(--h-scale, 1));
}
.hab-home .hab-trail .sec-head .lead{
  color: var(--grid-sub-headline-color, inherit);
  opacity: var(--grid-sub-headline-opacity, .78);
}

/* Grid gap driven by section root */
.hab-home .hab-trail .trail-grid{ gap: var(--grid-card-gap, 18px); }

/* Card radius driven by section root */
.hab-home .hab-trail .trail-card{ border-radius: var(--grid-card-radius, 8px); }

/* Card aspect ratio — data attr on section root */
.hab-home .hab-trail[data-aspect="1-1"] .trail-card{ aspect-ratio: 1 / 1; }
.hab-home .hab-trail[data-aspect="4-5"] .trail-card{ aspect-ratio: 4 / 5; }
.hab-home .hab-trail[data-aspect="4-3"] .trail-card{ aspect-ratio: 4 / 3; }

/* Per-tile label size + colour — inline custom props on the anchor */
.hab-home .trail-card--v2 .trail-card__label{
  font-size: var(--label-size, clamp(48px, 6vw, 88px));
  color: var(--label-color, var(--tile-fg, #F5F1E8));
}
.hab-home .trail-card--v2 .trail-card__eyebrow{
  color: var(--sub-label-color, var(--tile-fg, #F5F1E8));
}

/* Per-tile text alignment — data attr on the anchor */
.hab-home .trail-card[data-align="left"]  { text-align: left; }
.hab-home .trail-card[data-align="center"]{ text-align: center; }
.hab-home .trail-card[data-align="right"] { text-align: right; }

/* Per-tile hover effects — data attr on the anchor. `lift` matches the pre-
   push default and duplicates the base `.trail-card--v2:hover .bg` rule
   above so an existing card without data-hover still animates. The other
   three variants override that base rule since they come later in source order. */
.hab-home .trail-card[data-hover="none"]:hover .bg{ transform: none; }
.hab-home .trail-card[data-hover="none"]:hover     { opacity: 1; }
.hab-home .trail-card[data-hover="zoom"]:hover .bg{ transform: scale(1.05); }
.hab-home .trail-card[data-hover="fade"]:hover .bg{ transform: none; }
.hab-home .trail-card[data-hover="fade"]:hover    { opacity: 0.85; }
.hab-home .trail-card[data-hover="lift"]:hover .bg{ transform: translateY(-6px); }

/* ══════════════════════════════════════════════════════════════
   Wave 7e follow-up — Why HAB strip: halved height + full control
   ──────────────────────────────────────────────────────────────
   Rewrote the strip's visual defaults to roughly halve rendered
   height. Every custom property below flows from an inline style
   emitted by the section Liquid; blank customizer values fall
   through to the compact defaults via `var(--x, fallback)`.

   Also handles 1–6 tile auto-fit grid + optional 1px dividers +
   optional background image with dark overlay for legibility.
   Older per-tile rules (why-icon, why-head, why-body) from Wave 7c
   are OVERRIDDEN here — new rules come later in source order and
   consume the new custom properties.
   ══════════════════════════════════════════════════════════════ */

/* Auto-fit grid — column count follows tile count. Under 720px: 1-col stack. */
.hab-home .hab-why-strip[data-tile-count="1"] .why-grid,
.hab-home .hab-why-strip[data-tile-count="2"] .why-grid,
.hab-home .hab-why-strip[data-tile-count="3"] .why-grid{ grid-template-columns: repeat(var(--_c, 3), 1fr); }
.hab-home .hab-why-strip[data-tile-count="1"] .why-grid{ --_c: 1; }
.hab-home .hab-why-strip[data-tile-count="2"] .why-grid{ --_c: 2; }
.hab-home .hab-why-strip[data-tile-count="3"] .why-grid{ --_c: 3; }
.hab-home .hab-why-strip[data-tile-count="4"] .why-grid{ grid-template-columns: repeat(4, 1fr); }
.hab-home .hab-why-strip[data-tile-count="5"] .why-grid,
.hab-home .hab-why-strip[data-tile-count="6"] .why-grid{ grid-template-columns: repeat(3, 1fr); }

/* Halved-height defaults on the base strip. Later in source order than earlier
   Wave 7c/7d rules so these win via cascade. */
.hab-home .hab-why-strip{
  padding-block: 20px 20px; /* halved from 40 — inline style overrides via var */
  background-color: var(--why-bg, transparent);
  background-image: var(--why-bg-image, none);
  background-size: cover;
  background-position: center;
  position: relative;
}
.hab-home .hab-why-strip[data-has-why-bg-image="true"]::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35));
  pointer-events: none;
}
.hab-home .hab-why-strip[data-has-why-bg-image="true"] > .hab-wrap{ position: relative; z-index: 1; }
.hab-home .hab-why-strip[data-divider-top="true"]{ border-top: 1px solid currentColor; }
.hab-home .hab-why-strip[data-divider-bottom="true"]{ border-bottom: 1px solid currentColor; }
.hab-home .hab-why-strip .hab-why-strip-title{ margin: 0 0 12px; }

/* Grid gap halved from ~40 → 20 desktop, 24 mobile stack */
.hab-home .hab-why-strip .why-grid{
  gap: 20px;
  align-items: start;
}

/* Icon — size from --why-icon-size (halved 40 → 24 default). Gap to heading 6 (was 16). */
.hab-home .hab-why-strip .why-icon{
  width: var(--why-icon-size, 24px);
  height: var(--why-icon-size, 24px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--why-icon-color, var(--section-accent, var(--hab-accent-2, #D8B24A)));
}
.hab-home .hab-why-strip .why-icon svg{ width: 100%; height: 100%; }

/* Heading — 16 default (was ~20). line-height 1.15. Gap to body 4 (was 8). */
.hab-home .hab-why-strip .why-head{
  font-family: var(--hab-display);
  font-weight: 700;
  font-size: var(--why-heading-size, 16px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--why-heading-color, var(--section-heading, var(--hab-ivory)));
  margin: 0 0 4px;
}

/* Body — 13 default (was 14.5). line-height 1.3 (was 1.55). 2-line clamp. */
.hab-home .hab-why-strip .why-body{
  font-family: var(--hab-body);
  font-size: var(--why-body-size, 13px);
  line-height: 1.3;
  color: var(--why-body-color, var(--section-fg, var(--hab-ivory)));
  opacity: .82;
  margin: 0;
  max-width: 32ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tile — reset link styling if the tile is clickable */
.hab-home .hab-why-strip .why-tile{
  text-align: center;
  padding: 8px 4px;
}
.hab-home .hab-why-strip .why-tile--link{
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, opacity .2s ease;
}
.hab-home .hab-why-strip .why-tile--link:hover{
  transform: translateY(-2px);
  opacity: 1;
}
.hab-home .hab-why-strip .why-tile--link:hover .why-head{ text-decoration: underline; text-underline-offset: 3px; }
.hab-home .hab-why-strip .why-tile{ margin-inline: auto; }
.hab-home .hab-why-strip .why-icon{
  margin-inline: auto;
}

/* Mobile — 1-col stack for the why-strip grid. Wave 27.9 padding rule
   deleted in Wave 27.9b — superseded by the widened un-prefixed block
   below, which caps .hab-why-strip alongside the other 8 wrappers so
   the same rule now covers non-homepage templates too. */
@media (max-width: 720px){
  .hab-home .hab-why-strip .why-grid{ grid-template-columns: 1fr !important; gap: 20px; }
}

/* Wave 27.9a Lever 3 + Wave 27.9b widen — mobile-only universal padding
   cap for the sections whose schema emits inline padding-top/padding-bottom
   styles. !important is the only lever that beats those inline attrs.
   Un-prefixed selectors (dropped .hab-home from Wave 27.9a) so the cap
   applies on every template that renders these sections — homepage,
   category pages (page.cargo/child/dog), blog, article, etc. Desktop
   values (set per-instance in the theme editor) stay untouched — this
   ONLY fires below 767px. */
@media (max-width: 767px){
  .hab-brands,
  .hab-trail,
  .hab-feature,
  .hab-journal,
  .hab-reviews,
  .hab-closing,
  .hab-faq,
  .hab-signup,
  .hab-why-strip,
  .hab-sale-collections,
  .hab-page-hero{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* Wave 27.9c — universal footer-gap fix. Avone's theme.aio.min.css sets
   .site-footer{margin-top:50px} (last-declared wins over an earlier 20px
   rule at same specificity). That stacks a hardcoded 50px on top of every
   last section's padding-bottom on every template + every viewport,
   creating the persistent blank gap Paul flagged. Zeroing it here (in
   hab-home.css which loads site-wide) neutralises the stack universally
   without editing Avone base CSS. !important required to beat the base
   rule's same-specificity last-declared cascade win. */
.site-footer{ margin-top: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   JOURNAL TEASER — rebuilt Wave 9.4 · schema-driven inline style Wave 11.0
   ──────────────────────────────────────────────────────────────
   Homepage-only. Static balanced grid (3 / 2 / 1 cols). No carousel, no JS.
   Wave 11.0 · dormant `.journal` + `.post` + `.journal-carousel` rules pruned.
   Colour + typography defaults live here as var-with-fallback; merchant
   schema controls emit inline `style="…"` on each element that overrides
   these defaults per Rev 7 §04 step 5.
   Media aspect-ratio wired to --journal-card-aspect (merchant control).
   ══════════════════════════════════════════════════════════════ */

/* Section width — 5-option scale requested by Paul, mapped to max-widths
   on .hab-wrap. Matches Shopify's standard Section-style width vocabulary. */
.hab-home .hab-journal[data-width="small"]  .hab-wrap{ max-width: 640px;  margin-inline: auto; }
.hab-home .hab-journal[data-width="medium"] .hab-wrap{ max-width: 960px;  margin-inline: auto; }
.hab-home .hab-journal[data-width="large"]  .hab-wrap{ max-width: 1200px; margin-inline: auto; }
.hab-home .hab-journal[data-width="xlarge"] .hab-wrap{ max-width: 1440px; margin-inline: auto; }
.hab-home .hab-journal[data-width="full"]   .hab-wrap{ max-width: none; padding-inline: clamp(16px, 4vw, 48px); }

/* Section head — eyebrow + h2 + CTA. Two-column at ≥720px so the CTA
   sits opposite the heading; stacks on mobile. */
.hab-home .hab-journal__head{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 32px;
  align-items: end;
}
.hab-home .hab-journal__head .hab-eyebrow{
  font-family: var(--hab-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--section-accent, var(--hab-accent, #D8B24A));
  display: block;
  margin-bottom: 8px;
}
.hab-home .hab-journal__heading{
  font-family: var(--hab-display, 'League Spartan', system-ui, sans-serif);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--section-heading, inherit);
  margin: 0;
}
.hab-home .hab-journal__cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--hab-display, 'League Spartan', system-ui, sans-serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--section-accent, var(--hab-accent, #D8B24A));
  text-decoration: none;
  justify-self: start;
}
.hab-home .hab-journal__cta:hover{ text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px){
  .hab-home .hab-journal__head{
    grid-template-columns: 1fr auto;
    gap: 24px;
  }
  .hab-home .hab-journal__cta{ justify-self: end; }
}

/* Grid — 3 cols desktop, 2 cols tablet, 1 col mobile. Equal-height cards. */
.hab-home .hab-journal__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1080px){
  .hab-home .hab-journal__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .hab-home .hab-journal__grid{ grid-template-columns: 1fr; gap: 20px; }
}

/* Card — whole card is <a>. Article inside is the styled surface. */
.hab-home .hab-journal__card{
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease;
}
.hab-home .hab-journal__card:hover{ transform: translateY(-3px); }
.hab-home .hab-journal__card:hover .hab-journal__title{ text-decoration: underline; text-underline-offset: 3px; }
.hab-home .hab-journal__card:focus-visible{ outline: 2px solid var(--section-accent, var(--hab-accent-2, #D8B24A)); outline-offset: 3px; border-radius: 4px; }
.hab-home .hab-journal__card > article{
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

/* Media — aspect wired to --journal-card-aspect (merchant control · Wave 11.0). Default 16/9. */
.hab-home .hab-journal__media{
  position: relative;
  aspect-ratio: var(--journal-card-aspect, 16 / 9);
  overflow: hidden;
  border-radius: 4px;
  background: var(--hab-cream, #EFE9DA);
}
.hab-home .hab-journal__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.hab-home .hab-journal__card:hover .hab-journal__media img{ transform: scale(1.03); }
.hab-home .hab-journal__media-placeholder{
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--hab-cream, #EFE9DA), var(--hab-paper, #FBFAF6));
}

/* Body — meta row + title + excerpt. Equal-height alignment across cards. */
.hab-home .hab-journal__body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.hab-home .hab-journal__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--hab-body, 'IBM Plex Serif', Georgia, serif);
  font-size: 12px;
  color: var(--section-fg, var(--hab-ink, #2A221B));
  opacity: .68;
}
.hab-home .hab-journal__tag{
  font-family: var(--hab-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--section-accent, var(--hab-accent, #D8B24A));
  opacity: 1;
}
.hab-home .hab-journal__tag + .hab-journal__read-time::before,
.hab-home .hab-journal__tag + .hab-journal__date::before,
.hab-home .hab-journal__read-time + .hab-journal__date::before{
  content: '·';
  margin-right: 4px;
  opacity: .5;
}
.hab-home .hab-journal__title{
  font-family: var(--hab-display, 'League Spartan', system-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--section-heading, var(--hab-ink, #2A221B));
  margin: 0;
}
.hab-home .hab-journal__excerpt{
  font-family: var(--hab-body, 'IBM Plex Serif', Georgia, serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--section-fg, var(--hab-ink, #2A221B));
  opacity: .78;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hab-home .hab-journal__empty{
  padding: 24px;
  border: 1px dashed var(--hab-hair, rgba(42,34,27,.18));
  border-radius: 4px;
  text-align: center;
  color: var(--hab-ink, #2A221B);
  opacity: .7;
}


/* ═════════════════════════════════════════════════════════════
   Wave 10 · HAB Flagship feature · neutral layout rules
   Zero colour · Zero font · Colour is 100% Liquid-inline via palette vars
   Markup: .hab-feature > .hab-feature__inner > (__visual + __copy)
   ═════════════════════════════════════════════════════════════ */

.hab-home .hab-feature { display: block; box-sizing: border-box; }
.hab-home .hab-feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hab-feature-gap, 40px);
  max-width: var(--hab-feature-max-width, 1200px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 42px);
  align-items: center;
}
.hab-home .hab-feature[data-layout="image-right"] .hab-feature__inner { direction: rtl; }
.hab-home .hab-feature[data-layout="image-right"] .hab-feature__inner > * { direction: ltr; }
.hab-home .hab-feature[data-layout="image-top"] .hab-feature__inner,
.hab-home .hab-feature[data-layout="image-bottom"] .hab-feature__inner { grid-template-columns: 1fr; }
.hab-home .hab-feature[data-layout="image-bottom"] .hab-feature__visual { order: 2; }

.hab-home .hab-feature__visual { position: relative; min-height: 400px; border-radius: 8px; overflow: hidden; }
.hab-home .hab-feature__image {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.hab-home .hab-feature__caption {
  position: absolute; z-index: 2;
  display: inline-block;
}
.hab-home .hab-feature__caption[data-pos="TL"] { top: 16px; left: 16px; }
.hab-home .hab-feature__caption[data-pos="TR"] { top: 16px; right: 16px; }
.hab-home .hab-feature__caption[data-pos="BL"] { bottom: 16px; left: 16px; }
.hab-home .hab-feature__caption[data-pos="BR"] { bottom: 16px; right: 16px; }

.hab-home .hab-feature__stat {
  position: absolute; z-index: 3;
  display: inline-flex; flex-direction: column; gap: 2px;
}
.hab-home .hab-feature__stat[data-pos="TL"] { top: 24px; left: 24px; }
.hab-home .hab-feature__stat[data-pos="TR"] { top: 24px; right: 24px; }
.hab-home .hab-feature__stat[data-pos="BL"] { bottom: 24px; left: 24px; }
.hab-home .hab-feature__stat[data-pos="BR"] { bottom: 24px; right: 24px; }
.hab-home .hab-feature__stat-value { display: block; line-height: 1; }
.hab-home .hab-feature__stat-label { display: block; letter-spacing: 0.06em; text-transform: uppercase; }

.hab-home .hab-feature__copy {
  text-align: var(--hab-feature-align, left);
  display: flex; flex-direction: column; gap: 16px;
}
.hab-home .hab-feature__eyebrow { margin: 0; letter-spacing: 0.14em; text-transform: uppercase; }
.hab-home .hab-feature__headline { margin: 0; line-height: 1.05; letter-spacing: -0.02em; }
.hab-home .hab-feature__headline em { font-style: normal; }
.hab-home .hab-feature__lede { line-height: 1.5; max-width: 56ch; }


.hab-home .hab-feature__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hab-home .hab-feature__cta-primary,
.hab-home .hab-feature__cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-radius: 3px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

@media (max-width: 900px) {
  .hab-home .hab-feature__inner { grid-template-columns: 1fr; }
  .hab-home .hab-feature__visual { min-height: 320px; }
}

/* Wave 27.7 / 27.7a / 27.7b — Flagship mobile treatment.
   Root cause chain: DOM has image + caption + 2 stats as siblings inside
   .hab-feature__visual, which desktop styles with overflow:hidden +
   absolute-positioned children (image inset:0, caption/stat corner pins).
   Wave 27.7 flipped stats to position:static but they stayed INSIDE the
   still-clipped visual container, so they bled at edges (Paul's screenshots
   2/4). Wave 27.7a's `contain` letterbox was also wrong shape.
   Wave 27.7b: visual becomes a flex-wrap column at mobile, overflow:visible,
   every child position:static — image now a natural block with its own 4/3
   aspect, caption is a plain label below, stats flow as inline chips below
   that. No absolute positioning survives at mobile; no clipping possible.
   Button stack + 48px touch targets from Wave 27.7 preserved. */
@media (max-width: 767px) {
  .hab-home .hab-feature__visual {
    position: static;
    display: flex; flex-wrap: wrap;
    gap: 12px;
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 4px;
  }
  .hab-home .hab-feature__image {
    position: static;
    flex-basis: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hab-home .hab-feature__caption,
  .hab-home .hab-feature__caption[data-pos="TL"],
  .hab-home .hab-feature__caption[data-pos="TR"],
  .hab-home .hab-feature__caption[data-pos="BL"],
  .hab-home .hab-feature__caption[data-pos="BR"] {
    position: static !important;
    inset: auto !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    transform: none !important;
    flex-basis: 100%;
    display: block;
    background: transparent;
    color: var(--hab-ivory);
    font-size: 13px;
    padding: 0;
    margin: 0;
  }
  .hab-home .hab-feature__stat,
  .hab-home .hab-feature__stat[data-pos="TL"],
  .hab-home .hab-feature__stat[data-pos="TR"],
  .hab-home .hab-feature__stat[data-pos="BL"],
  .hab-home .hab-feature__stat[data-pos="BR"] {
    position: static !important;
    inset: auto !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    transform: none !important;
    flex: 0 1 auto;
    display: inline-flex;
    flex-direction: column;
    padding: 8px 12px;
    background: rgba(245,241,232,0.08);
    border: 1px solid rgba(245,241,232,0.15);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.3;
    margin: 0;
  }

  .hab-home .hab-feature__ctas { flex-direction: column; align-items: stretch; gap: 10px; }
  .hab-home .hab-feature__ctas > * {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
}


/* Wave 10.1 · line separators between copy blocks — thin ivory hairline */
.hab-home .hab-feature__copy > .hab-feature__headline,
.hab-home .hab-feature__copy > .hab-feature__lede,
.hab-home .hab-feature__copy > .hab-feature__notes,
.hab-home .hab-feature__copy > .hab-feature__ctas {
  border-top: 1px solid rgba(245, 241, 232, 0.15);
  padding-top: 16px;
}


/* ── Wave 22.0 · Cat-strip V2 · adapter-consumer + BEM ─────────────────
   Consumes Wave 21.0 semantic tokens via CSS custom-property indirection.
   Category context resolves via body[data-cat] cascade (emitter role panels).
   aria-current fallback covers hub-only placements where body[data-cat] is unset.
   Sticky-clone mechanics preserved above (L36, L49-53, media queries).
   ─────────────────────────────────────────────────────────────────────── */
.hab-home .hab-cat-strip{
  position:relative;z-index:2;
  background:var(--hab-cat-strip-bg, var(--hab-primary-deep));
  color:var(--hab-cat-strip-text, var(--hab-on-primary-deep));
  border-bottom:1px solid rgba(244,240,230,.14);
  min-height:var(--hab-cat-strip-bar-h, 60px);
  display:flex;align-items:center;
}
.hab-home .hab-cat-strip__bg{
  position:absolute;inset:0;z-index:-1;
  background-image:var(--hab-cat-strip-bg-image);
  background-size:cover;background-position:center;
  opacity:var(--hab-cat-strip-bg-image-opacity, 1);
  pointer-events:none;
}
.hab-home .hab-cat-strip__lead{
  display:flex;align-items:baseline;gap:14px;flex:1;min-width:0;
}
.hab-home .hab-cat-strip__eyebrow{
  font-family:var(--hab-ff-mono, var(--hab-mono));
  font-weight:500;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hab-accent);
  flex:none;
}
.hab-home .hab-cat-strip__prompt{
  font-family:var(--hab-ff-heading);
  font-weight:500;font-size:15px;line-height:1.25;
  margin:0;color:inherit;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hab-home .hab-cat-strip__chips{
  display:flex;gap:var(--hab-cat-strip-pill-gap, 10px);flex:none;
}
.hab-home .hab-cat-strip__chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 18px;
  background:var(--hab-cat-strip-chip-off-bg, rgba(245,241,232,.08));
  border:1px solid rgba(245,241,232,.22);
  border-radius:var(--hab-cat-strip-pill-r, 12px);
  color:inherit;text-decoration:none;
  font-family:var(--hab-ff-heading);font-weight:700;font-size:14px;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.hab-home .hab-cat-strip__chip:hover{
  transform:translateY(-1px);
  background:rgba(245,241,232,.14);
  border-color:var(--hab-accent);
}
/* Active chip · dual detection · body[data-cat] cascade (Wave 21.0) + aria-current fallback */
body[data-cat="cargo"] .hab-home .hab-cat-strip__chip[data-cat="cargo"],
body[data-cat="child"] .hab-home .hab-cat-strip__chip[data-cat="child"],
body[data-cat="dog"]   .hab-home .hab-cat-strip__chip[data-cat="dog"],
.hab-home .hab-cat-strip__chip[aria-current="page"]{
  background:var(--hab-cat-strip-chip-on-bg, var(--hab-accent));
  border-color:var(--hab-cat-strip-chip-on-bg, var(--hab-accent));
}
/* Sticky clone hides the lead (prompt+eyebrow), shows chips only */
.hab-home .hab-cat-strip-clone .hab-cat-strip__lead{display:none}
@media(max-width:880px){
  .hab-home .hab-cat-strip .hab-wrap{flex-direction:column;align-items:stretch;gap:8px}
  .hab-home .hab-cat-strip__chips{justify-content:space-between}
  .hab-home .hab-cat-strip__chip{flex:1;justify-content:center;padding:9px 12px}
}


/* ── Wave 23.0c · Flagship V2 · adapter-consumer + BEM defaults ────────
   Wave 23.0c restoration: pre-Wave-23 aesthetic (dark forest bg, cream text,
   brass accents, dark-filled stat pins, ivory-outlined CTA pills, vertically-
   stacked notes) reproduced entirely via CSS defaults. Zero template value
   seeding required; adapter role tokens auto-adapt per-category via body[data-cat].
   ─────────────────────────────────────────────────────────────────────── */
.hab-home .hab-feature{
  background:var(--hab-feature-bg, var(--hab-primary-deep));
  color:var(--hab-feature-text, var(--hab-on-primary-deep));
  padding-top:var(--hab-feature-pt, 80px);
  padding-bottom:var(--hab-feature-pb, 80px);
  border-radius:var(--hab-feature-radius, 0);
  position:relative;
}
.hab-home .hab-feature__bg{
  position:absolute;inset:0;z-index:0;
  background-image:var(--hab-feature-bg-image);
  background-size:cover;background-position:center;
  opacity:var(--hab-feature-bg-image-opacity, 1);
  pointer-events:none;
}
.hab-home .hab-feature .hab-wrap{position:relative;z-index:1;max-width:var(--hab-feature-max-width, 1200px);margin:0 auto;}
.hab-home .hab-feature[data-mode="blocks"] .hab-wrap{display:flex;flex-direction:column;gap:60px;}
.hab-home .hab-feature__eyebrow{
  font-family:var(--hab-ff-mono, monospace);
  font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--hab-feature-accent, var(--hab-accent));
  margin:0 0 12px;
}
.hab-home .hab-feature__headline{
  font-family:var(--hab-ff-heading, serif);
  font-weight:700;font-size:38px;line-height:1.15;
  margin:0 0 16px;
  color:inherit;
}
.hab-home .hab-feature__headline em{
  font-style:normal;
  color:var(--hab-feature-accent, var(--hab-accent));
}
.hab-home .hab-feature__lede{
  font-family:var(--hab-ff-body, sans-serif);
  font-weight:400;font-size:18px;line-height:1.5;
  margin:0 0 24px;
  color:inherit;opacity:.92;
}
.hab-home .hab-feature__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
/* Wave 23.0c · ivory-outlined pill CTAs restored (scoped to .hab-feature) */
.hab-home .hab-feature .hab-btn--primary,
.hab-home .hab-feature .hab-btn--secondary{
  background:var(--hab-feature-cta-fill, var(--hab-primary-deep));
  color:var(--hab-feature-cta-text, var(--hab-on-primary-deep));
  border:1px solid var(--hab-feature-cta-border, var(--hab-on-primary-deep));
  padding:12px 22px;border-radius:999px;
  font-family:var(--hab-ff-body, sans-serif);font-weight:500;font-size:14px;
  text-decoration:none;display:inline-flex;align-items:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.hab-home .hab-feature .hab-btn--primary:hover,
.hab-home .hab-feature .hab-btn--secondary:hover{
  background:var(--hab-feature-cta-fill-hover, var(--hab-feature-accent, var(--hab-accent)));
  color:var(--hab-feature-cta-text-hover, var(--hab-primary-deep));
  border-color:var(--hab-feature-cta-border-hover, var(--hab-feature-accent, var(--hab-accent)));
}
/* Wave 23.0c · dark-filled stat pins (was brass-filled pre-fix) */
.hab-home .hab-feature__stat{
  padding:8px 12px;
  background:var(--hab-feature-stat-bg, var(--hab-primary-deep));
  color:inherit;
  border-radius:0;
  display:inline-flex;flex-direction:column;line-height:1.15;
}
.hab-home .hab-feature__stat-value{
  font-family:var(--hab-ff-mono, monospace);
  font-weight:500;font-size:15px;
  color:var(--hab-feature-accent, var(--hab-accent));
}
.hab-home .hab-feature__stat-label{
  font-family:var(--hab-ff-mono, monospace);
  font-weight:400;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:inherit;opacity:.85;
}
/* Wave 23.0c · image caption cream-tint pill with dark ink text */
.hab-home .hab-feature__caption{
  font-family:var(--hab-ff-mono, monospace);
  font-weight:400;font-size:12px;
  padding:6px 10px;
  background:var(--hab-feature-caption-bg, var(--hab-surface));
  color:var(--hab-on-surface);
  border-radius:3px;
}
/* Wave 23.0c · notes vertical stack (was 2-column grid pre-fix) */
.hab-home .hab-feature__notes{
  list-style:none;padding:0;margin:16px 0 0;
  display:grid;grid-template-columns:max-content 1fr;
  column-gap:24px;row-gap:8px;
  align-items:baseline;
}
.hab-home .hab-feature__note{display:contents;}
.hab-home .hab-feature__note-label{
  font-family:var(--hab-ff-mono, monospace);
  font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hab-feature-accent, var(--hab-accent));
}
.hab-home .hab-feature__note-value{
  font-family:var(--hab-ff-mono, monospace);
  font-weight:400;font-size:13px;
  color:inherit;opacity:.92;
}
/* ── Wave 24.0 · Per-CTA source-selector scoped-override blocks ─────────
   Rule 7 additive: 4 new scoped-override rule groups (Flagship secondary +
   Closing CTA + Hero + Newsletter). Every var chains through a merchant-
   configurable override (Wave 24.0) → section-level default (Wave 23.0c where
   present) → Wave 21.0 adapter primary-deep / on-primary-deep. Default state
   (all Inherit) produces zero style overrides — falls through to the existing
   Wave 23.0c defaults or theme's .hab-btn base rules.
   ─────────────────────────────────────────────────────────────────────── */

/* Flagship · secondary CTA independent controls
   (primary CTA already wired at L2038-2050 via Wave 23.0c) */
.hab-home .hab-feature .hab-btn--secondary{
  background:var(--hab-feature-secondary-cta-fill, var(--hab-feature-cta-fill, var(--hab-primary-deep)));
  color:var(--hab-feature-secondary-cta-text, var(--hab-feature-cta-text, var(--hab-on-primary-deep)));
  border:1px solid var(--hab-feature-secondary-cta-border, var(--hab-feature-cta-border, var(--hab-on-primary-deep)));
}

/* Closing CTA · per-CTA merchant controls */
.hab-home .hab-closing-cta .hab-btn--primary{
  background:var(--hab-closing-cta-cta1-fill, var(--hab-primary-deep));
  color:var(--hab-closing-cta-cta1-text, var(--hab-on-primary-deep));
  border:1px solid var(--hab-closing-cta-cta1-border, var(--hab-on-primary-deep));
}
.hab-home .hab-closing-cta .hab-btn--secondary{
  background:var(--hab-closing-cta-cta2-fill, var(--hab-primary-deep));
  color:var(--hab-closing-cta-cta2-text, var(--hab-on-primary-deep));
  border:1px solid var(--hab-closing-cta-cta2-border, var(--hab-on-primary-deep));
}

/* Hero · per-CTA merchant controls
   Hero uses section-scoped CTA classes (not .hab-btn--*).
   Phase 3 must confirm exact selector via section body probe — likely
   .hab-hero__cta-primary / __cta-secondary or .hero-cta-primary / -secondary. */
.hab-home .hab-hero .hero-cta-primary,
.hab-home .hab-hero .hab-hero__cta-primary{
  background:var(--hab-hero-primary-cta-fill, var(--hab-primary-deep));
  color:var(--hab-hero-primary-cta-text, var(--hab-on-primary-deep));
  border:1px solid var(--hab-hero-primary-cta-border, var(--hab-on-primary-deep));
}
.hab-home .hab-hero .hero-cta-secondary,
.hab-home .hab-hero .hab-hero__cta-secondary{
  background:var(--hab-hero-secondary-cta-fill, var(--hab-primary-deep));
  color:var(--hab-hero-secondary-cta-text, var(--hab-on-primary-deep));
  border:1px solid var(--hab-hero-secondary-cta-border, var(--hab-on-primary-deep));
}

/* Newsletter · form submit button merchant controls
   Phase 3 confirms exact selector via section body probe — likely
   .hab-signup form button[type="submit"] or .hab-newsletter__submit. */
.hab-home .hab-newsletter-panel button[type="submit"],
.hab-home .hab-signup button[type="submit"],
.hab-home .hab-newsletter-panel .hab-signup__submit{
  background:var(--hab-newsletter-button-fill, var(--hab-primary-deep));
  color:var(--hab-newsletter-button-text, var(--hab-on-primary-deep));
  border:1px solid var(--hab-newsletter-button-border, var(--hab-on-primary-deep));
}

/* ── Wave 24.0b · CTA shape (border-radius) controls · additive over Wave 24.0 ─
   Each rule sets ONLY border-radius. Wave 24.0 colour rules stay untouched.
   Fallback preserves current visual: 3px on Flagship/Closing/Hero CTAs
   (from .hab-home .hab-btn baseline) · 4px on Newsletter submit button
   (from .hab-home .hab-signup .row button baseline).
   Merchant Shape = Inherit → snippet emits nothing → fallback wins.
   ────────────────────────────────────────────────────────────────────────── */
.hab-home .hab-feature .hab-btn--primary{
  border-radius:var(--hab-feature-cta-radius, 3px);
}
.hab-home .hab-feature .hab-btn--secondary{
  border-radius:var(--hab-feature-secondary-cta-radius, var(--hab-feature-cta-radius, 3px));
}
.hab-home .hab-closing-cta .hab-btn--primary{
  border-radius:var(--hab-closing-cta-cta1-radius, 3px);
}
.hab-home .hab-closing-cta .hab-btn--secondary{
  border-radius:var(--hab-closing-cta-cta2-radius, 3px);
}
.hab-home .hab-hero .hero-cta-primary,
.hab-home .hab-hero .hab-hero__cta-primary{
  border-radius:var(--hab-hero-primary-cta-radius, 3px);
}
.hab-home .hab-hero .hero-cta-secondary,
.hab-home .hab-hero .hab-hero__cta-secondary{
  border-radius:var(--hab-hero-secondary-cta-radius, 3px);
}
.hab-home .hab-newsletter-panel button[type="submit"],
.hab-home .hab-signup button[type="submit"],
.hab-home .hab-newsletter-panel .hab-signup__submit,
.hab-home .hab-signup .row button{
  border-radius:var(--hab-newsletter-button-radius, 4px);
}

/* ── Wave 25.0 · hab-sale-collections CTA colour + shape scoped-overrides ─
   Consumer #5 of Wave 21.0 adapter (via Wave 24.0 hab-cta-vars snippet).
   Adapter emits: --hab-sale-cta-fill / --hab-sale-cta-border /
   --hab-sale-cta-text / --hab-sale-cta-radius (per section_prefix='hab-sale').

   Rule 7 posture: additive-only. New selectors added AFTER existing Wave 8
   rules in cascade order at same specificity (0-3-0 for .hab-home
   .hab-sale-collections[data-cta-style="…"] .sale-head__cta). Adapter vars
   unset → cascade falls through to legacy --sale-cta-* chain → identical to
   Wave 8 render (verified in Phase 4 default-state probe).

   Fallback chain: Wave 25.0 adapter var → Wave 8 --sale-cta-* legacy →
   brand fallback (--hab-c-brass, --hab-c-ivory, currentColor).

   Wave 8 architecture reminder: sale-head__cta has 3 variants via
   [data-cta-style="primary|secondary|ghost"] — each needs independent
   fallback chain to preserve its distinct legacy render.
   ─────────────────────────────────────────────────────────────────────── */

/* Primary variant · Wave 8 default: brass fill · ivory text · transparent border */
.hab-home .hab-sale-collections[data-cta-style="primary"] .sale-head__cta{
  background:var(--hab-sale-cta-fill, var(--sale-cta-bg, var(--hab-c-brass, var(--hab-brass))));
  color:var(--hab-sale-cta-text, var(--sale-cta-color, var(--hab-c-ivory, var(--hab-ivory))));
  border-color:var(--hab-sale-cta-border, transparent);
}

/* Secondary variant · Wave 8 default: transparent fill · currentColor text · sale-cta-bg border */
.hab-home .hab-sale-collections[data-cta-style="secondary"] .sale-head__cta{
  background:var(--hab-sale-cta-fill, transparent);
  color:var(--hab-sale-cta-text, var(--sale-cta-color, currentColor));
  border-color:var(--hab-sale-cta-border, var(--sale-cta-bg, currentColor));
}

/* Ghost variant · Wave 8 default: transparent fill · currentColor text · transparent border */
.hab-home .hab-sale-collections[data-cta-style="ghost"] .sale-head__cta{
  background:var(--hab-sale-cta-fill, transparent);
  color:var(--hab-sale-cta-text, var(--sale-cta-color, currentColor));
  border-color:var(--hab-sale-cta-border, transparent);
}

/* Shape · all variants inherit from single rule
   Wave 8 default: sale_cta_radius (default 40px → pill on 42-44px height).
   Adapter emits --hab-sale-cta-radius only when shape ≠ inherit. */
.hab-home .hab-sale-collections .sale-head__cta{
  border-radius:var(--hab-sale-cta-radius, var(--sale-cta-radius, 999px));
}

/* ── Wave 25.x · hab-faq-block · non-CTA source-selector scoped-overrides ─
   Consumer #6 of Wave 21.0 adapter (via NEW Wave 25.x hab-color-var snippet).
   Adapter emits (when merchant sets source ≠ inherit):
     --hab-faq-section-bg   → consumed on .hab-home .hab-faq
     --hab-faq-help-bg      → consumed on .hab-home .hab-faq .help
     --hab-faq-accent       → consumed on 4 accent-coloured slots

   Rule 7 posture: additive-only. New selectors match existing selectors exactly
   (same specificity) but appear LATER in cascade order, so they win when
   adapter vars are set AND fall through identically to existing rules when
   adapter vars are unset (source=inherit default · zero adapter var emission).

   Fallback chain: Wave 25.x adapter var → existing --hab-* role token
   (--hab-paper / --hab-cream / --hab-accent) → adapter defaults.

   Default state (merchant untouched · all _source=inherit) → zero adapter vars
   emitted → cascade resolves to existing Wave 21.0 role tokens → identical to
   current render. Rule 7 rendered-parity guaranteed at default state.
   ─────────────────────────────────────────────────────────────────────── */

/* Section bg · matches L236 selector · same specificity 0-2-0 */
.hab-home .hab-faq{
  background: var(--hab-faq-section-bg, var(--hab-paper));
}

/* Help card bg · matches L242 selector · same specificity 0-3-0
   Border unchanged (Wave 25.x Option C scope · border source-selector deferred) */
.hab-home .hab-faq .help{
  background: var(--hab-faq-help-bg, var(--hab-cream));
}

/* Accent · 4 slots · all fall back to --hab-accent when adapter var unset */

/* Slot 1 · heading em accent · matches L240 selector · same specificity 0-3-1 */
.hab-home .hab-faq .intro h2 em{
  color: var(--hab-faq-accent, var(--hab-accent));
}

/* Slot 2 · help card link · matches L245 selector · same specificity 0-3-1 */
.hab-home .hab-faq .help a{
  color: var(--hab-faq-accent, var(--hab-accent));
}

/* Slot 3 · accordion icon (+/× pseudo-elements) · matches L252 selectors
   Scoped to .hab-faq (existing rule at L252 uses .hab-home details.faq without .hab-faq) —
   adding .hab-faq raises specificity to 0-3-2 (from L252's 0-2-2) to guarantee win.
   Fallback preserves L252 background (--hab-accent) when adapter unset. */
.hab-home .hab-faq details.faq .ic::before,
.hab-home .hab-faq details.faq .ic::after{
  background: var(--hab-faq-accent, var(--hab-accent));
}

/* Slot 4 · accordion answer link · matches L258 selector
   Scoped to .hab-faq (existing rule uses .hab-home details.faq .ans a) —
   adding .hab-faq raises specificity to 0-4-1 (from L258's 0-3-1) to guarantee win. */
.hab-home .hab-faq details.faq .ans a{
  color: var(--hab-faq-accent, var(--hab-accent));
}