/* ═══════════════════════════════════════════
   WV COMPONENTS — FROZEN  (v74)
   ═══════════════════════════════════════════
   Authoritative source: Woodstock Vitamins Style Guide
   Extracted: April 2026

   This file is READ-ONLY during all build sessions.
   Do not edit during page or component builds.
   Changes require designer approval.

   CHANGELOG
   ─────────
   2026-06-08 (v74): First5 "Start Smart" section UN-FROZEN. All
                     .wv-first5* rules (base + mobile + @768 + @1280)
                     extracted verbatim to assets/css/wv-first5.css so the
                     section iterates as a standalone component. The shared
                     .wv-arrow-btn (which sat interleaved) stays here.
                     #dddec7 tokenized to --wv-color-surface (same value).
                     No visual change. User-authorized.
   2026-06-08 (v73): Hero component UN-FROZEN. All .wv-hero* rules
                     (base + mobile + @768 + @1280) extracted verbatim
                     to assets/css/wv-hero.css so the hero iterates as
                     a standalone component (one-component-one-file).
                     No visual change in this step — cascade preserved.
                     User-authorized removal from the frozen layer.
   2026-06-08 (v72): Hero CTA repositioned as a quiz entry point.
                     Copy is now "Find Your Foundation" (was
                     "Discover Your First5"), routing to /quiz/.
                     Fill switched from --wv-color-accent (olive) to
                     --wv-color-quiz (coral) and hover from
                     text-primary to --wv-color-quiz-hover — the
                     coral pair is the CLAUDE.md v6 reserved-for-
                     quiz-UI token and the new copy makes this a
                     real quiz CTA, so the token is permitted here.
                     New .wv-hero__cta-note rule below the CTA
                     carries the muted annotation "The 2-minute
                     quiz. No email required to see your results."
                     Custom typography on the note (no .wv-* class)
                     because the existing scales didn't fit the
                     muted-secondary read; CLAUDE.md Rule 3 doesn't
                     fire when no typography class is applied.
   2026-06-08 (v71): Hero heading accent — new .wv-hero__heading-accent
                     span sets color: var(--wv-color-accent) so the
                     "Start with the Right Five." portion of the H1
                     reads in olive while "Confused by Supplements?"
                     stays text-primary. Color-only declaration; no
                     typography redeclaration (the span inherits
                     family / size / weight / line-height from the
                     parent .wv-hero__heading).
   2026-06-08 (v70): Hero vertical padding aligned to the homepage
                     section rhythm (64/96/120 mobile/tablet/desktop).
                     Pre-v70 hero was 32-24 / 40-30 / 46-36 — roughly
                     half the breathing room of the sibling sections
                     (Start Here, Support For, etc.), so the hero
                     looked cramped against everything else. User-
                     authorized after the Start Here build flagged the
                     rhythm break. Horizontal padding preserved at
                     16/40/80 (grid alignment unchanged). Only
                     .wv-hero__inner top/bottom values touched —
                     all child rules (.wv-hero__content,
                     .wv-hero__heading, etc.) unchanged.
   2026-06-05 (v69): Reverted v68 — .wv-footer__middle and
                     .wv-footer__disclaimer max-width caps removed.
                     User decided the issue wasn't the width.
                     Both elements back to inheriting 1440 from
                     .wv-footer__inner. Same-session 2026-06-05.
   2026-06-05 (v68): Footer middle area capped at page-content-max.
                     .wv-footer__middle and .wv-footer__disclaimer
                     now both max-width: var(--wv-page-content-max)
                     (1280) centered, instead of inheriting the
                     1440 container-max from .wv-footer__inner.
                     Horizontal rules above + below stay viewport-
                     wide via their calc(50% - 50vw) ::before/::after.
                     User-authorized 2026-06-05. Reverted in v69.
   2026-06-05 (v67): Footer — reverted v66's 8px padding-top + bg
                     offset. .wv-footer back to no padding-top and
                     .wv-footer__bg back to inset: 0. User request
                     same-session 2026-06-05.
   2026-06-05 (v66): Footer — 8px padding-top on .wv-footer so the
                     page-content edge reads as separated from the
                     footer surface. User-authorized 2026-06-05.
                     Reverted in v67.
   2026-06-03 (v65): Tokenization — 4 hardcoded `max-width: 1440px`
                     instances in this file replaced with
                     var(--wv-container-max). Found by the
                     2026-06-03 responsive-system audit; no other
                     hardcoded 1440s exist in the theme after this
                     pass. No visual change.
   2026-06-03 (v64): Footer FDA disclaimer — tighter internal padding.
                     8 12 → 6 10. Designer second pass: bubble was
                     reading wider than necessary; pulling the
                     padding in tightens the silhouette without
                     touching alignment, external margin, border, or
                     text. FDA compliance preserved.
   2026-06-03 (v63): Footer FDA disclaimer styling pass.
                     (a) text-align: center.
                     (b) internal padding tightened 12 16 → 8 12.
                     (c) external horizontal margin 0 → 40 each side
                         so the bordered box sits inset from the inner
                         container edges. FDA 21 CFR 101.93(d/e)
                         compliance preserved — weight 700, 1px stroke
                         "set off", text content unchanged.
   2026-06-03 (v62): Footer separator lines extended to viewport edge.
                     Per designer call — the three horizontal rules
                     (above + below tagline; above legal-row) used to
                     sit on .wv-footer__top / .wv-footer__bottom which
                     live inside .wv-footer__inner (1440 max +
                     page-gutter). That capped the lines at the inner
                     width. Switched to pseudo-elements positioned
                     with left/right: calc(50% - 50vw) so each line
                     spans the full viewport regardless of the inner
                     padding. Border declarations removed from the
                     ::top and ::bottom rules themselves.
   2026-06-03 (v61): Footer bottom alignment pass. Legal row centered
                     (text-align: center on .wv-footer__legal) so
                     terms | privacy | accessibility sit centered
                     beneath the horizontal line. Copyright stays
                     left, socials right via the existing space-
                     between on .wv-footer__bottom-row. Removed
                     `align-items: flex-start` from the mobile
                     override on .wv-footer__bottom so children
                     stretch to full width — without that, the
                     bottom-row couldn't justify socials all the way
                     to the right edge on narrow viewports.
   2026-06-03 (v60): Footer bottom row restructured. Legal links
                     (terms | privacy | accessibility) lifted to
                     their own row directly below the horizontal
                     line, with a 16px gap mirroring the disclaimer's
                     margin-bottom-to-line gap. Copyright + socials
                     move to a sub-row below the legal links via a
                     new .wv-footer__bottom-row wrapper (space-
                     between row inside the now-column-flex
                     .wv-footer__bottom). Also: .wv-footer__social
                     img clamped to width:20 / height:20 /
                     object-fit:contain so the two social PNGs
                     (Facebook 22×41, Instagram 52×47) render at
                     identical 20×20 boxes regardless of native
                     aspect ratio. Previous markup used HTML
                     width/height attrs alone which let the browser
                     distort each toward its own native ratio at
                     the same nominal box size.
   2026-06-03 (v59): Footer email signup restructured. Markup moved
                     out of .wv-footer__middle (where it was a third
                     flex sibling alongside __left and __nav) and
                     into .wv-footer__left, stacked beneath the quiz
                     CTA. Was causing three visible bugs as the
                     viewport resized across the ~1600px wrap
                     threshold: (a) signup darted between "right of
                     nav columns" and "below quiz"; (b) when wrapped,
                     parent gap:41 plus uneven row-1 heights produced
                     a 100+px visible gap between quiz bottom and
                     signup top; (c) signup form span felt wider than
                     the visible quiz-card content (quiz card has
                     internal padding so its content reads narrower
                     than its 553px box). Inside __left it inherits
                     __left's flex basis (320 tablet / 553 desktop)
                     so widths match the quiz card by construction.
                     Removed every .wv-footer__email-wrap flex-basis
                     / order / width override since it's no longer a
                     flex item of __middle. Kept its internal flex
                     column rule (display:flex; flex-direction:column;
                     gap:8 between heading and form).
   2026-06-03 (v58): Header-icon size pass-2. Two changes:
                     (a) .wv-header-icon--cart svg override removed —
                         it was identical to the default rule (22 × 22)
                         after v57, so the override carried no value.
                     (b) .wv-header-icon--profile svg override
                         restored to 26 × 26 (vs default 22) — the
                         profile.svg has a 30 × 30 viewBox that fills
                         edge-to-edge with a soft-opacity blend,
                         which at default 22 made the rendered icon
                         look smaller / lighter than cart + search.
                         Bumping CSS size to 26 brings its visual
                         weight back in line with the other two
                         without rejoining the original 30 (which
                         had been too large per v57).
   2026-06-03 (v57): Header icons normalized to 22 × 22 across the
                     board (was: search 23, cart 19, profile 30).
                     Designer call — cart had been visibly smaller
                     than search and profile noticeably bigger; one
                     uniform size makes the right-side icon cluster
                     read as a coherent set. Both the default
                     .wv-header-icon svg rule and the --cart /
                     --profile overrides land at 22 × 22.
   2026-06-02 (v56): .wv-breadcrumbs padding-top reduced 14 → 6.
                     Designer second-pass — tighten the pre-breadcrumb
                     gap further on the canonical reusable component
                     so every consumer picks it up automatically.
                     margin-bottom remains 24 (top-only adjustment).
   2026-06-02 (v55): .wv-breadcrumbs padding-top reduced 24 → 14
                     (40% reduction). Designer call to tighten the
                     pre-breadcrumb gap across every consumer in
                     one place — shop, learn-archive, single-article,
                     and any future surface pick up the change for
                     free. margin-bottom kept at 24 (gap to first
                     page element unchanged — top-only reduction).
   2026-06-02 (v54): .wv-breadcrumbs gains `padding-top: 24px` so the
                     component owns its own space-from-header. Was
                     relying on parent wrapper padding (worked for shop
                     where .wv-shop__inner had top padding, but
                     inconsistent across other consumers). Established
                     as the canonical breadcrumb pattern paired with
                     new parts/breadcrumb.php reusable partial. Article
                     pages migrated off their bespoke .wv-art-breadcrumb
                     class to use .wv-breadcrumbs (see wv-article.css
                     for the drop).
   2026-06-02 (v53): .wv-footer__inner padding aligned to --wv-page-gutter
                     token (4 blocks: base + mobile-first base + tablet
                     768 + desktop 1280). Was hardcoded 0 80/16/40/80
                     after the mobile-first refactor. v52 renamed the
                     header to use the new token but missed the footer,
                     leaving the footer indented 32px more than the
                     header at desktop. Behavior at all tier values
                     now identical to header.
   2026-06-02 (v52): Renamed --wv-header-padding → --wv-page-gutter
                     site-wide. The token was the de-facto page-edge
                     gutter used by 8 page surfaces; old name was a
                     misnomer. Desktop tier shrunk from 80px to 48px
                     to align with the shop page's clamp (which set
                     48px max). Mobile (16px) and tablet (40px) tiers
                     unchanged. .wv-shop__inner padding swapped from
                     `clamp(16px, 4vw, 48px)` to `var(--wv-page-gutter)`
                     so every surface now respects the same gutter
                     system. 21 consumer references renamed across
                     wv-components.css, wv-first5-lp.css, wv-your-
                     practice.css, wv-pdp-buy-bar.css, wv-quiz-
                     results.css, account.css, wv-f5-orientation.css.
                     See wv-tokens.css amendment 2026-06-02 for the
                     token-side change.
   2026-06-01 (v51): Promoted the hardcoded shadow literal
                     `0 4px 4px 0 rgba(0,0,0,0.25)` on .wv-card__image
                     + .wv-card__info to `var(--wv-shadow-card)`. Token
                     added in wv-tokens.css same day. New Ingredient
                     Card (.wv-ingredient-card) mimics the product card
                     structure and uses the same token, eliminating
                     duplicate literals. No visual change.
   2026-06-01 (v50): Added KEEP-AS-IS markers to the four
                     @media (max-width: 782px) blocks documenting why
                     they are intentional (WP admin-bar height
                     boundary, not a layout breakpoint) and exempt
                     from the mobile-first refactor sweep. No
                     behavioral change.
   2026-06-01 (v49): Refactored max-width: 1279 tablet block to
                     mobile-first 3-tier (mobile base / min-width: 768
                     tablet / min-width: 1280 desktop). Tablet values
                     (40px header padding, 230px header column flex,
                     40px footer padding, 320px footer column flex,
                     40px hero padding/gap, 50px hero heading,
                     40px first5 padding, 24px first5 track gap)
                     now live in the existing min-width: 768 block;
                     desktop values restored in a new min-width: 1280
                     block. v48's min-width: 768 had skipped the tablet
                     tier (jumping mobile → desktop directly); v49
                     restores it. Behavior preserved at all 3 tiers.
   2026-06-01 (v48): Refactored 3 legacy max-width: 767px media query
                     blocks to mobile-first pattern per MOBILE-DESIGN-
                     RULES.md. Mobile values now live in the base rules;
                     desktop overrides moved into a consolidated
                     @media (min-width: 768px) block. Behavior preserved.
                     Net visual change: none expected (semantically
                     equivalent). Visual QA required across all pages
                     that load this file.

   Contains: all global component styles —
   header, mega menu, hero, first5, product card,
   shop, quiz CTA, section pill, footer, responsive overrides.

   New components built during page development go in
   their own page-scoped CSS file (e.g. wv-shop.css).
   They do NOT go here until designer has reviewed and
   approved them as part of the frozen component set.

   ⚠ DEAD CODE NOTICE (as of v42)
   ─────────────────────────────
   The following rules are UNUSED — parts/first5.php was migrated
   to the new reusable carousel component (parts/carousel.php,
   assets/css/wv-carousel.css) on 2026-04-22. The markup that
   depended on these selectors no longer renders anywhere:
     - .wv-first5__carousel                    (~line 1043)
     - .wv-first5__nav                         (~line 1047)
     - .wv-first5__track + ::-webkit-scrollbar (~line 1116–1127)
     - mobile overrides for .wv-first5__track  (~line 2250, 2390)
   Left in place until explicit removal sign-off.

   CHANGELOG
   ─────────
   v47 — 2026-05-25: Fix .wv-card__image--fitted sizing. v46 used
        width/height: 100% on the img, but the img is position: absolute
        and its offset parent is .wv-card__image-link — which is
        display: block with no explicit height, and collapses to 0
        because the img (its only content) is taken out of flow. So
        height: 100% resolved to 0 and the image rendered invisibly.
        Switched to explicit pixel dimensions matching the frame
        (288×377), same approach the base rule uses (236×399).
   v46 — 2026-05-25: Added .wv-card__image--fitted modifier. Used by
        parts/product-card.php when a product has the ACF "Card Image"
        (field product_card_image) populated. Card-formatted images are
        pre-composed to the 288×377 frame aspect, so the modifier drops
        the overflow positioning of the base .wv-card__image img rule
        (236×399 absolute-centered, designed to overflow the mask) and
        fills the frame edge-to-edge with object-fit: cover. Base rule
        unchanged — fallback behavior for products without an ACF card
        image is preserved.
   v45 — 2026-04-22: Extracted mega menu CSS to assets/css/wv-mega-menu.css
        (non-frozen). Removed the full .wv-mega* block that lived here
        (replaced with a MOVED marker comment) plus the two
        .wv-mega__inner responsive overrides in the tablet and mobile
        media queries (replaced with inline "moved" comments so the
        surrounding rules' positions are preserved). Enables the upcoming
        mega menu rebuild to iterate without frozen-file edits. After
        the rebuild is visually dialed in, the finalized rules may be
        promoted back into this file — at that point the marker blocks
        disappear and the CSS returns here.
   v44 — 2026-04-22: Mobile cart hit target. Added width/height 44px to
        .wv-header-icon--cart inside @media (max-width: 767px), giving
        it a WCAG-compliant 44×44 touch target symmetric with the
        hamburger on the left. The 19×19 SVG glyph centers inside —
        glyph is ~12.5px inset from button edges vs the hamburger's
        ~11px inset, a 1.5px visual asymmetry that's imperceptible.
        Desktop cart (where it sits in a row with other icons) is
        untouched.
   v43 — 2026-04-22: Mobile header alignment fix. Added explicit
        justify-content on .wv-header__left (flex-start) and
        .wv-header__right (flex-end) inside @media (max-width: 767px).
        Base rule uses space-between which — with a single child —
        collapses to flex-start, causing the mobile cart icon to sit
        at the left of its flex:1 container (far from the viewport
        edge) instead of the right. The override makes the cart hug
        the right edge symmetrically with the hamburger on the left.
        Desktop behavior unchanged.
   v42 — 2026-04-22: Documented dead-code block for the legacy First5
        carousel selectors (see DEAD CODE NOTICE above). No style
        changes. Authorized as a documentation-only edit so future
        readers know the rules are orphaned.
   v41 — 2026-04-22: Re-added .wv-arrow-btn into the frozen layer (this
        is where reusable approved components belong — extracting it to a
        separate file in v39 was the wrong call). Designer-confirmed final
        spec: single button, three states. Base = dark text-primary stroke
        + arrow, transparent fill, hover fills dark with cream arrow.
        --reversed = card-bg (white) stroke + arrow, hover fills white
        with dark arrow. [disabled] / [aria-disabled] = placeholder grey
        stroke + arrow, no hover state. Long line-arrow icon is the
        canonical SVG (no chevron). Includes .wv-shop-cats__arrow as a
        temp alias selector — its markup migration is still deferred.
        Authorized as the consolidation pass for the wv-arrow-btn work.
   v40 — 2026-04-22: Removed .wv-shop-cats__arrow + :hover (rule was
        byte-identical to the new .wv-arrow-btn component). Markup-side
        migration of parts/shop-cats.php deferred — see project TODO.
        Authorized as part of the same arrow-consolidation work as v39.
   v39 — 2026-04-22: Extracted .wv-first5__arrow + :hover into new
        assets/css/wv-arrow-btn.css as the shared .wv-arrow-btn
        component. Authorized one-off edit (designer sign-off given
        explicitly for this rule only). .wv-first5__nav retained
        here — it's First5-specific layout, not button visual.
   v38 — 2026-04-16: Shop filter badge color-primary→accent (quiz reserved)
   v37 — 2026-04-16: Added margin-bottom: 16px to .wv-section-pill
   v36 — 2026-04-16: .wv-footer__disclaimer margin: 16px 0
   v35 — 2026-04-16: .wv-footer__disclaimer redesign — transparent bg,
        border stroke, uppercase, 8px radius
   v34 — 2026-04-16: .wv-section-pill nowrap + fit-content + flex-start
   v33 — 2026-04-16: Scroll threshold 200px, Material Design easing
        on header transition (0.4s cubic-bezier)
   v32 — 2026-04-16: Mobile menu admin bar offset, smart sticky
        disabled when mobile menu is open
   v31 — 2026-04-16: Smart sticky uses top instead of transform
        (fixes iOS Safari repaint), admin bar hidden offsets
   v30 — 2026-04-16: Smart sticky header — hide on scroll down,
        show on scroll up (mobile only). Merged transition.
   v29 — 2026-04-16: Admin bar body offset —
        calc(header-height + 32px), 46px at 782px
   v28 — 2026-04-16: Footer left mobile flex:none + width:100%
        (fixes 320px min-height from tablet flex-basis in column layout)
   v27 — 2026-04-16: Footer nav indent 20px, col calc(50% - 16px)
   v26 — 2026-04-16: Footer mobile — gap:0 on middle, individual
        margins: left mb:8px, email-wrap mt:28px
   v25 — 2026-04-16: Consolidate footer-nav mobile rules,
        middle gap 24px → 16px
   v24 — 2026-04-16: Footer mobile nav — gap 16px, col calc(50% - 12px),
        padding-left 12px on nav, removed per-col indent hack
   v23 — 2026-04-16: Footer tablet — side-by-side persists,
        left/email 320px, nav flex:1 gap:20px, explicit row on base
   v22 — 2026-04-16: Footer mobile gap 24px, email-wrap padding-bottom
        24px, left-col indent via first-child + nth-child(3)
   v21 — 2026-04-16: Footer fixes — signup heading margin 8px,
        mobile order (left/nav/email), odd-col indent, padding tighten
   v20 — 2026-04-16: Footer mobile tighten — middle padding-bottom 8px,
        bottom padding-top 16px, nav gap 24px, nav padding-left 8px
   v19 — 2026-04-16: Reverted footer accordion, replaced with
        two-column mobile nav (flex-wrap, 50% - 16px)
   v18 — 2026-04-16: Footer email-wrap extracted as sibling,
        flex-wrap on middle, mobile order: left/nav/email
   v17 — 2026-04-16: Footer mobile fixes — left gap 20px, disclaimer
        margin 0, nav col full-width stack, label padding 10px
   v16 — 2026-04-16: Footer accordion — mobile collapsible nav,
        disclaimer reorder, chevron + collapsed states
   v15 — 2026-04-16: Remove padding-left on featured sub-triggers
   v14 — 2026-04-16: Mobile menu polish — chevron states, sub-link
        indent, featured trigger style, account separator, header spacing
   v13 — 2026-04-16: Mobile menu Shop split into sub-groups
        (Health Goals, First5, Shop More — each collapsible)
   v12 — 2026-04-16: Mobile menu accordion refactored to mirror
        filter drawer pattern (group/label/chevron/body)
   v11 — 2026-04-16: Mobile menu drawer, hamburger, utility classes
   v10 — 2026-04-16: Mobile shop: hide breadcrumbs + heading,
        pill strip scroll-snap + padding, hide arrows on mobile
   v9 — 2026-04-16: .wv-product-grid minmax(288px, 288px) +
        justify-content: center. .wv-card height: auto + min-height.
   v8 — 2026-04-16: .wv-card gap: 8px, .wv-product-grid
        justify-items: center + gap: clamp(16px, 2vw, 24px)
   v7 — 2026-04-16: .wv-card__info padding: 20px 16px 20px
        (v6/v8 card width + justify-items experiments reverted)
   v6 — 2026-04-16: .wv-product-grid justify-items: center (reverted in v7)
   v5 — 2026-04-15: Shop layout clamp() — .wv-shop__inner padding,
        .wv-product-grid gap, .wv-card__info padding update.
        Removed 4 breakpoint overrides.
   v4 — 2026-04-15: .wv-product-grid switched to auto-fill + minmax
        (fluid responsive, removes fixed breakpoint overrides)
   v3 — 2026-04-15: Added .wv-lg__btn-* large button set
        (quiz coral, outline, primary dark, CTA olive — 55px, 10px radius)
   v2 — 2026-04-15: Added .wv-section-pill component
        (designer-approved section heading pill)
   v1 — Initial frozen layer
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   F5 PRODUCT PILLS — global, used on article cards and learn hub
   ═══════════════════════════════════════════ */
.wv-f5-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wv-font-primary);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px 3px;
  border-radius: var(--wv-radius-pill);
  border: 1px solid;
  white-space: nowrap;
}
.wv-f5-pill--omega      { color: var(--wv-color-omega-main);     border-color: var(--wv-color-omega-main);     background: color-mix(in srgb, var(--wv-color-omega-main) 10%, var(--wv-color-background)); }
.wv-f5-pill--probiotic  { color: var(--wv-color-probiotic-main); border-color: var(--wv-color-probiotic-main); background: color-mix(in srgb, var(--wv-color-probiotic-main) 10%, var(--wv-color-background)); }
.wv-f5-pill--calcium-d  { color: var(--wv-color-calcium-main);   border-color: var(--wv-color-calcium-main);   background: color-mix(in srgb, var(--wv-color-calcium-main) 10%, var(--wv-color-background)); }
.wv-f5-pill--collagen   { color: var(--wv-color-collagen-main);  border-color: var(--wv-color-collagen-main);  background: color-mix(in srgb, var(--wv-color-collagen-main) 10%, var(--wv-color-background)); }
.wv-f5-pill--multi      { color: var(--wv-color-multi-main);     border-color: var(--wv-color-multi-main);     background: color-mix(in srgb, var(--wv-color-multi-main) 10%, var(--wv-color-background)); }

/* ═══════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--wv-font-primary);
  font-size: var(--wv-text-base);
  color: var(--wv-color-text-primary);
  background-color: var(--wv-color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
.wv-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--wv-header-height);
  background-color: var(--wv-color-background);
  z-index: 1000;
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--wv-transition-base);
  will-change: top;
}

/* Smart sticky — hides on scroll down, reveals on scroll up (mobile only) */
.wv-header--hidden {
  top: calc(var(--wv-header-height) * -1);
}

body.admin-bar .wv-header--hidden {
  top: calc((var(--wv-header-height) + 32px) * -1);
}

/* ⚠ KEEP-AS-IS / DO NOT REFACTOR. The max-width: 782 below is the WP
   admin-bar breakpoint (WP collapses the bar to 46px on smaller
   viewports, otherwise 32px) — not a layout breakpoint. Confirmed
   exempt during the breakpoint cleanup pass 2026-06-01. */
@media (max-width: 782px) {
  body.admin-bar .wv-header--hidden {
    top: calc((var(--wv-header-height) + 46px) * -1);
  }
}

/* Shift header below WP admin bar when logged in */
.admin-bar .wv-header {
  top: 32px;
}

/* ⚠ KEEP-AS-IS / DO NOT REFACTOR — WP admin-bar height boundary. */
@media screen and (max-width: 782px) {
  .admin-bar .wv-header {
    top: 46px;
  }
}

.wv-header.wv-header--scrolled {
  box-shadow: var(--wv-shadow-sm);
}

.wv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--wv-container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--wv-page-gutter);
  gap: 58px;
}

/* ── Header Zones ── */
.wv-header__left,
.wv-header__right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 250px;
  height: 32px;
}

/* ── Header Divider ── */
.wv-header__divider {
  height: 1px;
  background: rgba(42, 43, 20, 0.15);
}

/* ── Logo ── */
.wv-header__logo {
  display: block;
  width: 223px;
  height: 55px;
}

.wv-header__logo svg {
  width: 100%;
  height: 100%;
}

/* ── Quiz Button ── */
.wv-btn-quiz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wv-color-quiz);
  color: var(--wv-color-text-inverse);
  font-family: var(--wv-font-primary);
  font-size: var(--wv-text-sm);
  font-weight: var(--wv-weight-semibold);
  letter-spacing: -0.45px;
  line-height: 19px;
  border: 0;
  border-radius: var(--wv-radius-lg);
  padding: 6px 27px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: var(--wv-transition-color);
}

.wv-btn-quiz:hover {
  background: var(--wv-color-quiz-hover);
}

/* ── Section Pill — heading label pill ──
   Surface fill (default), no stroke, wv-label-btn text.
   Use --light modifier on surface/woodstock backgrounds.
*/
.wv-section-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 27px;
  border-radius: var(--wv-radius-lg);
  border: none;
  background: var(--wv-color-surface);
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--wv-color-text-primary);
  white-space: nowrap;
  align-self: flex-start;
  width: fit-content;
  margin-bottom: 16px;
}

.wv-section-pill--light {
  background: var(--wv-color-background);
}

/* ── Nav Links ── */
.wv-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wv-font-primary);
  font-size: var(--wv-text-sm);
  font-weight: var(--wv-weight-semibold);
  letter-spacing: -0.45px;
  line-height: 19px;
  color: var(--wv-color-text-link);
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  transition: color var(--wv-transition-base);
}

.wv-nav-link:hover {
  color: var(--wv-color-text-link-hover);
}

.wv-nav-link svg {
  width: 9px;
  height: 9px;
  transition: transform var(--wv-transition-base);
}

.wv-nav-link[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ── Header Icons ── */
.wv-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--wv-color-text-primary);
  position: relative;
  transition: color var(--wv-transition-base);
}

.wv-header-icon:hover {
  color: var(--wv-color-text-link-hover);
}

.wv-header-icon svg {
  width: 22px;
  height: 22px;
}

/* Profile SVG has a 30×30 viewBox that fills edge-to-edge with soft
   opacity, so at the default 22 it renders visibly smaller / lighter
   than the cart + search icons. Bumping to 26 balances visual weight. */
.wv-header-icon--profile svg {
  width: 26px;
  height: 26px;
}

/* ── Cart Badge ── */
.wv-cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wv-color-badge-bg);
  color: var(--wv-color-badge-text);
  font-size: 10px;
  font-weight: var(--wv-weight-semibold);
  line-height: 1;
  border-radius: var(--wv-radius-pill);
  padding: 0 4px;
}

.wv-cart-badge:empty {
  display: none;
}


/* ── Body offset for fixed header ── */
.wv-body-offset {
  padding-top: var(--wv-header-height);
}

/* Admin bar offset — when WP admin bar is visible,
   body padding must account for header + admin bar */
body.admin-bar .wv-body-offset {
  padding-top: calc(var(--wv-header-height) + 32px);
}

/* ⚠ KEEP-AS-IS / DO NOT REFACTOR — WP admin-bar height boundary. */
@media (max-width: 782px) {
  /* WP switches admin bar to 46px on mobile */
  body.admin-bar .wv-body-offset {
    padding-top: calc(var(--wv-header-height) + 46px);
  }
}

/* ═══════════════════════════════════════════
   MEGA MENU — MOVED (as of v45)
   ═══════════════════════════════════════════
   All .wv-mega* rules were extracted to
   assets/css/wv-mega-menu.css (non-frozen) on 2026-04-22.
   Iterating there during the mega-menu rebuild. After the
   rebuild is visually dialed in, the finalized rules may
   be promoted back into this frozen layer — at that point
   this marker block disappears and the CSS returns here.
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════ */
.wv-main {
  min-height: 60vh;
  background-color: var(--wv-color-background);
}

.wv-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  font-family: var(--wv-font-mono);
  font-size: var(--wv-text-sm);
  color: var(--wv-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════
   HERO — from Figma node 2:263
   ═══════════════════════════════════════════ */
/* Hero component (.wv-hero*) extracted to assets/css/wv-hero.css
   on 2026-06-08 (v73) — un-frozen, see header changelog. */

/* ── Large Buttons — 55px height, 10px radius, 30px padding ──
   Larger variants of existing button colors.
   Use with gap: 21px on parent flex container for paired buttons.
   Paired buttons: one filled + one outline per section.
*/
.wv-lg__btn-quiz,
.wv-lg__btn-outline,
.wv-lg__btn-primary,
.wv-lg__btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 30px;
  border-radius: 10px;
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Quiz — coral filled */
.wv-lg__btn-quiz {
  background: var(--wv-color-quiz);
  color: var(--wv-color-text-inverse);
  border: 0;
  transition: background var(--wv-transition-base);
}

.wv-lg__btn-quiz:hover {
  background: var(--wv-color-quiz-hover);
}

/* Outline — dark text stroke, no fill */
.wv-lg__btn-outline {
  background: none;
  color: var(--wv-color-text-primary);
  border: 1px solid var(--wv-color-text-primary);
  transition: background var(--wv-transition-base), color var(--wv-transition-base);
}

.wv-lg__btn-outline:hover {
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
}

/* Primary — dark text filled */
.wv-lg__btn-primary {
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
  border: 0;
  transition: background var(--wv-transition-base);
}

.wv-lg__btn-primary:hover {
  background: var(--wv-color-accent);
}

/* CTA — olive filled */
.wv-lg__btn-cta {
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  border: 0;
  transition: background var(--wv-transition-base);
}

.wv-lg__btn-cta:hover {
  background: var(--wv-color-text-primary);
}

/* ── Trust Bar ── */
.wv-trust-bar {
  display: flex;
  gap: 24px;
}

.wv-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wv-trust-item__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.wv-trust-item__icon svg {
  width: 100%;
  height: 100%;
  fill: var(--wv-color-text-primary);
}

.wv-trust-item__text {
  display: flex;
  flex-direction: column;
}

.wv-trust-item__label {
  font-family: var(--wv-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 12.5px;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
  text-transform: uppercase;
}

.wv-trust-item__sub {
  font-family: var(--wv-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 15.3px;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
}

/* ═══════════════════════════════════════════
   FIRST5 SECTION — from Figma node 42:1178
   ═══════════════════════════════════════════ */
/* First5 section (.wv-first5*) extracted to assets/css/wv-first5.css on
   2026-06-08 (v74) — un-frozen. The shared .wv-arrow-btn below stays. */

/* ═══════════════════════════════════════════
   ARROW BUTTON — reusable carousel prev/next (v41)
   Designer-confirmed single component, three states.
   PHP part: parts/arrow-btn.php
   ═══════════════════════════════════════════ */

/* Base — dark text-primary stroke + arrow, transparent fill.
   Hover fills dark, arrow inverts to cream. */
.wv-arrow-btn,
/* TEMP alias: parts/shop-cats.php migration deferred (see project TODO).
   Remove this selector when shop-cats.php is migrated to .wv-arrow-btn. */
.wv-shop-cats__arrow {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--wv-color-text-primary);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wv-color-text-primary);
  cursor: pointer;
  padding: 0;
  transition: var(--wv-transition-color);
}
.wv-arrow-btn:hover,
.wv-shop-cats__arrow:hover {
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
}

/* Reversed — white (card-bg) stroke + arrow.
   Hover fills white, arrow darkens to text-primary. */
.wv-arrow-btn--reversed {
  border-color: var(--wv-color-card-bg);
  color: var(--wv-color-card-bg);
}
.wv-arrow-btn--reversed:hover {
  background: var(--wv-color-card-bg);
  color: var(--wv-color-text-primary);
}

/* Disabled — placeholder grey stroke + arrow, no hover transition. */
.wv-arrow-btn[disabled],
.wv-arrow-btn[aria-disabled="true"] {
  border-color: var(--wv-color-placeholder);
  color: var(--wv-color-placeholder);
  cursor: default;
}
.wv-arrow-btn[disabled]:hover,
.wv-arrow-btn[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--wv-color-placeholder);
}

/* Layout-only carry-over for shop-cats alias (was on the old
   .wv-shop-cats__arrow rule — needed because it sits inside a flex track).
   Remove with the alias when shop-cats.php is migrated. */
.wv-shop-cats__arrow {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   PRODUCT CARD — authoritative component
   From OBS-planning/PROMPT-product-card.md (Figma Dev Mode confirmed values)
   Active: 288×485 | Inactive: scale(0.93) + opacity 0.6
   ═══════════════════════════════════════════ */

/* ── Parent Card ── */
.wv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 288px;
  height: auto;
  min-height: 485px;
  gap: 8px;
  box-shadow: none;
  background: transparent;
}

.wv-card--inactive {
  opacity: 0.6;
  transform: scale(0.93);
  transform-origin: top center;
  pointer-events: none;
}

/* ── Image Frame (288×377) ── */
.wv-card__image {
  width: 288px;
  height: 377px;
  flex-shrink: 0;
  position: relative;
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--wv-shadow-card);
}

.wv-card__image-bg {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: #fff;
  z-index: 0;
}

.wv-card__image-link {
  display: block;
  position: relative;
  z-index: 1;
}

.wv-card__image img {
  width: 236px;
  max-width: none;
  height: 399px;
  object-fit: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

/* Card-formatted image (ACF product_card_image populated) — fills frame
   edge-to-edge instead of overflowing the mask. See changelog v46/v47. */
.wv-card__image--fitted img {
  width: 288px;
  height: 377px;
  left: 0;
  transform: none;
  object-fit: cover;
}

/* Stroke — ::after so it renders above the image mask */
.wv-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 15px;
  border: 1px solid #000;
  pointer-events: none;
  z-index: 3;
}

/* ── Actions (overlaid on image bottom, child of .wv-card root) ── */
.wv-card__actions {
  position: absolute;
  top: 323px; /* 377px image - 44px pill - 10px bottom gap */
  left: 23px;
  width: 242.375px;
  height: 44px;
  display: flex;
  gap: 14.68px;
  align-items: center;
  z-index: 4;
}

/* Count Pill — LOCKED dimensions per guardrails (see PLAN-variants.md) */
.wv-card__pill-wrap {
  position: relative;
}

.wv-card__count-pill {
  width: 115.695px;
  height: 43.711px;
  border-radius: 72.154px;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  contain: layout style;
  overflow: hidden;
}

/* Simple product pill — not interactive */
span.wv-card__count-pill {
  cursor: default;
  pointer-events: none;
}

.wv-card__count-pill-label {
  font-family: var(--wv-font-primary);
  font-size: 15.604px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.468px;
  color: var(--wv-color-text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wv-card__count-pill-chevron {
  flex-shrink: 0;
  transition: transform var(--wv-transition-fast);
}

.wv-card__count-pill[aria-expanded="true"] .wv-card__count-pill-chevron {
  transform: rotate(180deg);
}

.wv-card--inactive .wv-card__count-pill {
  pointer-events: none;
  cursor: not-allowed;
}

/* Variant Dropdown — floats, styled to match pill */
.wv-card__variant-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: var(--wv-color-card-bg);
  border: 1px solid var(--wv-color-text-primary);
  border-radius: var(--wv-radius-sm);
  box-shadow: var(--wv-shadow-md);
  z-index: 10;
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}

.wv-card__variant-opt {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--wv-color-border);
  background: transparent;
  font-family: var(--wv-font-primary);
  font-size: 15.604px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.468px;
  color: var(--wv-color-text-primary);
  cursor: pointer;
  text-align: center;
  justify-content: center;
  transition: background var(--wv-transition-base);
}

.wv-card__variant-opt:last-child {
  border-bottom: none;
}

.wv-card__variant-opt:hover {
  background: var(--wv-color-surface);
}

.wv-card__variant-opt--active {
  font-weight: var(--wv-weight-semibold);
  color: var(--wv-color-text-primary);
}

.wv-card__variant-opt--oos {
  color: var(--wv-color-text-secondary);
  pointer-events: none;
  opacity: 0.45;
}

/* Add to Cart Button */
.wv-card__atc {
  width: 112px;
  height: 44px;
  border-radius: 72.154px;
  background: var(--wv-color-accent);
  border: none;
  cursor: pointer;
  font-family: var(--wv-font-primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--wv-color-text-inverse);
  text-align: center;
  flex-shrink: 0;
  transition: background 200ms ease;
}

.wv-card__atc:hover {
  background: var(--wv-color-atc-hover);
}

.wv-card__atc:disabled,
.wv-card--inactive .wv-card__atc {
  background: #999;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Out of Stock Card ── */
.wv-card--oos .wv-card__image img {
  opacity: 0.4;
}

.wv-card--oos .wv-card__count-pill {
  opacity: 0.4;
  pointer-events: none;
}

.wv-card__oos-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--wv-color-placeholder);
  color: var(--wv-color-text-primary);
  font-family: var(--wv-font-primary);
  font-size: 10px;
  font-weight: var(--wv-weight-medium);
  padding: 4px 10px;
  border-radius: var(--wv-radius-pill);
  z-index: 3;
}

.wv-card--oos .wv-card__atc {
  /* TODO: designer to provide final inactive ATC style */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wv-color-star-empty);
  border: 0;
  color: var(--wv-color-text-inverse);
  text-decoration: none;
}

/* ── Info Frame (288×101) ── */
.wv-card__info {
  width: 288px;
  min-height: 101px;
  height: auto;
  flex-shrink: 0;
  position: relative;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--wv-shadow-card);
  padding: 20px 16px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Stroke on info frame */
.wv-card__info::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 15px;
  border: 1px solid #000;
  pointer-events: none;
  z-index: 1;
}

/* Title row: Name + Price */
.wv-card__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.wv-card__name {
  width: 162px;
  font-family: "General Grotesque", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24.195px;
  color: #2A2B14;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wv-card__name a {
  color: inherit;
  text-decoration: none;
}

.wv-card__name a:hover {
  color: #B65F54;
}

.wv-card__price-wrap {
  text-align: right;
}

.wv-card__price {
  font-family: "General Grotesque", sans-serif;
  font-size: 17.308px;
  font-weight: 400;
  line-height: 24.195px;
  color: #2A2B14;
  white-space: nowrap;
}

.wv-card__price-regular {
  text-decoration: line-through;
  color: #95967D;
  font-size: 17.308px;
}

.wv-card__price-sale {
  color: #B65F54;
  font-weight: 500;
  font-size: 17.308px;
}

/* Divider — SVG, not CSS */
.wv-card__divider {
  display: block;
  margin: 6px 0;
}

/* Meta row: Reviews + Benefit */
.wv-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wv-card__reviews {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wv-card__review-count {
  font-family: "General Grotesque Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.08px;
  color: #767933;
  text-transform: uppercase;
  line-height: normal;
}

.wv-card__stars {
  display: flex;
}

.wv-card__stars svg {
  display: block;
}

.wv-card__benefit {
  width: 143px;
  font-family: "General Grotesque", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 27.307px;
  letter-spacing: -0.3px;
  color: #2A2B14;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════
   SHOP PAGE — from Figma node 49:3816
   ═══════════════════════════════════════════ */
.wv-shop {
  background: var(--wv-color-background);
}

.wv-shop__inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding-block-start: clamp(16px, 2vw, 24px);
  padding-block-end: clamp(40px, 5vw, 60px);
  /* Aligned 2026-06-02 (v52): was `clamp(16px, 4vw, 48px)` — replaced
     by the renamed --wv-page-gutter token so every page surface
     (header, footer, shop, F5 LP, etc.) respects the same edge
     gutter (16 mobile / 40 tablet / 48 desktop). */
  padding-inline: var(--wv-page-gutter);
}

/* Breadcrumbs */
.wv-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Self-contained spacing — component owns space from header above
     AND space to first page element below, so consumers don't need
     to add wrapper padding for the breadcrumb (v54, 2026-06-02).
     padding-top: 24 → 14 (v55, 2026-06-02) → 6 (v56, 2026-06-02).
     Designer iteratively dialed the pre-breadcrumb gap down across
     every consumer (shop, learn-archive, single-article, future
     surfaces). margin-bottom kept at 24 throughout — bottom gap to
     first page element unchanged. */
  padding-top: 6px;
  margin-bottom: 24px;
}

.wv-breadcrumbs__link,
.wv-breadcrumbs__current {
  font-family: var(--wv-font-mono);
  font-weight: var(--wv-weight-medium);
  font-size: 15px;
  line-height: 18.8px;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
  text-transform: uppercase;
}

.wv-breadcrumbs__link:hover {
  color: var(--wv-color-text-link-hover);
}

.wv-breadcrumbs__sep {
  font-family: var(--wv-font-mono);
  font-size: 15px;
  color: var(--wv-color-text-primary);
}

/* Heading */
.wv-shop__heading {
  font-family: var(--wv-font-primary);
  font-weight: 300;
  font-size: 40px;
  line-height: 70px;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
  margin: 0 0 16px;
}

/* ── Shop Category Pills — LOCKED COMPONENT ──
   Do not modify without updating COMPONENTS.md.
   Vertical centering depends on line-height: 1 on the pill
   AND on any inner <a> or <span> child element.
   height: 55px desktop / 40px mobile — do not change.
   border-radius: var(--wv-radius-sm) = 15px per Figma.
   gap between pills: 20px on .wv-shop-cats__track.
   ────────────────────────────────────────────── */
.wv-shop-cats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.wv-shop-cats__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: clamp(16px, 4vw, 48px);
  padding-block: 4px;
}

.wv-shop-cats__track::-webkit-scrollbar {
  display: none;
}

.wv-shop-cats__pill {
  flex-shrink: 0;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 48px 2px;
  border: 1px solid var(--wv-color-text-primary);
  border-radius: var(--wv-radius-sm);
  background: transparent;
  font-family: var(--wv-font-primary);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
  text-transform: uppercase;
  white-space: nowrap;
  transition: var(--wv-transition-color);
}

.wv-shop-cats__pill:hover {
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
}

.wv-shop-cats__pill--active {
  background: var(--wv-color-text-primary);
  color: var(--wv-color-text-inverse);
}

/* .wv-shop-cats__arrow rules now live in the .wv-arrow-btn block above
   (re-added v41). They're a temp alias until parts/shop-cats.php is
   migrated to use .wv-arrow-btn directly — see project TODO memory. */

/* Toolbar */
.wv-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  border-top: 1px solid rgba(42, 43, 20, 0.15);
  border-bottom: 1px solid rgba(42, 43, 20, 0.15);
  margin-bottom: 32px;
}

.wv-shop-toolbar__filter,
.wv-shop-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--wv-font-primary);
  font-weight: 300;
  font-size: 20px;
  line-height: 70px;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
  cursor: pointer;
}

.wv-shop-toolbar__filter svg,
.wv-shop-toolbar__sort svg {
  width: auto;
  height: 20px;
  color: var(--wv-color-text-primary);
}

.wv-shop-toolbar__filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: var(--wv-radius-pill);
  background: var(--wv-color-accent);
  color: var(--wv-color-text-inverse);
  font-family: var(--wv-font-primary);
  font-size: 11px;
  font-weight: var(--wv-weight-semibold);
  padding: 0 6px;
}

.wv-shop-toolbar__filter-badge:empty {
  display: none;
}

/* Active Filter Pills */
.wv-shop-pills {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-top: -20px;
  padding-bottom: 12px;
}

.wv-shop-pills__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.wv-shop-pills__right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wv-shop-pills__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--wv-color-border);
  border-radius: var(--wv-radius-pill);
  background: transparent;
  font-family: var(--wv-font-primary);
  font-size: 12px;
  font-weight: var(--wv-weight-regular);
  color: var(--wv-color-text-primary);
  cursor: pointer;
  transition: border-color var(--wv-transition-fast), background var(--wv-transition-fast);
}

.wv-shop-pills__pill:hover {
  border-color: var(--wv-color-text-primary);
  background: var(--wv-color-surface);
}

.wv-shop-pills__pill svg {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.wv-shop-pills__clear {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--wv-font-primary);
  font-size: 12px;
  font-weight: var(--wv-weight-medium);
  color: var(--wv-color-text-secondary);
  cursor: pointer;
  text-decoration: underline;
}

.wv-shop-pills__clear:hover {
  color: var(--wv-color-text-primary);
}

/* Product Grid */
.wv-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 288px));
  gap: clamp(16px, 2vw, 24px);
  justify-content: center;
}

/* Load More */
.wv-shop__load-more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.wv-shop__load-more-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--wv-font-primary);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--wv-color-text-primary);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--wv-transition-base);
}

.wv-shop__load-more-btn svg {
  display: block;
  flex-shrink: 0;
}

.wv-shop__load-more-btn:hover {
  color: var(--wv-color-text-link-hover);
}

.wv-shop__load-more-icon svg {
  width: 35px;
  height: 35px;
}

.wv-shop__no-products {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--wv-font-primary);
  font-size: 18px;
  color: var(--wv-color-text-secondary);
  padding: 60px 0;
}

/* ═══════════════════════════════════════════
   QUIZ CTA — reusable component (Figma node 31:48)
   Variants: large (412x116), sidebar (206x128), tiny (88x32)
   ═══════════════════════════════════════════ */

/* ── Shared ── */
.wv-quiz-cta {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: opacity var(--wv-transition-base);
}

.wv-quiz-cta:hover {
  opacity: 0.92;
}

.wv-quiz-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wv-quiz-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wv-quiz-cta__label {
  font-family: var(--wv-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 15.3px;
  letter-spacing: 0;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.wv-quiz-cta__heading {
  font-family: var(--wv-font-serif);
  font-weight: 400;
  color: #fcfdf6;
}

.wv-quiz-cta__heading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.wv-quiz-cta__icon {
  color: #ffffff;
  flex-shrink: 0;
}

.wv-quiz-cta__body {
  font-family: var(--wv-font-primary);
  font-weight: 400;
  font-size: 12px;
  line-height: 15.2px;
  letter-spacing: -0.36px;
  color: #ffffff;
}

.wv-quiz-cta__body-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffffff;
}

.wv-quiz-cta__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 11px;
}

/* ── Large (412x116) — footer/marketing ── */
.wv-quiz-cta--large {
  width: 100%;
  max-width: 412px;
  border-radius: var(--wv-radius-lg);
}

.wv-quiz-cta--large .wv-quiz-cta__content {
  padding: 20px 24px;
  min-height: 116px;
  justify-content: center;
}

.wv-quiz-cta__heading--large {
  font-size: 48px;
  line-height: 52.8px;
  letter-spacing: -1.92px;
}

.wv-quiz-cta--large .wv-quiz-cta__body {
  margin-top: 4px;
}

/* ── Sidebar (206x128) — account sidebar/nav ── */
.wv-quiz-cta--sidebar {
  width: 100%;
  max-width: 206px;
  border-radius: 12px;
}

/* Sidebar: 206x128, all text centered, content vertically centered */
.wv-quiz-cta--sidebar .wv-quiz-cta__content {
  padding: 14px 10px;
  height: 128px;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.wv-quiz-cta__heading--sidebar {
  font-size: 30px;
  line-height: 33px;
  letter-spacing: -1.2px;
  white-space: nowrap;
}

.wv-quiz-cta--sidebar .wv-quiz-cta__label {
  font-size: 12px;
}

.wv-quiz-cta--sidebar .wv-quiz-cta__body {
  font-size: 12px;
}

.wv-quiz-cta--sidebar .wv-quiz-cta__body-row {
  margin: 0;
  gap: 6px;
}

/* ── Tiny (88x32) — header pill ── */
.wv-quiz-cta--tiny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 32px;
  background: var(--wv-color-quiz);
  color: var(--wv-color-text-inverse);
  font-family: var(--wv-font-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.45px;
  line-height: 19px;
  text-transform: uppercase;
  border-radius: var(--wv-radius-lg);
  transition: background var(--wv-transition-base);
}

.wv-quiz-cta--tiny:hover {
  background: var(--wv-color-quiz-hover);
  opacity: 1;
}

/* ═══════════════════════════════════════════
   FOOTER — from Figma node 40:152
   ═══════════════════════════════════════════ */
.wv-footer {
  position: relative;
  background: var(--wv-color-background);
}

/* Authorized change — user approved 2026-04-03.
   Constrains footer content to match header max-width (1440px).
   2026-06-02 (v53): padding switched to --wv-page-gutter token to
   match header alignment after the gutter rename / 48px desktop
   change. Token cascade handles tier values (16/40/48 mobile/
   tablet/desktop) automatically, so the mobile-first override
   blocks below for this property are now redundant; left in place
   to keep the diff focused on the gutter alignment. */
.wv-footer__inner {
  max-width: var(--wv-container-max);
  margin: 0 auto;
  padding: 0 var(--wv-page-gutter);
}

.wv-footer__bg {
  position: absolute;
  inset: 0;
  background: var(--wv-color-surface);
  z-index: -1;
}

/* ── Footer Top ── */
/* Tagline row sits between two horizontal rules that extend to the
   viewport edge (v62). Pseudo-elements positioned via
   left/right: calc(50% - 50vw) escape the .wv-footer__inner padding
   and span the full viewport regardless of container width. */
.wv-footer__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.wv-footer__top::before,
.wv-footer__top::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 1px;
  background: var(--wv-color-text-primary);
  pointer-events: none;
}
.wv-footer__top::before { top: 0; }
.wv-footer__top::after  { bottom: 0; }

.wv-footer__logo {
  width: 223px;
  height: auto;
}

.wv-footer__tagline {
  font-family: var(--wv-font-primary);
  font-size: 24px;
  font-weight: 400;
  color: var(--wv-color-text-primary);
  margin: 0;
}

/* ── Footer Middle ── */
.wv-footer__middle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 41px;
  padding: 40px 0 22px;
}

.wv-footer__left {
  flex: 0 0 553px;
  display: flex;
  flex-direction: column;
  gap: 41px;
}

.wv-footer__email-wrap {
  /* Lives inside .wv-footer__left now (v59), so width is governed by
     __left's flex-basis at each breakpoint. Only the internal stack
     rule belongs here. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Email Signup Heading */
.wv-footer__signup-heading {
  font-family: var(--wv-font-primary);
  font-size: var(--wv-text-lg);
  font-weight: 400;
  color: var(--wv-color-text-primary);
  margin: 0 0 8px;
}

/* Disclaimer */
.wv-footer__disclaimer {
  font-family: var(--wv-font-primary);
  font-size: 11px;
  font-weight: 700; /* FDA 21 CFR 101.93(e) requires boldface — do not change */
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--wv-color-text-primary);
  margin: 16px 40px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--wv-color-text-primary);
  border-radius: 8px;
}

/* ── Footer Nav ── */
.wv-footer-nav {
  flex: 1;
  display: flex;
  gap: 30px;
  padding-left: 0;
}

.wv-footer-nav__col {
  flex: 1;
}

.wv-footer-nav__label {
  font-family: var(--wv-font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: -0.45px;
  color: var(--wv-color-text-primary);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.wv-footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wv-footer-nav__list li {
  margin: 0;
}

.wv-footer-nav__list a {
  display: block;
  padding: 5.5px 0;
  font-family: var(--wv-font-primary);
  font-size: 15.7px;
  font-weight: 400;
  line-height: 18.8px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--wv-color-text-primary);
  transition: color var(--wv-transition-base);
}

.wv-footer-nav__list a:hover {
  color: var(--wv-color-text-link-hover);
}

/* ── Footer Bottom ──
   Vertical stack of two rows (v60):
     row 1 — legal links (terms | privacy | accessibility)
     row 2 — copyright (left) + social (right), via .wv-footer__bottom-row
   16px gap between the horizontal line and the legal row mirrors the
   disclaimer's 16px margin-bottom-to-line gap above the border. */
.wv-footer__bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0 22px;
}
/* Horizontal rule above the legal row extends to viewport edge (v62). */
.wv-footer__bottom::before {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: 0;
  height: 1px;
  background: var(--wv-color-text-primary);
  pointer-events: none;
}

.wv-footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wv-footer__copyright {
  font-family: var(--wv-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--wv-color-text-primary);
}

.wv-footer__legal {
  text-align: center;
}

.wv-footer__legal a,
.wv-footer__legal-divider {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--wv-color-text-primary);
}

.wv-footer__legal a {
  text-transform: uppercase;
  transition: color var(--wv-transition-base);
}

.wv-footer__legal a:hover {
  color: var(--wv-color-text-link-hover);
}

.wv-footer__legal-divider {
  margin: 0 8px;
  opacity: 0.5;
}

.wv-footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wv-footer__social a {
  display: inline-flex;
  opacity: 0.8;
  transition: opacity var(--wv-transition-base);
}

/* Force the two social PNGs into identical 20×20 boxes with letterbox
   so their differing native aspect ratios (FB 22×41 vs IG 52×47) can't
   visually distort. Replaces v59's reliance on width/height attrs alone. */
.wv-footer__social img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.wv-footer__social a:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════
   v49 (2026-06-01): tablet values folded into the existing min-width:
   768 block below; desktop values moved into a new min-width: 1280
   block. Original max-width: 1279 block removed. */

/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile-first base
   ─────────────────────────────────────────────
   Rules below apply at all viewports as the mobile base. The
   @media (min-width: 768px) block that follows restores the
   desktop values (which also still live in the original base
   rules earlier in this file — see lines ~273, 289, 497, etc.).
   Pre-v48 these were a single @media (max-width: 767px) block.
   Refactored 2026-06-01 for mobile-first compliance.

   Cart hit target: 44×44 (WCAG). 19×19 glyph centers inside
   the larger box. Matches the hamburger's 44×44 touch area
   on the opposite side. (Comment retained from prior version.)

   .wv-mega__inner mobile override moved to wv-mega-menu.css (v45).
   ═══════════════════════════════════════════ */

:root {
  --wv-page-gutter: 16px;
  --wv-header-height: 48px;
}

.wv-header__logo {
  width: 160px;
  height: auto;
}

.wv-header__left,
.wv-header__right {
  flex: 1;
  gap: 16px;
}

.wv-header__left  { justify-content: flex-start; }
.wv-header__right { justify-content: flex-end;   }

.wv-header-icon--cart {
  width: 44px;
  height: 44px;
}

.wv-footer__inner {
  padding: 0 var(--wv-page-gutter);
}

.wv-footer__top {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.wv-footer__tagline {
  font-size: 20px;
  line-height: 28px;
}

.wv-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 16px;
  padding-left: 20px;
  order: 2;
}

.wv-footer-nav__col {
  flex: 0 0 calc(50% - 16px);
}

.wv-footer__middle {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 0;
}

.wv-footer__left {
  order: 1;
  margin-bottom: 25px;
  gap: 12px;
  flex: none;
  width: 100%;
}

.wv-footer__bottom {
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}

.wv-trust-bar {
  flex-direction: column;
  gap: 16px;
}

.wv-product-card {
  flex: 0 0 220px;
  width: 220px;
}

.wv-product-card--active {
  flex: 0 0 250px;
  width: 250px;
}

.wv-breadcrumbs,
.wv-shop__heading {
  display: none;
}

.wv-shop-cats__arrow {
  display: none;
}

.wv-shop-cats__pill {
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
}

.wv-shop__load-more-btn {
  font-size: 22px;
}

/* ═══════════════════════════════════════════
   Tablet overrides — restore values at ≥768px
   ─────────────────────────────────────────────
   v49 (2026-06-01): adjusted to use tablet-tier values that the
   former max-width: 1279 block produced (40px header padding,
   230px header column flex, 40px footer padding, 320px footer
   column flex, 40px hero padding/gap, 50px hero heading,
   40px first5 padding, 24px first5 track gap). Desktop-tier
   values live in the min-width: 1280 block below.
   ═══════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --wv-page-gutter: 40px;
    --wv-header-height: 81px;
  }

  .wv-header__logo {
    width: 223px;
    height: 55px;
  }

  .wv-header__left,
  .wv-header__right {
    flex: 0 0 230px;
    gap: 0;
    justify-content: space-between;
  }

  .wv-header-icon--cart {
    width: auto;
    height: auto;
  }

  .wv-footer__inner {
    padding: 0 var(--wv-page-gutter);
  }

  .wv-footer__top {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .wv-footer__tagline {
    font-size: 24px;
    line-height: normal;
  }

  .wv-footer-nav {
    flex: 1;
    flex-wrap: nowrap;
    gap: 20px;
    padding-left: 0;
    order: 0;
  }

  .wv-footer-nav__col {
    flex: 1;
  }

  .wv-footer__middle {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 41px;
    padding-bottom: 22px;
  }

  .wv-footer__left {
    order: 0;
    margin-bottom: 0;
    gap: 41px;
    flex: 0 0 320px;
    width: auto;
  }


  .wv-trust-bar {
    flex-direction: row;
    gap: 24px;
  }

  .wv-product-card {
    flex: revert;
    width: revert;
  }

  .wv-product-card--active {
    flex: revert;
    width: revert;
  }

  .wv-breadcrumbs,
  .wv-shop__heading {
    display: revert;
  }

  .wv-shop-cats__arrow {
    display: revert;
  }

  .wv-shop-cats__pill {
    height: 55px;
    padding: 0 48px 2px;
    font-size: revert;
  }

  .wv-shop__load-more-btn {
    font-size: 30px;
  }
}

/* ═══════════════════════════════════════════
   Desktop overrides — restore values at ≥1280px
   ─────────────────────────────────────────────
   v49 (2026-06-01): new tier added. Restores the desktop values that
   the pre-v49 min-width: 768 block was setting directly (80px header
   padding, 250px header column flex, 80px footer padding, 553px footer
   column flex, 30px footer-nav gap, 100/62 hero padding/gap, 70px
   hero heading, 80px first5 padding, 50px first5 track gap, centered).
   ═══════════════════════════════════════════ */
@media (min-width: 1280px) {
  :root {
    --wv-page-gutter: 48px;
  }

  .wv-header__left,
  .wv-header__right {
    flex: 0 0 250px;
  }

  .wv-footer__inner {
    padding: 0 var(--wv-page-gutter);
  }

  .wv-footer-nav {
    flex: revert;
    gap: 30px;
  }

  .wv-footer__left {
    flex: 0 0 553px;
  }

}

/* ============================================================
   MOBILE MENU DRAWER
   Added: mobile nav drawer + hamburger
   ============================================================ */

/* Utility — desktop only / mobile only
   Mobile-first: .wv-desktop-only is hidden by default (mobile),
   revealed at tablet+. .wv-mobile-only is the inverse. */
.wv-desktop-only {
  display: none !important;
}

@media (min-width: 768px) {
  .wv-desktop-only {
    display: revert !important;
  }
  .wv-mobile-only {
    display: none !important;
  }
}

/* Hamburger button — mobile-first: visible on mobile, hidden ≥ tablet. */
.wv-header-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.wv-header-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--wv-color-text-primary);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (min-width: 768px) {
  .wv-header-hamburger {
    display: none;
  }
}

/* Mobile menu drawer */
.wv-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85vw;
  max-width: 360px;
  background: var(--wv-color-background);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}

.wv-mobile-menu.is-open {
  transform: translateX(0);
}

body.admin-bar .wv-mobile-menu {
  top: 32px;
}

/* ⚠ KEEP-AS-IS / DO NOT REFACTOR — WP admin-bar height boundary. */
@media (max-width: 782px) {
  body.admin-bar .wv-mobile-menu {
    top: 46px;
  }
}

/* Hide drawer entirely on desktop */
@media (min-width: 768px) {
  .wv-mobile-menu,
  .wv-mobile-overlay {
    display: none !important;
  }
}

/* Drawer header */
.wv-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 16px 0;
  flex-shrink: 0;
}

.wv-mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--wv-color-text-primary);
}

/* Drawer body */
.wv-mobile-menu__body {
  flex: 1;
  padding: 16px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Quiz CTA */
.wv-mobile-menu__quiz-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wv-color-quiz);
  color: var(--wv-color-background);
  font-family: var(--wv-font-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: var(--wv-radius-pill);
  margin-bottom: 16px;
}

/* Nav list */
.wv-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.wv-mobile-menu__item {
  border-bottom: 1px solid var(--wv-color-border);
}

/* Top-level links */
.wv-mobile-menu__link {
  display: flex;
  align-items: center;
  padding: 16px 0;
  font-family: var(--wv-font-primary);
  font-size: 16px;
  font-weight: 600;
  color: var(--wv-color-text-primary);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* SHOP static section label */
.wv-mobile-menu__group-label {
  font-family: var(--wv-font-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wv-color-text-primary);
  margin: 0 0 0;
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--wv-color-text-primary);
}

/* Sub-group container */
.wv-mobile-menu__sub-group {
  border-bottom: 1px solid var(--wv-color-border);
}

/* Sub-section trigger */
.wv-mobile-menu__sub-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--wv-font-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wv-color-text-primary);
}

/* Chevron */
.wv-mobile-menu__group-chevron {
  flex-shrink: 0;
  transition: transform var(--wv-transition-fast);
}

.wv-mobile-menu__sub-group--collapsed .wv-mobile-menu__group-chevron {
  transform: rotate(-90deg);
}

/* Accordion body */
.wv-mobile-menu__group-body {
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Sub-list */
.wv-mobile-menu__sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.wv-mobile-menu__sub-link {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--wv-font-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wv-color-text-secondary);
  text-decoration: none;
  transition: background 0.12s;
}

.wv-mobile-menu__sub-link:hover {
  background: var(--wv-color-surface);
}

.wv-mobile-menu__sub-link--featured {
  color: var(--wv-color-accent);
}

.wv-mobile-menu__section-label {
  font-family: var(--wv-font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wv-color-text-secondary);
  margin: 4px 0 2px;
  padding-left: 10px;
}

/* Fix 1: Chevron default state — collapsed points right, expanded points down */
.wv-mobile-menu__sub-group .wv-mobile-menu__group-chevron {
  transform: rotate(-90deg);
}

.wv-mobile-menu__sub-group:not(.wv-mobile-menu__sub-group--collapsed)
  .wv-mobile-menu__sub-trigger[aria-expanded="true"]
  .wv-mobile-menu__group-chevron {
  transform: rotate(0deg);
}

/* Fix 2: Sub-link indent inside accordion bodies */
.wv-mobile-menu__group-body .wv-mobile-menu__sub-link {
  padding-left: 20px;
}

/* Fix 3: Featured standalone triggers (Bundles, Subscribe) */
.wv-mobile-menu__sub-trigger--featured {
  padding-top: 14px;
  padding-bottom: 14px;
  color: var(--wv-color-text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--wv-font-primary);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Fix 4: Separate shop section from account links */
.wv-mobile-menu__list > .wv-mobile-menu__item:first-child {
  margin-bottom: 16px;
}

/* Fix 5: Quiz CTA top spacing */
.wv-mobile-menu__header {
  padding: 20px 16px 8px;
}

/* Overlay */
.wv-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.wv-mobile-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Body scroll lock */
body.wv-mobile-menu-open {
  overflow: hidden;
}