/** Shopify CDN: Minification failed

Line 11362:2 Unexpected "{"
Line 11362:3 Expected identifier but found "%"
Line 11362:18 Unexpected "`"
Line 11364:71 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:al-about-hero (INDEX:1) */
.al-about-hero {
    position: relative;
    overflow: hidden; /* the backdrop is absolute to this box; this is what clips its overhang */
    background: var(--al-base);
  }

  /* ---- Backdrop image — MIRRORS al-hero__media (al-hero.liquid:222-230) ---------------------------
     ABSOLUTE full-bleed backdrop behind ALL content, on every breakpoint: left:0; right:0 (so it runs
     the full section width — the section is already full-bleed here, hence no 100vw/negative-margin
     breakout of its own), oversized top/height for the parallax bleed budget, z-index 0, will-change.
     No framing box, no aspect card, no band width — nothing image-dependent, so swapping images cannot
     shift layout (zero CLS).

     THE ONE DELIBERATE UNIT DIFFERENCE (kept from the 2026-07-25 build, and why): al-hero uses
     `top:-12%; height:124%`, a PERCENTAGE of its own height. A percentage `top` resolves against the
     section height, so when the Nohemi swap reflowed the headline the section grew and this box's TOP
     EDGE moved with it — a real layout shift (measured 0.0167 CLS, attributed to this figure). The
     homepage escapes it because its hero sits on a 100svh floor that the swap does not move; this
     section, with a coda below the first screen, is content-sized and does. So the overhang is
     expressed in VIEWPORT units, sized to the homepage's actual rendered headroom rather than to its
     percentage: al-hero computes -12% × 1331px = -160px at 1440×900, and -18vh = -162px. Same box,
     font-swap-proof. Headroom-to-drift ratio also matches the homepage: 18vh vs the 0.115·vh peak
     drift = 1.55×, exactly al-hero's 160px vs 103px. */
  .al-about-hero__media {
    position: absolute;
    left: 0;
    right: 0;
    top: -18vh;
    height: calc(100% + 36vh);
    /* <figure> default margin would inset an absolutely-positioned left:0/right:0 box (al-hero uses a
       plain div and needs no reset). Structural, not sizing. */
    margin: 0;
    z-index: 0;
    will-change: transform; /* curtain entrance zoom (scale) + drift (y) compose here */
  }

  /* Identical to al-hero__img (al-hero.liquid:232-238) — unchanged by this pass. */
  .al-about-hero__media :is(img, .al-about-hero__img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%; /* same framing bias as al-hero__img */
    display: block;
  }

  /* NO VEIL / SCRIM / GRADIENT OF ANY KIND on this hero (owner, 2026-07-26). The ported al-hero__veil
     mirror (`.al-about-hero__veil` + the `overlay_opacity` setting + the `--al-about-overlay` custom
     property) is REMOVED: even at its 42% ceiling it washed the photograph and cost the hero the
     immersive editorial feel that the full-bleed pass was for. The headline stays --al-brand violet for
     brand + homepage consistency; text-vs-image legibility is owned by IMAGE SELECTION, not by a
     lightening layer. Do not reintroduce one. */

  /* ---- The first screen: a LEFT→RIGHT story (restructured 2026-07-26) -----------------------------
     Composition, escape-style: the XL statement anchors the UPPER LEFT, the supporting statement sits
     at the LOWER RIGHT, so the eye travels across the frame — big intro left, answer right — instead of
     stacking two left-aligned blocks down one edge (the old lower-LEFT support).

     LEFT GUTTER = THE HOMEPAGE'S, EXACTLY. al-hero__content's left padding is
     `clamp(20px, 3.6vw, 72px)` (al-hero.liquid:273) → 51.8px @1440. This section used
     `clamp(20px, 6vw, 96px)` on all three sides → 86.4px, so the About headline started 35px further
     in than the homepage's. Left is now the homepage token; right/top/bottom keep this section's own
     (the right gutter stays 6vw so the right-hand statement clears the overlaid icon rail). */
  .al-about-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 78svh;
    padding: clamp(120px, 20vh, 240px) clamp(20px, 6vw, 96px) clamp(48px, 8vh, 96px)
      clamp(20px, 3.6vw, 72px);
  }

  /* NO band reservation and NO down-scaled headline any more (both REMOVED 2026-07-26 with the band).
     They existed solely because `--al-about-media-w: 34vw` stole a third of the column: the content
     needed `padding-right: calc(band + gutter)`, and --al-fs-hero (clamp(48px, 11.4vw, 208px)) had to
     be scaled to clamp(44px, 9.6vw, 176px) because `confidence.` (≈5.3× the font-size) overflowed the
     806px remainder. With the backdrop full-bleed the column is the homepage's column, so the homepage
     token fits again: at 1440 the headline caps at 64vw = 921px and the widest word paints 875px; at
     1024, 655px vs 622px. Verified painted-word widths, not just element rects (CLAUDE guardrail). */

  /* MEASURE (fixed 2026-07-25): this wrapper previously carried `max-width: min(100%, 24ch)`. `ch`
     resolves against the WRAPPER's own font (Montserrat 14px → 1ch = 9.27px), not the Nohemi display
     face inside it, so the lead column clamped to ~222px — narrower than the mobile column — which
     forced the headline to wrap one word per line and ballooned the hero past 1.8 viewports. The
     measure belongs on the display ELEMENT, where `ch` resolves against the face it's measuring
     (homepage idiom, al-hero.liquid:299). Each child now self-constrains: headline below, support 44ch. */
  .al-about-hero__lead {
    min-width: 0;
    max-width: 100%;
  }

  /* Type comes from .al-eyebrow--lg (13px, al-utilities.css) — layout only here.
     13px is the intentional larger editorial variant, NOT drift to fold to 11px. */
  .al-about-hero__eyebrow {
    display: block;
  }

  /* The largest thing on the page — the hero reveal headline. */
  .al-about-hero__headline {
    margin: clamp(18px, 2.4vh, 34px) 0 0;
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: var(--al-fs-hero);
    line-height: 0.9;
    letter-spacing: var(--al-tracking-hero);
    color: var(--al-brand);
    text-wrap: balance;
    /* Homepage idiom (al-hero.liquid:299 `min(64vw, 13ch)`): the vw term caps the editorial column,
       the ch term is the type measure — and HERE `ch` resolves against Nohemi, the face being
       measured (1ch ≈ 117px @1440), which is the whole point of siting it on this element. */
    max-width: min(64vw, 14ch);
  }
  /* No word-layout override: the shared al-word-reveal.css default (inline-block words, stable line
     box, normal word-by-word wrap) is exactly what this headline wants — unlike the homepage hero,
     which overrides to one-word-per-line. Leaving the default keeps the split line-box stable. */

  /* BEAT 2 — the supporting STATEMENT, lower RIGHT (was a lower-LEFT 16px paragraph). Second voice in
     the story, so it is sized as a statement (--al-fs-h2, 45px @1440) rather than body copy, and it
     answers the headline from the opposite corner: margin-top:auto drops it to the foot of the screen,
     margin-left:auto + align-self:flex-end push it to the right gutter. It stays the BODY face — the
     size and weight give it presence while the face keeps it clearly *supporting*, so it never competes
     with the two Nohemi statements above and below it.

     WEIGHT 600, NOT 700 (owner: "bold", 2026-07-26). snippets/al-brand-fonts.liquid declares Montserrat
     at 400/500/600 only — `montserrat-v31-latin-700.woff2` sits in assets/ with NO @font-face — so 700
     would render as browser-SYNTHESISED faux bold (smeared stems at 45px), not a real face. 600 is the
     heaviest genuine body weight wired, and it is the weight --al-fs-h2 is documented for
     (al-brand-typography.css:22 "announce (wt 600)"). Adding a 700 face would ship another woff2; that
     is a font-management decision for the owner, not something to slip in here.

     MEASURE IN `em`, NOT `ch` (the wrong-font bug this file has been bitten by twice): `em` resolves
     against THIS element's own computed font-size whatever the face, so the block scales with the type
     instead of against some ancestor's 16px Montserrat. Line-height 1.7 → 1.3: 1.7 is a reading-size
     value and looks like a gap at 45px.

     CLIP REMOVED, TEXT RECOLOURED (2026-07-29, owner experiment). The magazine-clip treatment
     (2026-07-27) is gone in full — no background, no inline padding, no `box-decoration-break`, no
     wrapper span. The statement is bare text over the photograph. Size (--al-fs-h2 / 45px), weight (600)
     and placement (lower-right desktop, under-title mobile) are untouched, as they were through the clip
     pass. Two numbers revert, because both were derived FROM the clip and neither describes un-clipped
     text:

       · LINE-HEIGHT 1.52 → 1.3. 1.52 existed to space the painted per-line bands ~1.8px apart (a band
         being content-area + 2 × 0.13em padding ≈ 1.48em); with no bands to separate, 1.52 is just a
         45px statement with reading-copy leading. 1.3 (58.5px) is the Round-7 value and the right one
         for display-scale type.
       · MEASURE 14.6em → 14em → 14.25em (the last step 2026-07-30 — see SPLIT below). 14.6em
         compensated for the clone padding stealing 2 × 0.32em of usable measure per line; without it the
         text is wider in the same box, so 14.6em is loose. Re-swept 12 → 15.4em un-clipped at 1.3:
         everything ≤ 13.8em breaks FIVE lines with a short 222px tail ("you wear."), and 14em is the
         first four-line value — 627 / 584 / 499 / 493px, ragged right, no orphan. Block height 279px vs
         the clip's 319px, so the first screen gains 40px of photograph.

       · SPLIT CORRECTION, 14em → 14.25em (2026-07-30, story-scroll pass). Giving this paragraph a reveal
         means al-word-reveal.js SPLITS it, and `.al-word-reveal__word` is `display: inline-block` — an
         atomic inline-level box, which takes the line-breaking out of `text-wrap: pretty`'s hands. Same
         glyphs, same measure, different break: at 14em the SPLIT paragraph goes to FIVE lines and
         orphans "you wear." to 225px, reintroducing the exact tail the 2026-07-29 pass measured out.
         Re-swept 14 → 18.5em on the split DOM: 14.25em is the first four-line value
         (632 / 585 / 500 / 497, last line "confidence you wear.") and the most even one; 14.5–15.75em
         also break 4 but at 632/642/442/497, and 16–17.25em orphan "you wear." again. 14.25em was then
         re-checked UN-split (JS-off / no-GSAP), where it still breaks the same clean 4 — so the one value
         is correct in both states, which matters because the un-split DOM is what ships without JS.

     COLOUR --al-ink → --al-muted (#9A86A6) — a SCOPED, DELIBERATE deviation from the brand map's
     "body copy = --al-ink" rule, owner-directed as an experiment for this element and the closing detail
     only. The two Nohemi display beats (headline, tagline) stay --al-brand violet, unchanged. Token only,
     no raw hex. Text-vs-image legibility on this hero is owned by IMAGE SELECTION — deliberately NOT
     evaluated for contrast this pass, and no veil/scrim/panel was added in the clip's place. See the
     ROADMAP Round-10 annotation. */
  .al-about-hero__support {
    margin: auto 0 0 auto;
    align-self: flex-end;
    padding-top: clamp(32px, 5vh, 72px);
    max-width: 14.25em;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-h2);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--al-tracking-body);
    color: var(--al-muted);
    text-wrap: pretty;
    will-change: transform; /* ambient drift binds here (desktop + no-reduced-motion) */
  }

  /* BEAT 3 — the coda: section-level sibling of the screen, so it carries its own gutter, and its left
     edge is the SAME homepage gutter as the headline so the three beats share one left rule.

     The container's `max-width: 30ch` is REMOVED — that was the wrong-font measure again: `ch` resolved
     against the coda DIV's inherited 16px Montserrat (1ch ≈ 9.3px → ~280px), which is why "Made for
     every body." stacked one word per line at 80px type. The measures now live on the type elements
     themselves, in `em`. */
  .al-about-hero__coda {
    position: relative;
    z-index: 2;
    padding: clamp(64px, 12vh, 160px) clamp(20px, 6vw, 96px) clamp(48px, 8vh, 96px)
      clamp(20px, 3.6vw, 72px);
  }

  /* SIZE UNCHANGED (--al-fs-display, 80px @1440) — only the MEASURE loosens. 8em ≈ 640px against this
     element's own Nohemi, wide enough to break "Made for every body." across two lines instead of the
     four one-word lines the 30ch container forced, and still short of a full-width banner. */
  .al-about-hero__tagline {
    margin: 0;
    max-width: 8em;
    font-family: var(--al-font-display);
    font-weight: 500;
    /* LARGE, but a clear step below the hero reveal headline. */
    font-size: var(--al-fs-display);
    line-height: 0.96;
    letter-spacing: var(--al-tracking-hero);
    color: var(--al-brand);
    text-wrap: balance;
  }

  /* BEAT 4 — the closing detail, raised from --al-fs-small (13px) to --al-fs-h3 (34px @1440): the last
     step of the descending hierarchy, not a caption. Its own `em` measure (16em ≈ 544px) keeps it to a
     single line at desktop and lets it wrap naturally below. Margin grows with it so the step reads as
     a beat rather than a stuck-on subtitle.

     COLOUR --al-ink → --al-muted (2026-07-29, same owner experiment as the support statement above) —
     the second and last element in that scoped deviation. Size stays --al-fs-h3; the violet Nohemi
     tagline directly above it is unchanged. */
  .al-about-hero__tagline-support {
    margin: clamp(18px, 2.6vh, 32px) 0 0;
    max-width: 16em;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-h3);
    font-weight: 400;
    letter-spacing: var(--al-tracking-body);
    line-height: 1.35;
    color: var(--al-muted);
    text-wrap: pretty;
  }

  /* ---- DESKTOP STORY-SCROLL (≥1024px) — the tall hero (owner spec 2026-07-30) --------------------
     A ~180vh full-bleed image you scroll THROUGH, with the four beats placed at increasing depths so
     they enter view one after another. Everything here is additive and scoped two ways:

       · @media (min-width: 1024px) — so the `max-width: 1023px` block below is BYTE-UNTOUCHED and the
         mobile treatment (title + paragraph, coda hidden, ~100svh, parallax off) is provably unchanged.
         Story-scroll is desktop-only by spec.
       · .al-about-hero--has-media — the tall runway only makes sense with a photograph in it. With no
         image set, the hero stays content-sized rather than becoming four beats floating in 180vh of
         --al-base. The class is already emitted by the section tag.

     WHY 180vh AND NOT 200vh (the counter-intuitive one — measured, not preference). The source image is
     1440×2160 and the Shopify CDN never upscales past intrinsic, so 2160px is a HARD ceiling on the
     figure's height at 1440 wide. Section height and parallax bleed both spend from that one budget:

         figure height = section height + top bleed + bottom safety  ≤  2160px

     At 200vh (1800px) only 360px of bleed is left → peak drift caps at ~0.23·vh (207px). At 180vh
     (1620px) there is 540px → peak drift ~0.34·vh (306px). So the SHORTER section buys ~50% MORE
     parallax travel, and travel is what reads as depth. 180vh it is. (A taller portrait source — owner
     is sourcing one — lifts the ceiling and would allow 0.45·vh+; nothing here has to change but the
     two bleed numbers and DRIFT.)

     BEAT DEPTHS. The shared reveal fires at `start: 'top 80%'`, i.e. when a beat's top reaches 0.8·vh.
     Beats 2–4 therefore have to sit BELOW 100vh or they are already in view at scroll 0 and reveal
     instantly — which would collapse the story into "everything arrives at once." Depths are in vh, so
     the whole schedule scales with viewport height instead of holding only at 900. Measured @1440×900:

       BEAT 1  headline    top  180px ( 20vh)  → in view at load; ENTRANCE cascade (per-letter), as before
       BEAT 2  support     top  918px (102vh)  → fires at scrollY ~198px   (per-WORD)
       BEAT 3  tagline     top 1287px (143vh)  → fires at scrollY ~567px   (per-letter)
       BEAT 4  S-3XL       top 1513px (168vh)  → fires at scrollY ~793px   (per-letter)
       section natural 1631px (181vh); min-height 1620px is the floor for shorter content

     Three fires spread evenly across the ~731px scroll-through, the last landing as the hero finishes
     filling the frame, then ~150px of pure photograph to close. No DOM restructuring and no grid: the
     depths are vh margins on the elements that already existed, so text that wraps to another line
     pushes its successors down instead of colliding with them. */
  @media screen and (min-width: 1024px) {
    .al-about-hero--has-media {
      min-height: 180vh;
    }

    /* BLEED — ASYMMETRIC, and that asymmetry is the whole trick. The drift is strictly DOWNWARD, so
       headroom is only ever needed at the TOP; the old symmetric `-18vh / +36vh` spent half the pixel
       budget on a bottom overhang no travel can ever reach. 52vh of top headroom against 34vh of peak
       drift is a 1.53× ratio (al-hero's convention is 1.55×), and 4vh at the bottom is subpixel safety
       — at rest the bottom edge already sits 36px below the section's clip.

         figure = 181vh + 52vh + 4vh = 237vh = 2135px @900, vs the 2160px source → NO UPSCALE (25px spare)
         top edge at peak drift = -468px + 306px = -162px → still 162px above the clip

       The no-upscale guarantee holds to a ~915px-tall viewport; taller windows soften until the new
       source lands. Wider-than-1440 viewports already upscaled before this pass (source is 1440 wide) —
       pre-existing, not introduced here. */
    .al-about-hero--has-media .al-about-hero__media {
      top: -52vh;
      height: calc(100% + 56vh);
    }

    /* The content box stops being the thing that sets hero height — the beat margins do. min-height:0
       drops the old 78svh floor (it would now fight the beat depths) and padding-bottom:0 hands the
       gap between beat 2 and beat 3 to the coda's padding-top, so ONE number owns that distance. */
    .al-about-hero--has-media .al-about-hero__content {
      min-height: 0;
      padding-bottom: 0;
    }

    /* Beat 2 to 102vh. This replaces `margin-top: auto` from the base rule — auto pinned the statement
       to the foot of a one-viewport content box, which is exactly the wrong mechanism once the box is
       180vh tall (it would drop the statement to ~170vh and leave nothing between beats). The right/
       lower placement is unchanged: `align-self: flex-end` + `margin-left: auto` still own the
       horizontal, and only the vertical is being re-specified here. */
    .al-about-hero--has-media .al-about-hero__support {
      margin-top: 28vh;
    }

    /* Beat 3 to 143vh (10vh below the statement's bottom). */
    .al-about-hero--has-media .al-about-hero__coda {
      padding-top: 10vh;
    }

    /* Beat 4 to 168vh — a real scroll gap under the tagline rather than the caption-ish
       clamp(18px, 2.6vh, 32px) the coda used when both lines shared one screen. */
    .al-about-hero--has-media .al-about-hero__tagline-support {
      margin-top: 8vh;
    }
  }

  /* ---- Tablet / mobile (<1024px) ----------------------------------------------------------------
     SAME ARCHITECTURE AS DESKTOP, exactly as al-hero.liquid:644-648 states it: the image stays an
     ABSOLUTE BACKDROP and the text flows OVER it — never a stacked image band. The 2026-07-25 stacked
     treatment here (position:relative + aspect-ratio 3/2 + flex `order` on every child) is REMOVED
     with the band it belonged to; with the figure absolute again it is not a flex item at all, so the
     ordering rules it needed are moot and the natural DOM order (screen → coda) is already correct.

     TWO BEATS ONLY BELOW DESKTOP (owner, 2026-07-26: "less on screen, still reads as a story"). The
     mobile hero is now a MAGAZINE COVER — big title + one paragraph of copy over the full-bleed photo —
     so the coda (tagline + detail) is dropped here and the paragraph is retuned from a 26px statement to
     readable lead copy. Desktop ≥1024 is untouched by all of it: every rule below is inside this query.

     SUPERSEDED IN PART 2026-07-30 by the LITE SCROLL-STORY (owner: "make it less plain, still read as a
     story") — see the block at the end of this query. THREE beats now, not two: the tagline returns as a
     closing beat and the paragraph moves below the fold so it reveals on SCROLL rather than on load. What
     survives from the text above: the paragraph's --al-fs-h3 / 1.6 lead-copy treatment, the 92vw headline
     cap, the absolute-backdrop architecture, and "S to 3XL" staying hidden. What does not: "two beats
     only" and the 100svh cover proportion. Everything is still inside this query — desktop ≥1024 remains
     untouched — and the new rules are additionally gated on --has-media, so the no-image hero keeps the
     2026-07-26 treatment exactly. */
  @media screen and (max-width: 1023px) {
    /* NO-IMAGE FALLBACK (unchanged 2026-07-26 behaviour). With a photograph set, the --has-media block at
       the end of this query re-shows the coda and hides ONLY the "S to 3XL" line; this rule is what the
       text-only hero still gets, where a lone tagline floating under the paragraph has no image to sit on
       and no scroll journey to punctuate.

       "S to 3XL, cut for real shapes." stays hidden on mobile in BOTH cases (owner, 2026-07-30), via
       `display:none`, so it leaves the a11y tree along with the layout. NOTE this still drops the
       inclusive-sizing message from the mobile hero entirely — S–3XL appears nowhere else on the About
       page — so it wants a real home in a later About section on mobile, not a hidden one here.
       (`visually-hidden` remains the one-line alternative if the owner wants it kept for screen readers.)
       al-word-reveal.js still splits it and still attaches its ScrollTrigger (both are pure DOM work); a
       zero-box trigger resolves its start immediately and plays the tween on hidden nodes — verified no
       console error, and ScrollTrigger's own resize refresh re-measures if the viewport crosses back to
       desktop. */
    .al-about-hero__coda {
      display: none;
    }

    .al-about-hero__headline {
      /* Homepage idiom (al-hero.liquid:665): open the vw cap so the headline uses the column it has. */
      max-width: 92vw;
    }

    /* COVER PROPORTION: with two beats the content no longer fills the screen — at 390 the section fell
       to ~660px, so the "immersive backdrop" stopped an eighth of a viewport short and the next section
       crowded in. 100svh is the homepage hero's own floor (al-hero.liquid:207) and it turns the leftover
       space into photograph below the type, which is the whole point of the cover composition. */
    .al-about-hero__content {
      min-height: 100svh;
    }

    /* The left→right composition needs two columns' worth of width; below desktop there is only one, so
       the statement unpins from the right gutter and returns to the left rule, DIRECTLY BENEATH the
       title: `margin-top: auto` (which pins it to the foot of the screen on desktop) would otherwise
       open a ~215px hole between title and paragraph now that nothing follows it. It also steps down
       from --al-fs-h2 to --al-fs-h3 (26px → 20px at 390) with line-height 1.6 — at 26/1.3 it read as a
       second statement competing with the title; the brief wants a readable paragraph. Weight stays 600
       (the owner's bold), which at 20px reads as lead copy.

       THE VERTICAL PLACEMENT HERE IS NOW THE NO-IMAGE FALLBACK ONLY. `margin: clamp(28px, 5vh, 56px) 0 0`
       sat the paragraph directly under the title at ~40vh, which put it inside the first screen — so its
       `top 80%` trigger was already satisfied at scroll 0 and it revealed on LOAD, not on scroll. The
       --has-media block at the end of this query overrides the margin-top to push it below the fold; the
       type treatment on this rule (--al-fs-h3 / 1.6 / stretch / 100%) is unchanged and still governs.

       THE SPLIT CHANGED THE WRAPPING HERE TOO (2026-07-30). The paragraph gained a reveal hook, and
       `.al-word-reveal__word` is `display: inline-block`, which takes line-breaking out of
       `text-wrap: balance`'s hands exactly as it does out of `pretty`'s on desktop. Measured SPLIT:
       281/260/222/221 at 360 AND 390 (4 lines), 334/306/348 at 414 and 430 (3 lines, longest LAST),
       450/544 at 768, 576/696 at 1023. No orphan at any width — the last line is 79% of the longest at
       its worst (360/390) — and `scrollWidth` matches the viewport at all six. (Pre-split it was
       332/306/346, three lines, at 390.)

       `text-wrap: balance` REPLACES the inherited `pretty` here. It was the one real fix this breakpoint
       needed pre-split: with a fluid full-width measure the break lands wherever the device puts it, and
       `pretty` orphaned the last line to "wear." (68px) at 390 specifically — no single max-width constant
       fixed it, because 92% cured 390 while creating the same orphan at 414/430. It is KEPT rather than
       removed even though the inline-block split now overrides it, for the two states where it still
       governs: JS-off and no-GSAP, where the paragraph is never split at all. */
    .al-about-hero__support {
      align-self: stretch;
      margin: clamp(28px, 5vh, 56px) 0 0;
      max-width: 100%;
      font-size: var(--al-fs-h3);
      line-height: 1.6;
      text-wrap: balance;
    }

    /* ---- LITE SCROLL-STORY (owner 2026-07-30) — mobile's own version of the desktop story ------------
       THREE beats down a modestly taller hero, revealing one after another as you descend. Deliberately
       NOT the desktop build: no parallax (site rule — the image is static here), no fourth beat, and a
       ~130svh runway rather than 180vh. "Lite" is the whole brief: richer than a static cover, nowhere
       near busy.

       PARALLAX STAYS OFF, and it needs no rule to stay off: al-about-hero-motion.js gates its tween on
       `(min-width: 1024px) and (prefers-reduced-motion: no-preference)` via gsap.matchMedia(), so below
       1024 the tween is never created and the figure keeps `transform: none`. The taller section changes
       nothing about that — verified 0 image transforms at rest and after scrolling.

       WHY THE BLEED IS UNTOUCHED HERE: the base figure rule (`top: -18vh; height: calc(100% + 36vh)`)
       still applies, because the desktop -52vh/+56vh bleed is scoped to `min-width: 1024px`. With zero
       drift there is nothing to hide, so 18vh of overhang is pure surplus — no edge can enter frame.

       ENTRANCE ZOOM: unchanged, which on mobile means there ISN'T one. al-hero-curtain.js's
       `zoomOutHeroImage()` early-returns on `matchMedia('(max-width: 1023px)')` — "zoom-out omitted on
       mobile (score)" — so the image has never zoomed here. The curtain wipe itself still plays (with the
       shorter mobile MIN_HOLD). Flagged rather than added: enabling it would be a change to a scored
       decision in design-reference/al-hero-score.md, not a detail to slip into a layout pass.

       GATED ON --has-media so the text-only hero keeps the 2026-07-26 cover treatment untouched.

       BEAT DEPTHS. Fire point for the shared reveal is `top - 0.8·vh`, so a beat must sit BELOW ~80vh to
       reveal on scroll rather than at load. Measured @390×844 — the numbers the values below were tuned to:

         BEAT 1  title      top  210px ( 24.9vh)  → ENTRANCE, per-letter wave (unchanged)
         BEAT 2  paragraph  top  777px ( 92.1vh)  → fires at scrollY ~102px, per-WORD rise+fade
         BEAT 3  tagline    top 1014px (120.1vh)  → fires at scrollY ~339px, per-letter wave

       At no scroll position are more than TWO beats on screen together (title+paragraph early,
       paragraph+tagline late) — that staggering is what keeps it a story instead of a wall of type. */
    .al-about-hero--has-media {
      min-height: 130svh;
    }

    /* The content box stops driving hero height — the beat margins do (same move as desktop, smaller
       numbers). padding-bottom:0 hands the beat-2→beat-3 gap entirely to the coda's padding-top. */
    .al-about-hero--has-media .al-about-hero__content {
      min-height: 0;
      padding-bottom: 0;
    }

    /* Beat 2 down to ~92svh — the single most important number in this block. Below the ~80vh fire line,
       so the paragraph genuinely waits for a scroll gesture instead of revealing on load (which is what
       it did while it sat at ~40vh under the title). Overrides only the margin-top from the shorthand
       above; the type treatment and `align-self: stretch` are untouched. */
    .al-about-hero--has-media .al-about-hero__support {
      margin-top: 57svh;
    }

    /* Beat 3 — the tagline returns as the closing beat. `display: block` reverses the fallback rule
       above; the S-3XL line stays hidden immediately below, so the coda contributes exactly ONE beat.
       padding-top 8svh is the breathing room under the paragraph; padding-bottom drops from the base
       8vh clamp to 3svh so the third beat fits inside ~130svh instead of pushing the section past it.
       Left/right padding is inherited from the base rule, so the 20px mobile gutter is unchanged. */
    .al-about-hero--has-media .al-about-hero__coda {
      display: block;
      padding-top: 8svh;
      padding-bottom: 3svh;
    }

    /* "S to 3XL, cut for real shapes." stays hidden on mobile (owner) — the coda is re-shown for the
       tagline alone. Same a11y caveat as the fallback rule at the top of this query. */
    .al-about-hero--has-media .al-about-hero__tagline-support {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    .al-about-hero__lead {
      max-width: 100%;
    }
    /* To hide the eyebrow kicker too — leaving literally title + paragraph — uncomment:
       .al-about-hero__eyebrow { display: none; } */
  }
/* END_SECTION:al-about-hero */

/* START_SECTION:al-about-intro (INDEX:2) */
.al-about-intro {
    background: var(--al-base);
    padding: clamp(64px, 12vh, 160px) clamp(20px, 6vw, 96px);
  }

  /* The duplicated .al-breadcrumb block that used to sit here is gone (Phase A1) — the
     component now lives in assets/al-utilities.css, so this section no longer needs its
     own copy to stay independent of the PDP. Only the local spacing stays. */
  .al-about-intro__crumb {
    margin-bottom: clamp(32px, 5vh, 64px);
  }

  /* Big statement block — display type, restrained. */
  .al-about-intro__statement {
    margin: 0;
    max-width: 20ch;
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: var(--al-fs-display);
    line-height: 1.04;
    letter-spacing: var(--al-tracking-hero);
    color: var(--al-brand);
    text-wrap: balance;
    will-change: transform; /* calm ambient drift binds here (desktop + no-reduced-motion) */
  }

  @media screen and (max-width: 749px) {
    .al-about-intro__statement {
      max-width: 100%;
    }
  }
/* END_SECTION:al-about-intro */

/* START_SECTION:al-accordion (INDEX:3) */
.al-faq-group {
    padding-block: clamp(var(--al-space-xl), 6vh, var(--al-space-3xl));
  }

  .al-faq-group__head {
    margin-block-end: var(--al-space-lg);
  }

  /* Type comes from .al-eyebrow (al-utilities.css, Phase A3) — layout only here. */
  .al-faq-group__eyebrow {
    display: block;
    margin-block-end: var(--al-space-xs);
  }

  .al-faq-group__heading {
    margin: 0;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
  }

  /* Cap the row measure. Unconstrained, a row spans the full page-width container: at 1440 the
     question sits at the far left and its ± indicator ~1350px away, which breaks the association
     between the two AND pushes the indicator under the fixed right icon rail (the same collision
     al-collection-header solves with a padding-inline-end top-up). 880px keeps question and
     indicator readably paired and clears the rail outright. */
  .al-faq-group__accordion {
    max-width: 880px;
  }

  /* ---- Row type + colour, declared in full (scoped — the PDP keeps its micro-label) ----
     A question is a sentence, not a label: sentence case, body size, body tracking.
     Geometry, hairlines, the icon state machine and the expand motion come from the
     shared `assets/al-accordion.css`; type, colour and rhythm are stated here because
     the shared base deliberately does not set them. */
  .al-faq-group__accordion .al-accordion__summary {
    font-size: var(--al-fs-body);
    font-weight: 500;
    letter-spacing: var(--al-tracking-body);
    text-transform: none;
    color: var(--al-ink);
    padding-block: var(--al-space-md);
  }

  .al-faq-group__accordion .al-accordion__row[open] .al-accordion__summary {
    color: var(--al-brand);
  }

  .al-faq-group__accordion .al-accordion__panel-inner {
    max-width: 68ch; /* answers are prose — keep the measure readable on a wide page */
    font-size: var(--al-fs-body);
    line-height: 1.7;
    color: var(--al-ink);
    padding-block-end: var(--al-space-md);
  }

  .al-faq-group__accordion .al-accordion__panel-inner a {
    color: var(--al-brand);
    text-underline-offset: 0.2em;
  }
/* END_SECTION:al-accordion */

/* START_SECTION:al-announce (INDEX:4) */
.al-announce {
    padding-inline: clamp(var(--al-space-md), 5vw, var(--al-space-2xl));
  }

  .al-announce__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 4vw, 64px);
    flex-wrap: wrap;
  }

  .al-announce__lede {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vh, 16px);
    min-width: min(100%, 18ch);
  }

  /* .al-announce__eyebrow's type rule is gone (Phase A3) — it declared nothing but the
     five eyebrow properties, which .al-eyebrow now owns. The per-scheme colour rules
     below are kept: each of the four schemes sets --al-rose explicitly, which matches
     the utility's default, but they remain the hook for a scheme wanting a different
     eyebrow colour. */

  .al-announce__heading {
    margin: 0;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: var(--al-tracking-heading);
    max-width: 22ch;
  }

  .al-announce__aside {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    flex-wrap: wrap;
  }

  .al-announce__body {
    margin: 0;
    max-width: 42ch;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-body);
    line-height: 1.6;
  }

  /* CTA geometry / type / motion come from the canonical .al-btn--primary
     (al-utilities.css): tracking 0.12em, padding 16×32 (was the off-scale
     14×28 flagged in the spacing pass — normalised here), 0px, no shadow.
     The PER-SCHEME fills below stay: on the violet / plum bands a solid-violet
     primary would be invisible, so the button inverts to a light fill for
     legibility. That contrast adaptation is intentional, not button drift —
     the surface / base schemes render the literal primary (violet → plum). */

  /* ---- Colour schemes (brand tokens only) -------------------------------------- */
  .al-announce--violet {
    background: var(--al-brand);
    color: var(--al-on-brand);
  }
  .al-announce--violet .al-announce__eyebrow { color: var(--al-rose); }
  .al-announce--violet .al-announce__cta {
    background: var(--al-on-brand);
    color: var(--al-brand);
  }
  .al-announce--violet .al-announce__cta:hover { background: var(--al-surface); }

  .al-announce--plum {
    background: var(--al-plum);
    color: var(--al-on-brand);
  }
  .al-announce--plum .al-announce__eyebrow { color: var(--al-rose); }
  .al-announce--plum .al-announce__cta {
    background: var(--al-on-brand);
    color: var(--al-plum);
  }
  .al-announce--plum .al-announce__cta:hover { background: var(--al-surface); }

  .al-announce--surface {
    background: var(--al-surface);
    color: var(--al-ink);
  }
  .al-announce--surface .al-announce__eyebrow { color: var(--al-rose); }
  .al-announce--surface .al-announce__heading { color: var(--al-brand); }
  .al-announce--surface .al-announce__cta {
    background: var(--al-brand);
    color: var(--al-on-brand);
  }
  .al-announce--surface .al-announce__cta:hover { background: var(--al-plum); }

  .al-announce--base {
    background: var(--al-base);
    color: var(--al-ink);
    border-block: 1px solid color-mix(in srgb, var(--al-muted) 45%, transparent);
  }
  .al-announce--base .al-announce__eyebrow { color: var(--al-rose); }
  .al-announce--base .al-announce__heading { color: var(--al-brand); }
  .al-announce--base .al-announce__cta {
    background: var(--al-brand);
    color: var(--al-on-brand);
  }
  .al-announce--base .al-announce__cta:hover { background: var(--al-plum); }

  /* ---- Mobile: stack, left-aligned --------------------------------------------- */
  @media screen and (max-width: 749px) {
    .al-announce__inner {
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(18px, 4vh, 28px);
    }
    .al-announce__aside {
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(16px, 3vh, 22px);
    }
  }
/* END_SECTION:al-announce */

/* START_SECTION:al-collection-header (INDEX:5) */
/* Band + band-image CSS moved to assets/al-utilities.css (.al-band / .al-band__img)
     and the markup to snippets/al-hero-band-media.liquid — Phase A5. It was duplicated
     byte-for-byte in al-hero-band. Everything below is collection-specific and stays. */

  /* ---- Stop the header centring itself away from the grid at wide viewports -------
     REPORTED AS "the title drifts toward centre on wide screens" (2026-08-15). Real, and
     it is NOT the title: `.al-band-title` (al-utilities.css, A5) sets only type — no
     width, max-width, auto margin or text-align. Measured title-vs-breadcrumb delta is
     0 at every width from 1080 to 3840, because both sit in this section's grid and move
     together. What they drift away from is the CONTENT AROUND THEM: the collection banner
     above and the product grid below are both full-bleed at x=0, while this header was
     capped and centred. Measured gap title-to-first-card: 40px at 1080/1440, 240px at
     1920, 560px at 2560, 1200px at 3840 — unbounded growth, which is what reads as
     "centred".

     Cause is Horizon's `.section` grid (base.css:369), not anything of ours:
       --full-page-grid-central-column-width: min(<page-width capped>, 100% - 2*margin)
       --full-page-grid-margin: minmax(var(--page-margin), 1fr)
     Once the central column hits its cap the `1fr` side columns swallow all remaining
     space and centre the content. PREDATES PHASE A5 — the section has carried
     `section--page-width` since it was created (a5d0bf8, "Collection chrome 3a"); A5 only
     moved the typography out to .al-band-title.

     Fix is one custom-property override, NOT a display/margin change: forcing the central
     column to the fluid branch leaves no slack for the `1fr` side columns, so they resolve
     to exactly --page-margin at every width and the header stays left-anchored. Deliberately
     reuses Horizon's own variable so the grid keeps working (a `display:` change here is
     what broke the PDP topbar's page margin — see that section's note).

     SCOPED TO THE COLLECTION HEADER, not to .al-band / .al-hero-band. al-hero-band shares
     .al-band-title but its neighbours differ: on FAQ and Find-your-fit the following
     section is ALSO page-width, so band and content already agree at every width (measured
     delta 0 at 1080/1920/3840) and widening the band would CREATE a mismatch there. */
  .al-collection-header {
    --full-page-grid-central-column-width: calc(100% - var(--page-margin) * 2);
  }

  /* ---- Breadcrumb (shared .al-breadcrumb component styles it) ------------------- */
  .al-collection-header__breadcrumb {
    padding-block-start: var(--al-space-2xl);
    margin-block-end: var(--al-space-sm);
  }

  /* ---- Title row: giant violet name + superscript count / controls right -------- */
  .al-collection-header__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--al-space-md) var(--al-space-xl);
    flex-wrap: wrap;
    padding-block-end: var(--al-space-md);
  }

  /* Title type comes from .al-band-title (al-utilities.css, Phase A5). The rule that was
     here declared nothing else, so it is gone rather than emptied. The superscript count
     below is collection-only and sizes off the title's own font-size (0.18em). */

  .al-collection-header__count-sup {
    font-family: var(--al-font-body);
    font-weight: 600;
    font-size: 0.18em;
    letter-spacing: var(--al-tracking-body);
    line-height: 0; /* keep the sup from inflating the title's line box */
    color: var(--al-mauve);
    /* ride near the cap top of the giant name (default sup 'super' sits too low
       at this size ratio); em here resolves against the sup's own font-size */
    vertical-align: 2.6em;
  }

  .al-collection-header__controls {
    display: flex;
    align-items: center;
    gap: var(--al-space-md);
    /* nudge up off the title's baseline (design: controls float slightly above) */
    padding-block-end: 0.6em;
  }

  .al-collection-header__count {
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    letter-spacing: var(--al-tracking-body);
    color: var(--al-muted);
    white-space: nowrap;
  }

  @media screen and (min-width: 750px) {
    /* The fixed icon rail overlays the viewport's right 48px (--al-space-xl); the
       page margin alone (40px) leaves the controls under the glass. Top up so the
       control row's right edge lands exactly on the grid's reserved edge. */
    .al-collection-header__row {
      padding-inline-end: max(0px, calc(var(--al-space-xl) - var(--page-margin)));
    }
  }

  @media screen and (max-width: 749px) {
    /* The 320px band floor moved with the band, to .al-band in al-utilities.css — keeping
       a `.al-collection-header__band` rule here would be dead CSS now that no element
       carries that class. */
    .al-collection-header__breadcrumb {
      padding-block-start: var(--al-space-xl);
    }
  }
/* END_SECTION:al-collection-header */

/* START_SECTION:al-contact (INDEX:6) */
/* ---- Shell ------------------------------------------------------------------
     MOBILE FIRST = the image-as-backdrop regime. The section is the positioning
     context; the media fills it absolutely and the panel stacks in front. */
  .al-contact {
    position: relative;
    background: var(--al-base);
    overflow: hidden; /* clips the cover image to the section box */
  }

  .al-contact__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .al-contact__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    display: block;
  }

  /* The vertical padding is what makes the mobile treatment READ as "form on top of a photo":
     without it the card sits flush to the section's top and bottom edges and the backdrop survives
     only as two ~20px slivers down the sides, which looks like a stray border rather than an image.
     Padding here lets the photo breathe above and below the card, so it is legibly the background. */
  .al-contact__panel {
    position: relative;
    z-index: 1;
    padding-block: clamp(var(--al-space-2xl), 9vh, var(--al-space-3xl));
    padding-inline: clamp(var(--al-space-sm), 5vw, var(--al-space-lg));
  }

  /* The OPAQUE card — legibility over the photo is the whole job, so this is a
     solid token fill, not the frosted-glass utility (frost over a busy photo
     costs contrast exactly where the labels are). */
  .al-contact__card {
    background: var(--al-base);
    padding: clamp(var(--al-space-md), 7vw, var(--al-space-xl));
  }

  /* ---- Type -------------------------------------------------------------------- */
  /* h2, not h1 — the hero band above owns the page's h1. */
  .al-contact__heading {
    margin: 0 0 var(--al-space-md);
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: var(--al-fs-h1);
    line-height: 1;
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
  }

  .al-contact__intro {
    margin: 0;
    max-width: 42ch;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-body);
    line-height: 1.6;
    color: var(--al-muted);
  }

  /* ---- Form -------------------------------------------------------------------- */
  /* SPACING IS PER-CHILD MARGINS, NOT `gap` — deliberate, load-bearing.
     Shopify injects its invisible hCaptcha (`div.h-captcha`, a zero-height block wrapping an
     aria-hidden iframe) into this form on the user's FIRST interaction. With `gap` that div becomes
     a flex item and collects a full 32px gap it never gives back: measured 2026-07-31, the form grew
     435 → 467px the instant the name field was focused, permanently, shoving the vertically-centred
     card up 16px. Explicit sibling margins only ever match OUR children, so the injected widget
     contributes nothing and there is no post-interaction shift. (The hidden `input[type=hidden]`s
     are UA `display:none` and were never flex items, which is why they cost nothing either way.)
     A visible hCaptcha challenge renders as its own overlay, not inline, so it needs no spacing. */
  .al-contact__form {
    margin-top: var(--al-space-xl);
    display: flex;
    flex-direction: column;
  }

  .al-contact__field + .al-contact__field,
  .al-contact__errors + .al-contact__field {
    margin-top: var(--al-space-lg);
  }

  .al-contact__field {
    display: flex;
    flex-direction: column;
    gap: var(--al-space-xs);
  }

  /* Labels ARE the eyebrow system (--al-fs-small / 0.22em / uppercase), just in
     --al-muted rather than the rose: three stacked rose labels would out-shout the
     violet hero title, and rose is kept here for the required marker + errors, where
     it carries meaning. Visible, not placeholder-only — the placeholder pattern drops
     the field's name the moment you start typing. */
  /* Type comes from .al-eyebrow--lg (13px). Muted rather than rose — form labels are
     wayfinding, not editorial, so they sit back. Colour via the custom property so no
     per-colour class is needed. (Phase A3) */
  .al-contact__label {
    --al-eyebrow-color: var(--al-muted);
  }

  .al-contact__req {
    color: var(--al-rose);
  }

  .al-contact__textarea {
    resize: vertical;
    min-height: 132px;
  }

  .al-contact__submit {
    align-self: flex-start;
    /* = the field rhythm (32) + the 8 the button previously took from `gap` + margin */
    margin-top: calc(var(--al-space-lg) + var(--al-space-xs));
  }

  /* ---- States ------------------------------------------------------------------ */
  .al-contact__success {
    margin: 0;
    max-width: 40ch;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-body);
    line-height: 1.6;
    color: var(--al-brand);
  }

  .al-contact__errors {
    border-left: 2px solid var(--al-rose);
    padding: var(--al-space-xs) 0 var(--al-space-xs) var(--al-space-sm);
  }

  .al-contact__errors-title,
  .al-contact__errors-list {
    margin: 0;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    line-height: 1.5;
    color: var(--al-rose);
  }

  .al-contact__errors-list {
    margin-top: var(--al-space-xs);
    padding-left: 1.1em;
  }

  .al-contact__field-error {
    margin: 0;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    color: var(--al-rose);
  }

  /* ---- Direct contact ---------------------------------------------------------- */
  .al-contact__direct {
    margin-top: var(--al-space-xl);
    padding-top: var(--al-space-md);
    border-top: 1px solid color-mix(in srgb, var(--al-muted) 40%, transparent);
  }

  /* Type comes from .al-eyebrow (al-utilities.css, Phase A3) — layout only here. */
  .al-contact__direct-eyebrow {
    display: block;
  }

  .al-contact__direct-list {
    margin: var(--al-space-sm) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--al-space-xs);
  }

  .al-contact__direct-link {
    font-family: var(--al-font-body);
    font-size: var(--al-fs-body);
    color: var(--al-brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--al-dur-fast) var(--al-ease);
  }

  .al-contact__direct-link:hover {
    border-bottom-color: var(--al-brand);
  }

  /* ---- DESKTOP ≥1024 — the two-column editorial split -------------------------- */
  @media screen and (min-width: 1024px) {
    .al-contact {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: stretch;
      min-height: min(88vh, 900px);
    }

    /* Media leaves the backdrop role and becomes the LEFT COLUMN — flush to the
       viewport edge (the section is full-bleed here), full column height. */
    .al-contact__media {
      position: relative;
      inset: auto;
      grid-column: 1;
      height: 100%;
    }

    .al-contact__panel {
      grid-column: 2;
      display: flex;
      align-items: center;
      padding-block: clamp(var(--al-space-2xl), 10vh, var(--al-space-4xl));
      padding-inline: clamp(var(--al-space-xl), 6vw, var(--al-space-4xl));
    }

    /* No card on desktop — the form sits on the section's own base, beside the
       photo rather than over it.
       `flex-shrink: 0` IS LOAD-BEARING, not decoration. The panel is a flex container
       inside a `minmax(0, 1fr)` grid track, and in that arrangement the card's
       `width: 100%` gets pulled back to its own max-content by flex shrink: measured
       2026-07-31 it laid out at 383.5px inside a 547.2px content box — 70% — which read
       as a stray narrow column of fields with a dead gutter beside it. Disabling the
       shrink restores the full 547.2px (still capped by max-width). */
    .al-contact__card {
      background: none;
      padding: 0;
      width: 100%;
      flex-shrink: 0;
      max-width: 560px;
    }

    /* Image unset → the panel keeps the left composition instead of centring. */
    .al-contact:not(:has(.al-contact__media)) {
      grid-template-columns: minmax(0, 1fr);
    }

    .al-contact:not(:has(.al-contact__media)) .al-contact__panel {
      grid-column: 1;
    }
  }
/* END_SECTION:al-contact */

/* START_SECTION:al-data-table (INDEX:7) */
.al-data-table__head {
    margin-block-end: var(--al-space-lg);
  }

  /* Type comes from .al-eyebrow (al-utilities.css, Phase A3) — layout only here. */
  .al-data-table__eyebrow {
    display: block;
    margin-block-end: var(--al-space-xs);
  }

  /* Size + display face come from .al-section-head__heading--h3 (Phase A6). */
  .al-data-table__heading {
    margin: 0;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
  }

  /* The table scrolls inside this box rather than pushing the page wide. `tabindex` +
     `role=region` keep the scroll reachable by keyboard.
     Measure cap, same reasoning as al-accordion's 880px: unconstrained the table spans the
     full page-width container, and at 1440 a five-column row of short values stretches to
     ~1360px — the eye travels a long way from the first cell to the last. 920px keeps the
     row scannable. The cap is on the SCROLL box, not the table, so the min-width floor
     below still governs when the region scrolls. */
  .al-data-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: min(100%, 920px);
  }

  .al-data-table__scroll:focus-visible {
    outline: 2px solid var(--al-brand);
    outline-offset: 4px;
  }

  .al-data-table__table {
    width: 100%;
    /* floor keeps the columns legible; below this the region scrolls instead of crushing */
    min-width: 640px;
    border-collapse: collapse;
    text-align: start;
  }

  .al-data-table__table th,
  .al-data-table__table td {
    padding-block: var(--al-space-sm);
    padding-inline: var(--al-space-md);
    text-align: start;
    vertical-align: baseline;
    border-block-end: 1px solid color-mix(in srgb, var(--al-muted) 35%, transparent);
  }

  /* left-composed: the first column sits flush with the page-width edge */
  .al-data-table__table th:first-child,
  .al-data-table__table td:first-child {
    padding-inline-start: 0;
  }

  .al-data-table__table thead th {
    border-block-start: 1px solid color-mix(in srgb, var(--al-muted) 35%, transparent);
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    font-weight: 600;
    letter-spacing: var(--al-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--al-plum);
    white-space: nowrap;
  }

  .al-data-table__rowhead {
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: var(--al-fs-body);
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
    white-space: nowrap;
  }

  .al-data-table__table td {
    font-family: var(--al-font-body);
    font-size: var(--al-fs-body);
    line-height: 1.6;
    color: var(--al-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .al-data-table__note {
    margin-block-start: var(--al-space-md);
    max-width: 68ch;
    font-size: var(--al-fs-small);
    line-height: 1.7;
    color: var(--al-plum);
  }

  .al-data-table__note a {
    color: var(--al-brand);
    text-underline-offset: 0.2em;
  }
/* END_SECTION:al-data-table */

/* START_SECTION:al-email-band (INDEX:8) */
.al-email {
    background: var(--al-base);
    border-top: 1px solid color-mix(in srgb, var(--al-muted) 40%, transparent);
    padding-inline: clamp(var(--al-space-xl), 6vw, var(--al-space-3xl));
  }

  .al-email__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  /* .al-email__eyebrow's type rule is gone (Phase A3) — .al-eyebrow owns it; the element
     declared nothing else. */

  .al-email__heading {
    margin: 20px 0 0;
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--al-tracking-hero);
    color: var(--al-brand);
    max-width: 16ch;
  }

  .al-email__body {
    margin: 22px 0 0;
    max-width: 48ch;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-body);
    line-height: 1.6;
    color: var(--al-ink);
  }

  .al-email__form {
    margin-top: 36px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 480px;
  }

  /* FIELD APPEARANCE MOVED OUT (2026-07-31): fill / border / padding / type / focus now come from
     the shared `.al-input .al-input--boxed` (al-utilities.css), promoted FROM this section — the
     values there are these values, verbatim, so the band renders identically. BOXED, not the
     underline variant the Contact page uses: this field sits INLINE beside a solid violet button,
     where the box gives it its own hit area and balances the button's mass; an underline would read
     as a stray rule next to a filled block. Only the band's LAYOUT role stays here. */
  .al-email__input {
    flex: 1;
    min-width: 220px;
  }

  /* Fill / type / geometry / hover come from the canonical .al-btn--primary
     (al-utilities.css). This submit previously rendered 14px / 0.02em / mixed
     case ("Sign me up"); the primary spec normalises it to 13px / 0.12em /
     uppercase ("SIGN ME UP"). Padding was already on-scale (16×32). No
     email-specific overrides needed — it sits inline beside the field. */

  .al-email__success {
    margin: 0;
    font-family: var(--al-font-body);
    font-size: 15px;
    color: var(--al-brand);
  }

  .al-email__error {
    flex-basis: 100%;
    margin: 4px 0 0;
    font-family: var(--al-font-body);
    font-size: 13px;
    color: var(--al-rose);
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
/* END_SECTION:al-email-band */

/* START_SECTION:al-footer (INDEX:9) */
.al-footer {
    position: relative;
    width: 100%;
    background: var(--al-plum);
    color: var(--al-on-brand);
    overflow: hidden;
  }

  /* ---- 1. Three-column grid ---------------------------------------------------- */
  .al-footer__columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(56px, 8vw, 88px) clamp(28px, 5vw, 64px) clamp(36px, 5vw, 52px);
  }

  .al-footer__col {
    display: flex;
    flex-direction: column;
    gap: 13px;
  }

  .al-footer__col--brand {
    gap: 0;
  }

  .al-footer__mark {
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-on-brand);
  }

  .al-footer__mark-amp {
    color: var(--al-rose);
  }

  /* Optional logo image (replaces the text wordmark when set). Editor-proof: max-height caps every
     uploaded image to the same slot height, so swapping logos never shifts the column layout. */
  .al-footer__logo {
    display: block;
  }

  .al-footer__logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(240px, 70%);
    max-height: clamp(30px, 3.2vw, 44px);
    object-fit: contain;
    object-position: left center;
  }

  .al-footer__blurb {
    margin: 18px 0 0;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    line-height: 1.7;
    /* cream at reduced opacity (was off-token #E7DEEA 78%) */
    color: color-mix(in srgb, var(--al-on-brand) 78%, transparent);
    max-width: 34ch;
    text-wrap: pretty;
  }

  /* Type comes from .al-eyebrow (Phase A3). Two deliberate deviations kept:

     1. COLOUR — rose at 80% rather than flat rose, "a quiet editorial label" per the
        original note. Applied through the custom property, so no per-colour class.
     2. FONT-WEIGHT — resolved. This rule never declared one, so the head inherited 400
        from when it was written; A3 pinned `font-weight: inherit` to avoid an
        unsanctioned visible change. Alex has since called it: the lighter weight was
        drift, not intent, so the pin is gone and the head now takes the utility's 600
        like every other .al-eyebrow site. */
  .al-footer__col-head {
    margin-bottom: 4px;
    --al-eyebrow-color: color-mix(in srgb, var(--al-rose) 80%, transparent);
  }

  .al-footer__link {
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    letter-spacing: 0.04em;
    /* cream at reduced opacity (was off-token #E7DEEA 86%) */
    color: color-mix(in srgb, var(--al-on-brand) 86%, transparent);
    text-decoration: none;
    transition: color var(--al-dur-fast) var(--al-ease);
  }

  .al-footer__link:hover {
    color: var(--al-rose);
  }

  /* ---- 2. Tall editorial image band -------------------------------------------- */
  .al-footer__band {
    position: relative;
    height: clamp(240px, 32vw, 520px);
    margin-top: clamp(20px, 3vw, 36px);
    background: var(--al-plum); /* was off-token #281C40 */
    overflow: hidden;
  }

  /* Soft plum duotone. mix-blend luminosity over the plum bg maps the photo's FULL tonal range
     onto the plum hue (near-black shadows → light-plum highlights), so the subject stays fully
     readable — no posterize, no crush. opacity < 1 lets a trace of the original colour through
     so skin/hair read warm rather than flat-monochrome. */
  .al-footer__band-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    mix-blend-mode: luminosity;
    opacity: 0.92;
  }

  /* Arrival fade (al-footer-band.js) — replaces the late-load POP. The script arms the band
     (image → opacity 0) then, once the image is DECODED off the entry frame, reveals it (fade to the
     rest 0.92). Geometry is reserved (fixed band height) → zero CLS. JS-OFF never gets these classes,
     so the image shows at its rest opacity with no fade (native lazy still loads it). */
  .al-footer__band--armed .al-footer__band-img {
    opacity: 0;
    will-change: opacity; /* only while entering — JS drops --armed when it reveals */
  }
  .al-footer__band--revealed .al-footer__band-img {
    opacity: 0.92;
    transition: opacity var(--al-dur-slow, 0.6s) var(--al-ease, ease);
  }
  @media (prefers-reduced-motion: reduce) {
    /* No motion — the image simply appears when decoded (decode-ahead still prevents the stall). */
    .al-footer__band--revealed .al-footer__band-img { transition: none; }
  }

  /* Fine halftone dot-screen — a live CSS dot grid, image-independent (swap-safe). A delicate
     3px grid of small dots, multiplied over the tones for a print-like grain — NOT a heavy
     stipple. Intensity (editor 0–100 → 0–1) drives its opacity so it can be tuned live. */
  .al-footer__band-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--al-plum) 0 20%, transparent 24%);
    background-size: 3px 3px;
    mix-blend-mode: multiply;
    opacity: var(--al-dither-intensity, 0.35);
    pointer-events: none;
  }

  /* Plum edge vignette (both sides) — via the plum-based scrim tokens. */
  .al-footer__band-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      var(--al-scrim-med) 0%,
      transparent 34%,
      transparent 66%,
      var(--al-scrim-med) 100%
    );
    pointer-events: none;
  }

  /* ---- 3. Statement + copyright ------------------------------------------------ */
  .al-footer__statement-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: clamp(28px, 4vw, 52px) clamp(28px, 5vw, 64px) 0;
  }

  .al-footer__statement {
    margin: 0;
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: clamp(16px, 1.6vw, 21px);
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-on-brand);
    max-width: 26ch;
    text-wrap: pretty;
  }

  .al-footer__copyright {
    font-family: var(--al-font-body);
    font-size: var(--al-fs-eyebrow);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* quiet utility line → cream at reduced opacity (NOT rose — not an editorial eyebrow) */
    color: color-mix(in srgb, var(--al-on-brand) 55%, transparent);
    white-space: nowrap;
  }

  /* ---- 4. Giant wordmark — full-width bleed, cropped off the bottom edge -------- */
  .al-footer__wordmark-wrap {
    /* no side padding: the SVG spans the full footer width so the type touches both edges.
       The wrap is SHORTER than the SVG's natural aspect (1200:176) and clips the overflow,
       so the bottom of the letterforms bleeds off the page edge. Aspect-driven → the crop
       ratio holds at every viewport width. */
    margin-top: clamp(10px, 1.6vw, 24px);
    aspect-ratio: 1200 / 108;
    overflow: hidden;
    line-height: 0;
  }

  .al-footer__wordmark {
    display: block;
    width: 100%;
    height: auto; /* natural 1200:176 aspect → taller than the wrap → bottom clipped */
  }

  .al-footer__wordmark-text {
    font-family: var(--al-font-display);
    font-weight: 900; /* Nohemi Black — declared in al-brand-fonts, below-the-fold (no preload) */
    font-size: 150px; /* within the 0 0 1200 176 viewBox; textLength then fills to the edges */
    fill: var(--al-on-brand);
  }

  .al-footer__amp {
    fill: var(--al-rose); /* pink pop (was orchid) */
  }

  /* Mobile: stack the three columns, tightened onto the 8px scale (punch-round-3, item 4).
     Was: top padding 56px, between-group gaps ~31px, bottom 36px — excessive dead space.
     Now: top --al-space-xl (48), between-group gaps --al-space-lg (32→ was ~31, but now a token),
     bottom --al-space-md (24). Values are brand spacing TOKENS, not arbitrary px. Desktop
     (>=750px) keeps its own clamp padding — untouched, so no desktop regression. */
  @media (max-width: 749px) {
    .al-footer__columns {
      grid-template-columns: 1fr;
      gap: var(--al-space-md); /* 24px between stacked groups (was 31px) */
      padding-top: var(--al-space-xl); /* 48px above the brand block (was 56px) */
      padding-bottom: var(--al-space-md); /* 24px (was 36px) */
    }
  }
/* END_SECTION:al-footer */

/* START_SECTION:al-hero-band (INDEX:10) */
/* Band + band-image CSS moved to assets/al-utilities.css (.al-band / .al-band__img)
     and the markup to snippets/al-hero-band-media.liquid — Phase A5. It was duplicated
     byte-for-byte from al-collection-header. Everything below is this section's own. */

  /* ---- OPT-IN: head tracks full-bleed content instead of centring (2026-08-15) -------
     OFF by default, because the default is correct for most consumers. On FAQ and
     Find-your-fit the section BELOW the band is an ordinary page-width section, so band
     and content already share the capped/centred column and agree at every width
     (measured delta 0 at 1080/1920/3840). Turning this on there would BREAK that.

     It exists for Contact, where the section below (`.al-contact`) is deliberately
     full-bleed: its image is specified flush to the viewport edge and that layout was
     restored on owner correction 2026-07-31, so the band is the side that has to move.
     Without this the band title sat 240px in at 1920 and 1200px in at 3840 while both the
     band's OWN image above it and the contact image below it were flush at x=0.

     Same one-line mechanism as al-collection-header's fix: Horizon's `.section` builds its
     margins from
       --full-page-grid-central-column-width: min(<page-width capped>, 100% - 2*margin)
       --full-page-grid-margin: minmax(var(--page-margin), 1fr)
     so once the central column caps, the `1fr` side columns swallow the slack and centre
     the content. Forcing the fluid branch leaves no slack, and both side columns resolve
     to exactly --page-margin at every width. Overriding the variable (not `display`, not
     margins) is what keeps the grid — and therefore the full-bleed band image — working. */
  .al-hero-band--fluid {
    --full-page-grid-central-column-width: calc(100% - var(--page-margin) * 2);
  }

  /* ---- Head -------------------------------------------------------------------- */
  /* Band → space-2xl → title: the collection header's rhythm (its breadcrumb occupies
     that same gap there). */
  .al-hero-band__head {
    padding-block-start: var(--al-space-2xl);
  }

  .al-hero-band__head--center {
    text-align: center;
  }

  /* Type comes from .al-eyebrow (al-utilities.css, Phase A3) — layout only here. */
  .al-hero-band__eyebrow {
    display: block;
    margin-block-end: var(--al-space-sm);
  }

  /* Title type comes from .al-band-title (al-utilities.css, Phase A5). The rule that was
     here declared nothing else, so it is gone rather than emptied. */

  @media screen and (max-width: 749px) {
    /* The 320px band floor moved with the band, to .al-band in al-utilities.css. */
    .al-hero-band__head {
      padding-block-start: var(--al-space-xl);
    }
  }
/* END_SECTION:al-hero-band */

/* START_SECTION:al-hero (INDEX:11) */
.al-hero {
    position: relative;
    /* Height is driven by the flow content; this is just the full-viewport floor. */
    min-height: 100svh;
    /* Full-bleed: break out of any page-width / container padding so the BACKDROP image runs
       edge-to-edge at every viewport (text content still respects its own gutter padding). */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    background: var(--al-surface-mauve);
  }

  /* ---- Backdrop image ---------------------------------------------------------- */
  /* ABSOLUTE full-bleed backdrop behind ALL content, on every breakpoint (never a flow
     sibling — that's what collapsed the photo into a band before). The oversized box
     (top/height) also leaves headroom for the Pass 2 parallax drift. */
  .al-hero__media {
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    height: 124%;
    z-index: 0;
    will-change: transform;
  }

  /* DESKTOP BLEED — sized for the About-parity image drift (2026-07-30). Desktop-only because the
     parallax itself is desktop-only (al-hero-motion.js gates at ≥1024 + no-preference); below 1024
     the box above stands, so the mobile hero renders byte-identically.

     WHY IT GREW: the drift is DOWNWARD, so it spends the box's TOP headroom. At the old −12% the
     headroom was 159.7px @1440×900 against a peak drift of 103.5px (1.54×). The parity drift is
     0.189 × heroH = 251.6px, which would have put the box's top edge 92px INSIDE the hero on a fast
     reverse fling (worst case is scroll≈0 while the 0.9s scrub still holds peak drift; GSAP clamps
     scrub progress to [0,1], so peak drift is the true worst case, not an overshoot) — a mauve band
     across the top of the hero.

     THE SPLIT IS THE WHOLE TRICK: the added 24% is divided 8.4 top / 15.6 bottom = 35/65, matching
     `object-position: 50% 35%` exactly. Under a width-driven cover the visible crop is
     `topBleed + 0.35 × (renderedImageHeight − boxHeight)`; adding bleed in the object-position's own
     ratio makes those two terms cancel, so the box grows by 324px @1440×900 and the photo does not
     move at all (image top edge −338.07px before, −338.01px after — 0.06px, pure rounding). This is
     why the bottom bleed grows even though the drift never travels up: it is what buys the top bleed
     without re-cropping the photo.

     NUMBERS @1440×900 (heroH 1331): top bleed 159.7 → 272.9px, box 1650.4 → 1974px, bottom bleed
     159.7 → 370px. Headroom-to-drift = 20.4/18.9 = 1.079×, and because BOTH are fractions of heroH
     that ratio is identical at every viewport (the shipped 2026-07-17 config ranged 1.54× @1440×900
     down to 1.04× at 1024×1366, so this is uniformly safer than what it replaces). Requirement is
     >1.00×; the 7.9% is margin for late-layout/rounding.

     CEILINGS, both clear: (1) no upscale — the source is 3456×5184, and at 1440 wide cover renders it
     at scale 0.417, so nothing upscales until the box passes 5184px; (2) cover stays WIDTH-driven
     while box ≤ 1.5×vw (2160 @1440) — 1974 leaves 186px spare, so the zoom level is unchanged too.
     Past that boundary there is no cliff, just proportional zoom (~1% per 1% of excess); it is only
     crossed on narrow+very-tall viewports (1024×1366-class), which already crossed it before this
     change. Full derivation + measurements in the ROADMAP annotation (2026-07-30). */
  @media screen and (min-width: 1024px) {
    .al-hero__media {
      top: -20.4%;
      height: 148%;
    }
  }

  .al-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    display: block;
  }

  .al-hero__img--placeholder {
    display: grid;
    place-items: center;
    background: var(--al-surface-mauve);
  }

  .al-hero__placeholder-svg {
    width: 60%;
    height: 60%;
    fill: var(--al-muted);
  }

  /* ---- Optional even legibility veil (uniform, NOT a corner/edge wash) ---------- */
  .al-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: color-mix(in srgb, var(--al-base) calc(42% * var(--al-hero-overlay, 0)), transparent);
  }

  /* ---- Content layer (flow, layered over the backdrop) ------------------------- */
  /* Normal flow content so it drives the hero's height; min-height keeps it full-viewport.
     Hard-left gutter; the hero footer docks to the foot (margin-top:auto) to clear the headline. */
  .al-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    /* Bottom padding = the hero-footer REST GAP (F2, score/OPEN-3): 16px. The parallax dock
       (al-hero-motion.js) closes exactly this gap, docking the band flush by the time its top
       crosses 50vh. Was clamp(28px,4.5vh,48px). */
    padding: clamp(96px, 15vh, 200px) clamp(28px, 6vw, 96px) 16px clamp(20px, 3.6vw, 72px);
  }

  /* ---- GIANT headline (hard-left, dominant) ------------------------------------ */
  /* The type is the hero — hard to the left edge, very large, width-constrained so it stays
     upper-left and never runs full-width into the hero footer. */
  .al-hero__headline-wrap {
    max-width: min(100%, 60ch);
    pointer-events: none;
    will-change: transform; /* Pass 2: foreground parallax (leads UP) binds here. */
  }

  /* Type comes from .al-eyebrow (al-utilities.css, Phase A3) — layout only here. */
  .al-hero__eyebrow {
    display: block;
    margin-left: 0.12em;
  }

  .al-hero__headline {
    margin: clamp(18px, 2.4vh, 34px) 0 0;
    /* Constrained to the upper-left ~60% so it doesn't run full-width into the photo / hero footer. */
    max-width: min(64vw, 13ch);
    font-family: var(--al-font-display);
    font-weight: 500;
    /* Dominant statement type — scales with the viewport and out-sizes the photo subject. */
    font-size: var(--al-fs-hero);
    line-height: 0.86;
    letter-spacing: var(--al-tracking-hero);
    color: var(--al-brand);
    /* Wrap word-by-word; never hyphenate / break a word mid-glyph. */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    text-wrap: balance;
    /* NO text-shadow. A near-white 36px bloom used to sit here as "legibility insurance" — it was
       invisible over the old white-bg photo but haloed every glyph over dark/gray images (2026-07-17:
       owner flagged it as an unplanned glow; it was never specced). Removed → flat token-violet
       glyphs. Legibility over busy photos is handled by the section's own overlay veil setting
       (`overlay_opacity`) — a per-image, even scrim — not a per-glyph shadow. */
  }

  /* Per-word reveal layout (Pass 2). The shared mechanism owns the reveal MOTION (GSAP —
     al-word-reveal.js); the hero owns the composition: ONE WORD PER LINE — the specced
     5-line stack (Lingerie / that / loves / you / back.). No extra per-word leading: the
     block words stack at the committed line-height 0.86, so the split reproduces the
     committed headline height EXACTLY (no JS-on layout growth) — including the committed,
     accepted you/back descender kiss (the reveal no longer clips glyphs). */
  .al-hero__headline .al-word-reveal,
  .al-hero__headline .al-word-reveal__word {
    display: block;
  }

  /* ---- Shop-Now text block + CTA (resting/settled state) ----------------------- */
  /* Flow content directly under the headline, left-aligned — collision-free with the hero footer,
     and identical on mobile/desktop. (Pass 2 binds the scrubbed-pin to data-al-hero-cta.) */
  .al-hero__cta-group {
    margin-top: clamp(26px, 4vh, 48px);
    max-width: min(440px, 86vw);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 2.4vh, 24px);
    text-align: left;
  }

  .al-hero__shopnow {
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.06;
    letter-spacing: var(--al-tracking-hero);
    color: var(--al-brand);
    /* NO text-shadow — same unowned near-white bloom as the headline had (removed 2026-07-17). It
       haloed the subhead over dark images on desktop/tablet; flat token-violet now. Legibility over
       busy photos is the section's overlay veil (`overlay_opacity`), not a per-glyph shadow. */
  }

  .al-hero__shopnow :where(p, h2, h3) {
    margin: 0;
    font: inherit;
    color: inherit;
  }

  /* Fill / type / geometry / hover come from the canonical .al-btn--primary
     (al-utilities.css). Only the hero-specific seam stays here: the Pass-2
     scrubbed-pin needs its own transform layer (will-change), and the CTA is
     inline/auto width (hero context) — no .al-btn--block. The old drop-shadow
     is gone: primary is flat (no elevation), per the locked button spec. */
  .al-hero__cta {
    will-change: transform; /* Pass 2: soft-exit fade / rise binds here. */
  }

  .al-hero__cta-arrow {
    font-size: 15px;
  }

  /* CTA PLACEMENT — ?ctapos=right. DESKTOP ONLY (>=1024): the button is DECOUPLED from the
     Shop-Now text block and anchored mid-right / lower over the hero. Positioned in the
     upper-middle band so it clears the docked hero footer. Mobile keeps the inline layout.
     (Motion: al-hero-motion.js GSAP-pins it — the scoped exception — and scrubs its scale.) */
  @media screen and (min-width: 1024px) {
    .al-ctapos--right .al-hero__cta {
      position: absolute;
      top: clamp(320px, 46vh, 560px);
      right: clamp(28px, 6vw, 96px);
      margin: 0;
      z-index: 3;
      /* Anchor the scale-through-travel to the RIGHT edge in CSS, so the very first frame (pin
         engage at scroll 0, before the scale tween's own transform-origin applies) already uses
         100% 50%. Without this the boundary frame scaled from centre → a ~14px horizontal snap on
         engage (punch-round-2 item 3). */
      transform-origin: 100% 50%;
    }
  }

  /* ---- HERO FOOTER (composed block, docked at the foot of the content column) --- */
  /* margin-top:auto pushes it to the bottom of the (min 100svh) content column, which clears
     the giant headline. Two columns: left editorial text + right (3 cards over announcement). */
  .al-hero__footer {
    position: relative;
    margin-top: auto;
    /* PARALLAX DOCK. At rest the band keeps the clamp-padding gap above .al-hero__content's
       bottom edge; a scrubbed translate (al-hero-motion.js, same family as the img/headline
       drifts) closes that gap so the band lands EXACTLY flush by hero exit. This default
       transform is the STATIC FLUSH for JS-off + reduced-motion (translate down by the gap =
       the content's padding-bottom → footer bottom on the content box bottom). When the hero
       motion runs, GSAP takes over this transform: it fromTo's y 0 (rest gap) → measured gap
       (flush) across the hero range, so JS-on rest returns to the clamp-padding baseline.
       (Mobile: footer hidden.) F2: gap is now 16px (was clamp(28px,4.5vh,48px)). */
    transform: translateY(16px);
    padding-top: clamp(40px, 6vh, 88px);
    /* Two rows: row 1 = left editorial block + 3 cards as ONE FLUSH ROW (equal height,
       matching top+bottom edges); row 2 = announcement bar spanning the full footer width.
       (Supersedes the earlier "left block full height = cards + announce" spec — see the
       dated ROADMAP append.) */
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.7fr);
    grid-template-rows: auto auto;
    column-gap: var(--al-space-xs);
    row-gap: var(--al-space-xs);
    align-items: stretch;
  }

  /* Contained scrim behind the whole footer — lets the light text read over the photo without
     a full-image vignette. Generalises to any photo / the future video hero. */
  .al-hero__footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--al-ink) 34%, transparent) 30%,
      color-mix(in srgb, var(--al-ink) 62%, transparent) 70%,
      color-mix(in srgb, var(--al-ink) 86%, transparent) 100%
    );
  }

  .al-hero__footer > * {
    position: relative;
    z-index: 1;
  }

  /* Left column — editorial text block (sharp corners, hairline + subtle backdrop). */
  .al-hero__footer-text {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(18px, 2vw, 30px);
    padding: clamp(18px, 1.5vw, 28px);
    border: 1px solid color-mix(in srgb, var(--al-on-brand) 28%, transparent);
    background: color-mix(in srgb, var(--al-ink) 30%, transparent);
    color: var(--al-on-brand);
  }

  .al-hero__footer-heading {
    margin: 0;
    font-family: var(--al-font-display);
    font-weight: 600;
    font-size: var(--al-fs-h3);
    line-height: 1.02;
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-on-brand);
  }

  .al-hero__footer-copy {
    margin: clamp(10px, 1vw, 14px) 0 0;
    max-width: 46ch;
    font-family: var(--al-font-body);
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.55;
    color: color-mix(in srgb, var(--al-on-brand) 86%, transparent);
  }

  .al-hero__footer-icon {
    /* Centered horizontally under the PARAGRAPH's column (max-width:46ch, same as the copy),
       not the block's padding box — so it reads centered beneath the text, not the block. */
    display: flex;
    justify-content: center;
    max-width: 46ch;
    color: var(--al-on-brand);
  }

  .al-hero__footer-recycle {
    width: clamp(26px, 2.2vw, 38px);
    height: auto;
    opacity: 0.9;
  }

  .al-hero__footer-icon-img {
    width: clamp(26px, 2.2vw, 40px);
    height: auto;
    display: block;
  }

  /* Right column wrapper dissolves into the footer grid so the cards + announce place
     directly (cards = row 1 col 2, announce = row 2 full width). */
  .al-hero__footer-right {
    display: contents;
  }

  .al-hero__footer-cards {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Card-size floor; the flush row equalises to the taller of this and the left block. */
    min-height: clamp(200px, 22vh, 260px);
  }

  /* Card: transparent at rest (name + price only, light text over the footer scrim).
     Whole card is the product link; hover reveals the product image. Sharp corners. */
  .al-hero__fcard {
    position: relative;
    display: block;
    height: 100%; /* fill the flush row → cards match the left block's top+bottom edges */
    overflow: hidden;
    text-decoration: none;
    color: var(--al-on-brand);
  }

  /* Hairline divider between cards. */
  .al-hero__fcard + .al-hero__fcard {
    border-left: 1px solid color-mix(in srgb, var(--al-on-brand) 20%, transparent);
  }

  /* Product image — hidden at rest, revealed on hover (object-fit cover). */
  .al-hero__fcard-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
  }

  .al-hero__fcard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Top scrim (only visible on hover) so name + price stay legible over the image. */
  .al-hero__fcard::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 48%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--al-ink) 62%, transparent) 0%, transparent 100%);
  }

  .al-hero__fcard-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: clamp(12px, 0.9vw, 16px);
  }

  .al-hero__fcard-name {
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: clamp(13px, 0.95vw, 15px);
    line-height: 1.15;
    letter-spacing: var(--al-tracking-body);
    color: var(--al-on-brand);
  }

  .al-hero__fcard-price {
    font-family: var(--al-font-body);
    font-weight: 500;
    font-size: clamp(12px, 0.85vw, 13px);
    color: color-mix(in srgb, var(--al-on-brand) 92%, transparent);
    white-space: nowrap;
  }

  /* Reveal on hover. The reveal itself works under reduced-motion (instant, no animation);
     the fade + the tactile scale are gated behind prefers-reduced-motion. */
  .al-hero__fcard:hover .al-hero__fcard-media,
  .al-hero__fcard:hover::after {
    opacity: 1;
  }

  .al-hero__fcard:hover {
    z-index: 3;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* F1 (punch-round-2): the tactile hover-zoom scales the IMAGE, NOT the card. Scaling the whole
       card (the old `.al-hero__fcard:hover { transform: scale(1.02) }`) enlarged the card ~2% on
       hover, so the revealed product image overhung the left editorial block by ~2px top+bottom —
       flush at rest, NOT flush on hover. Zooming the image instead keeps the card BOX pixel-flush
       with the left block in both states; the card's `overflow:hidden` clips the zoom. */
    .al-hero__fcard-img {
      transition: transform var(--al-dur-base) var(--al-ease);
    }
    .al-hero__fcard-media,
    .al-hero__fcard::after {
      transition: opacity var(--al-dur-base) var(--al-ease);
    }
    .al-hero__fcard:hover .al-hero__fcard-img {
      transform: scale(1.04);
    }
  }

  /* Announcement bar — row 2, spanning the FULL footer width beneath the flush row. */
  .al-hero__footer-announce {
    grid-column: 1 / -1;
    grid-row: 2;
    /* LAYER-ORDER FIX (2026-07-24): the REAL cause of the "barely visible" announce was paint order,
       not opacity. This row is a GRANDCHILD (inside .al-hero__footer-right, which is display:contents),
       so `.al-hero__footer > *{z-index:1}` never reached it — it stayed static/z-auto, and the footer's
       ::before gradient (positioned, z-index:0, DARKEST at this bottom row) painted OVER its scrim + text.
       Lift it into the intended content layer so its scrim BACKS the text and nothing composites above it. */
    position: relative;
    z-index: 1;
    border-top: 1px solid color-mix(in srgb, var(--al-on-brand) 20%, transparent);
    padding: var(--al-space-sm) var(--al-space-sm);
    text-align: center;
    color: var(--al-on-brand);
    /* Scrim backing: a strong plum scrim from the existing token family — now correctly composited
       BEHIND the text (see the z-index lift above), keeps it crisp on any image. No new colors. */
    background: var(--al-scrim-strong);
  }

  .al-hero__footer-announce span {
    font-family: var(--al-font-body);
    font-weight: 600;
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: var(--al-tracking-eyebrow);
    text-transform: uppercase;
    /* Full-opacity on-brand white — the announce line reads as crisply as the card names above it.
       (Was 92%-opacity, which over the footer scrim read dim/washed; restored per punch item 2.) */
    color: var(--al-on-brand);
  }

  /* ---- Tablet / mobile (<1024px) ----------------------------------------------- */
  /* SAME architecture as desktop — the image stays an ABSOLUTE BACKDROP and the headline +
     Shop-Now + CTA flow OVER it (never a stacked image-band). The only differences: the
     HERO FOOTER is HIDDEN entirely (the homepage product row below carries products on small
     screens, so nothing is lost), and the statement type scales down. */
  @media screen and (max-width: 1023px) {
    .al-hero__content {
      /* M2 (2026-07-17): CLEAR THE OVERLAID HEADER RAIL. The custom icon rail (snippets/al-icon-rail)
         is an absolute overlay on top of the hero. Its bottom = the announcement bar height
         (--header-group-height, set on <body> by the theme's header-measure script — ~43px, and it
         adapts if the announcement is removed) + the mobile rail bar height (~60px = a 44px touch
         target + its padding; content-driven, deliberately NOT tied to --header-height, which the
         theme's JS measures as logo-only ~26px and understates the bar). The OLD top padding (~93px)
         fell short of the rail bottom (~103px @390) and tucked the eyebrow's top under the frosted
         rail. Start the content a token gap (--al-space-lg) below that so the eyebrow is fully clear. */
      padding: calc(var(--header-group-height, 43px) + 60px + var(--al-space-lg)) clamp(22px, 6vw, 44px) clamp(32px, 5vh, 48px);
    }

    .al-hero__headline {
      max-width: 92vw;
      /* font-size handled by the --al-fs-hero token clamp (mobile floor 48px). */
    }

    /* MOBILE cluster: bottom-anchored (round-3), CENTERED (M4), width-locked to the CTA button (M3).
       - margin-top:auto keeps it docked to the hero foot; align-self:center centres the whole cluster
         on the page; align-items:center + text-align:center centre the button and the subhead text.
       - width:fit-content shrinks the cluster to its widest child. The subhead's `width:0` makes it
         contribute 0 to that intrinsic width, so the BUTTON alone defines the cluster width; then
         min-width:100% fills the subhead back to that width and it WRAPS to as many lines as needed —
         so the subhead's left/right edges match the button and never extend past it.
       Static; NO scroll motion on mobile; the entrance (curtain + cascade) is unchanged. */
    .al-hero__cta-group {
      margin-top: auto;
      align-self: center;
      align-items: center;
      width: fit-content;
      text-align: center;
    }
    .al-hero__shopnow {
      width: 0;
      min-width: 100%;
      max-width: 100%;
    }

    /* Alternative: headline joins the cluster at the foot (top of hero = pure image). */
    .al-hero--mhead-down .al-hero__headline-wrap {
      margin-top: auto;
    }
    .al-hero--mhead-down .al-hero__cta-group {
      margin-top: clamp(20px, 3vh, 32px);
    }

    .al-hero__footer {
      display: none;
    }
  }

  /* Mobile PHONES (<=749px): the hero subhead is REMOVED VISUALLY (owner decision, final 2026-07-17).
     The merchant-editable EYEBROW is the mobile announcer. .visually-hidden (NOT display:none) keeps
     the subhead copy in the a11y tree. Because it's out of flow, the cluster is the BUTTON ALONE — no
     leftover gap/hole — and stays centred + bottom-anchored. min-width:0 overrides the <=1023
     min-width:100% so the 1px clip holds. Tablet (750–1023) keeps the visible button-width subhead. */
  @media (max-width: 749px) {
    .al-hero__shopnow {
      position: absolute;
      width: 1px;
      min-width: 0;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }
/* END_SECTION:al-hero */

/* START_SECTION:al-image-duo (INDEX:12) */
.al-duo {
    background: var(--al-base);
  }

  /* Two panels, edge-to-edge (section is .al-full-bleed) and FLUSH — shared centre
     seam, no gutter. */
  .al-duo__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .al-duo__panel {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  /* Tall portrait image frame (4:5). overflow clips the hover scale so the caption,
     which lives OUTSIDE the frame, never shifts. */
  .al-duo__frame {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--al-surface-mauve);
  }

  .al-duo__img-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .al-duo__img-el--placeholder {
    display: grid;
    place-items: center;
  }

  .al-duo__placeholder-svg {
    width: 45%;
    height: 45%;
    fill: var(--al-muted);
  }

  /* Hover scrim — the same subtle plum deepening as the product / hero-footer card
     hover. Sits over the image inside the clipped frame; fades in on hover only. */
  .al-duo__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--al-scrim-light);
    opacity: 0;
  }

  /* Caption = frosted-glass label overlaid hard top-left INSIDE the image frame
     (~32px inset, matching the hero's hard-left placement). Frost chrome comes from
     the shared .al-frosted utility; this rule owns position + padding only. Sits above
     the scrim (later in DOM); the image scales under it, the label stays put. */
  .al-duo__caption {
    position: absolute;
    top: var(--al-space-lg);
    left: var(--al-space-lg);
    z-index: 1;
    max-width: calc(100% - 2 * var(--al-space-lg));
    display: flex;
    flex-direction: column;
    gap: var(--al-space-xs);
    padding: var(--al-space-sm) var(--al-space-md); /* 16px 24px */
    will-change: transform; /* Phase 8 Pass 2: text parallax binds here */
  }

  /* Locked eyebrow treatment: rose, uppercase, small, eyebrow tracking. */
  /* Type comes from .al-eyebrow--lg (13px, al-utilities.css). The element declared
     nothing else, so this rule is gone entirely — 13px is the intentional larger
     editorial variant, NOT drift to fold to 11px. (Phase A3) */

  /* Name = wayfinding label: violet (locked heading colour), h3 token (distinct from
     the 60px section headings, so it reads as a label not a competing statement).
     Arrow sits inline. */
  .al-duo__title {
    font-family: var(--al-font-display);
    font-weight: 600;
    font-size: var(--al-fs-h3);
    line-height: 0.98;
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
    display: inline-flex;
    align-items: baseline;
    gap: var(--al-space-sm);
  }

  .al-duo__arrow {
    flex: none;
    font-family: var(--al-font-body);
    font-size: clamp(20px, 2vw, 30px);
    color: var(--al-brand);
  }

  /* Hover = the EXISTING card-hover pattern (product cards / hero footer): subtle
     ~1.02 image scale + scrim fade-in.
     Timing uses the motion tokens (ROADMAP §6 --al-dur-base / --al-ease), defined in
     al-brand-motion.css. */
  @media (prefers-reduced-motion: no-preference) {
    .al-duo__img-el {
      transition: transform var(--al-dur-base) var(--al-ease);
    }
    .al-duo__panel:hover .al-duo__img-el {
      transform: scale(1.02);
    }
    .al-duo__scrim {
      transition: opacity var(--al-dur-base) var(--al-ease);
    }
    .al-duo__panel:hover .al-duo__scrim {
      opacity: 1;
    }
    .al-duo__arrow {
      transition: transform var(--al-dur-base) var(--al-ease);
    }
    .al-duo__panel:hover .al-duo__arrow {
      transform: translateX(6px);
    }
  }

  /* Mobile: one continuous flush column — panels stack, images butt together, no gaps. */
  @media screen and (max-width: 749px) {
    .al-duo__grid {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:al-image-duo */

/* START_SECTION:al-image-inset (INDEX:13) */
.al-image-inset {
    position: relative;
    overflow: hidden;
    /* Full-bleed: break out of the page gutter so the background runs edge-to-edge. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--al-base);
  }

  /* ---- Background (absolute, OVERSIZED box = parallax bleed budget) ------------------ */
  .al-inset__bg {
    position: absolute;
    left: 0;
    right: 0;
    top: -16%;
    height: 132%;
    z-index: 0;
    will-change: transform; /* al-inset-bg drift binds here */
  }
  .al-inset__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .al-inset__bg-img--placeholder {
    display: grid;
    place-items: center;
    background: var(--al-surface-mauve);
  }
  .al-inset__placeholder-svg {
    width: 55%;
    height: 55%;
    fill: var(--al-muted);
  }

  .al-inset__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--al-plum) calc(46% * var(--al-inset-scrim, 0.6)), transparent) 0%,
      color-mix(in srgb, var(--al-plum) calc(70% * var(--al-inset-scrim, 0.6)), transparent) 100%
    );
  }

  /* ---- Content grid: left text | inset frame | right text, with a centred coda below --- */
  .al-inset__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: clamp(24px, 4vw, 72px);
    row-gap: clamp(32px, 6vh, 72px);
    min-height: 100svh;
    padding: clamp(80px, 12vh, 160px) clamp(20px, 6vw, 96px);
  }

  /* ---- Side-text legibility (REWORKED 2026-07-25, owner decision) --------------------
     WAS: white (--al-on-brand) directly on the plum scrim. Measured on painted pixels that ran
     2.28–2.60:1 — below AA — and raising the merchant scrim control to its 100% ceiling still only
     reached 3.52 / 3.66, so the 16px support and 13px aside could not pass at ANY setting.

     NOW: the desktop side text adopts the treatment mobile already used — ink/violet type on the
     light base surface — by giving each text zone its own OPAQUE base panel. Opaque is the point:
     a translucent panel would put contrast back at the mercy of whatever photo sits behind it,
     and the requirement is AA regardless of the image. Because the panel is a fixed token pair
     (--al-base under --al-brand / --al-ink), the ratio is now a constant, not a function of the art.

     The image-in-image composition is UNCHANGED — framed inset, background parallax, scrim, and the
     overlay grid all stay exactly as they were. Only the text's backing and color change. The panels
     are the same material as the inset frame itself (base matte, sharp corners), so they read as part
     of the same composition rather than as pasted-on labels. */
  .al-inset__side {
    grid-row: 1;
    margin: 0;
    max-width: 22ch;
    color: var(--al-ink);
    background: var(--al-base);
    padding: clamp(16px, 1.5vw, 26px) clamp(18px, 1.7vw, 30px);
  }
  .al-inset__side--left {
    grid-column: 1;
    justify-self: end;
    text-align: right;
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: var(--al-fs-h3);
    line-height: 1.05;
    letter-spacing: var(--al-tracking-heading);
    text-wrap: balance;
    color: var(--al-brand);
  }
  .al-inset__side--right {
    grid-column: 3;
    justify-self: start;
    text-align: left;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-body);
    line-height: 1.7;
    color: var(--al-ink);
    text-wrap: pretty;
  }

  /* ---- Inset frame (the floating "framed image") ------------------------------------ */
  .al-inset__figure {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    width: clamp(260px, 30vw, 440px);
  }
  /* The frame = a base-surface matte + hairline. Sharp corners, no shadow (flat, per brand). */
  .al-inset__frame {
    position: relative;
    background: var(--al-base);
    padding: clamp(8px, 0.8vw, 14px);
    border: 1px solid color-mix(in srgb, var(--al-on-brand) 32%, transparent);
  }
  /* Clip box for the inset photo — overflow:hidden so the oversized image drifts WITHIN it. */
  .al-inset__frame-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
  }
  /* Oversized inset wrapper: top:-20% / height:140% overhang >> peak travel → no edge exposed. */
  .al-inset__fg {
    position: absolute;
    left: 0;
    right: 0;
    top: -20%;
    height: 140%;
    width: 100%;
    will-change: transform; /* al-inset-fg drift binds here */
  }
  .al-inset__fg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .al-inset__fg-img--placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    background: var(--al-surface-mauve);
  }

  /* ---- Coda: aside + CTA, centred beneath the row ----------------------------------- */
  .al-inset__coda {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 2.6vh, 28px);
    text-align: center;
  }
  /* Same opaque-base treatment as the side zones — the aside is the smallest type in the section
     (13px), so it was the furthest below AA and benefits most. */
  .al-inset__aside {
    margin: 0;
    max-width: 40ch;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    font-style: italic;
    line-height: 1.55;
    color: var(--al-ink);
    background: var(--al-base);
    padding: clamp(12px, 1vw, 18px) clamp(16px, 1.5vw, 26px);
  }
  /* .al-btn / .al-btn--primary own type, fill, geometry (13px, 0.12em, 0 radius, no shadow). */

  /* ---- Mobile (≤749): STACKED STATIC — parallax off, no overlay layout ---------------- */
  @media screen and (max-width: 749px) {
    .al-image-inset {
      overflow: visible;
    }
    /* Background becomes a normal block image at the top (static — parallax never runs here). */
    .al-inset__bg {
      position: relative;
      top: 0;
      height: auto;
      aspect-ratio: 4 / 5;
      will-change: auto;
    }
    .al-inset__scrim {
      display: none;
    }
    .al-inset__content {
      display: block;
      min-height: 0;
      /* Pull the frame up so it overlaps the bottom of the background block (the image-in-image nod). */
      margin-top: -18vw;
      padding: 0 clamp(20px, 6vw, 44px) clamp(48px, 8vh, 80px);
    }
    .al-inset__figure {
      width: min(70vw, 300px);
      margin: 0 auto clamp(28px, 5vh, 44px);
    }
    /* Text already sits directly on the base surface here (scrim gone), so the desktop panels are
       redundant — drop their padding/background and keep the flat stacked reading layout. Colors are
       inherited from the reworked desktop rules (brand / ink), which mobile pioneered. */
    .al-inset__side {
      max-width: 100%;
      margin: 0 auto clamp(18px, 3vh, 28px);
      text-align: center;
      background: none;
      padding: 0;
    }
    .al-inset__side--left {
      text-align: center;
    }
    .al-inset__side--right {
      text-align: center;
    }
    .al-inset__aside {
      background: none;
      padding: 0;
    }
  }
/* END_SECTION:al-image-inset */

/* START_SECTION:al-product-row (INDEX:14) */
.al-row {
    display: block;
    background: var(--al-base);
    /* Shared horizontal gutter — header, pager and card grid all align to it. */
    --al-row-gutter: clamp(var(--al-space-md), 5vw, var(--al-space-2xl));
  }

  .al-row__head {
    padding-inline: var(--al-row-gutter);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(20px, 2.8vh, 32px);
  }

  /* Type comes from .al-eyebrow (al-utilities.css, Phase A3) — layout only here. */
  .al-row__eyebrow {
    display: block;
  }

  .al-row__heading {
    margin: 16px 0 0;
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
  }

  .al-row__viewall {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--al-brand);
    font-family: var(--al-font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: var(--al-tracking-body);
    border-bottom: 1px solid color-mix(in srgb, var(--al-brand) 30%, transparent);
    padding-bottom: 4px;
    margin-bottom: 8px;
    transition: gap var(--al-dur-base) var(--al-ease);
  }

  .al-row__viewall:hover {
    gap: 14px;
  }

  /* ---- Top pagination bar ------------------------------------------------------ */
  .al-row__nav {
    margin: 0 var(--al-row-gutter) clamp(18px, 2.6vh, 28px);
    padding-top: clamp(var(--al-space-sm), 2.2vh, var(--al-space-md));
    border-top: 1px solid color-mix(in srgb, var(--al-plum) 16%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }

  .al-row__count {
    font-family: var(--al-font-display);
    font-size: clamp(18px, 1.5vw, 22px);
    letter-spacing: var(--al-tracking-body);
    color: var(--al-brand);
  }

  .al-row__controls {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 24px);
  }

  /* Plain text links — no pill chrome. */
  .al-row__btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--al-brand) 35%, transparent);
    padding: 4px 0;
    font-family: var(--al-font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: var(--al-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--al-brand);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--al-dur-base) var(--al-ease), color var(--al-dur-base) var(--al-ease), border-color var(--al-dur-base) var(--al-ease);
  }

  .al-row__btn:hover:not(:disabled) {
    color: var(--al-plum);
  }

  .al-row__btn:disabled {
    opacity: 0.3;
    pointer-events: none;
    border-bottom-color: transparent;
    cursor: default;
  }

  /* ---- Carousel ---------------------------------------------------------------- */
  /* Full-bleed viewport; the gutter lives INSIDE each page so a page-slide lands flush at
     the gutter (no half-card peeking into the margin). */
  .al-row__viewport {
    overflow: hidden;
  }

  .al-row__track {
    display: flex;
    will-change: transform;
  }

  .al-row__page {
    min-width: 100%;
    box-sizing: border-box;
    padding-inline: var(--al-row-gutter);
    display: grid;
    grid-template-columns: repeat(var(--al-row-cols, 4), minmax(0, 1fr));
    /* near-zero gutter — cards butt together so the row reads as one
       continuous editorial wall (8pm.it), not floating tiles */
    gap: 2px;
  }

  @media screen and (max-width: 749px) {
    .al-row__page {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2px;
    }
  }
/* END_SECTION:al-product-row */

/* START_SECTION:al-product-topbar (INDEX:15) */
/* DO NOT put `display:` on .al-pdp-topbar. That element carries `.section
     section--page-width`, and Horizon builds the page margin OUT OF THE DISPLAY TYPE:
     `.section` is a three-column grid (margin | content | margin, base.css:369) and
     `.section--page-width > *` drops children into column 2. Setting `display: flex` here
     destroyed those tracks, so the row lost its margins entirely and ran edge-to-edge —
     measured at x=0 with the product name clipped off the right. Pre-existing since the
     rule was introduced (893157b); untouched by the Phase A1 breadcrumb work.

     The flex row therefore lives on an inner wrapper, which sits in column 2 and inherits
     the real --page-margin instead of a one-off padding value. */
  /* ALWAYS STACKED — breadcrumb on top, prev/next below, at EVERY width (2026-08-11).

     Was `flex-direction: row` + `flex-wrap: wrap`, i.e. side-by-side while the two fit and
     wrapping to two lines only once they did not (measured: still one line at 1440 and
     1920, already wrapped at 1024 and below). That width-dependence is what is being
     removed — the stack is now structural, not a fallback, so there is no breakpoint at
     which the layout changes shape.

     `flex-wrap` is dropped rather than left in place: on a column, `wrap` means "break into
     additional COLUMNS when the height is constrained", which is the opposite of what is
     wanted here and would silently reintroduce a side-by-side state.

     Nav alignment is unchanged by this: `justify-content: space-between` only ever pushed
     the nav right while both shared a line. Once wrapped, a lone item on a flex line sits at
     the line start, so the already-stacked widths were left-aligned — measured at left:40
     (1024) and left:16 (390) before this change. Dropping the declaration keeps that
     left alignment and now applies it at every width. */
  .al-pdp-topbar__row {
    display: flex;
    flex-direction: column;
    /* stretch, NOT center or flex-start: it gives each line a DEFINITE width equal to the
       row, which is the edge `text-overflow: ellipsis` on the breadcrumb truncates against
       (and the edge the rail clearance below pulls in). `center` would centre both lines;
       `flex-start` would shrink-wrap them and the truncation edge would move with the text. */
    align-items: stretch;
    /* Unchanged: this was already the row-gap in the wrapped state, so the widths that were
       stacked before keep their exact spacing. Mobile still overrides to 14px below. */
    gap: 24px;
    /* Requested breathing room before the content below. --al-space-xs (8px) is the
       closest token to the ~10px asked for; kept tokenised rather than a raw literal. */
    margin-block-end: var(--al-space-xs);
  }

  /* Flex children default to min-width:auto, which refuses to shrink below the content's
     intrinsic width — so a long product name would push the row wider than its column even
     after the grid fix above. min-width:0 lets them shrink; the row can still wrap. */
  .al-pdp-topbar__row > * {
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    /* Rail clearance. The page margin (40px) alone leaves the row's right edge under the
       fixed icon rail, which overlays the right 48px (--al-space-xl) — originally measured
       as the row's edge landing at 1400 against the rail's 1392, with elementFromPoint at
       that edge returning .al-rail__glass. Top up by the difference. Same declaration
       al-collection-header and al-related-products use for the same rail; kept identical so
       all three stay in step if the rail width or page margin ever changes.

       STILL REQUIRED AFTER THE ALWAYS-STACKED CHANGE (2026-08-11) — but it now protects a
       DIFFERENT element, so don't read the original prev/next framing as current. The nav
       is on its own line and left-aligned, so it no longer reaches the right edge at all.
       What sits there now is the BREADCRUMB: `align-items: stretch` makes it span the full
       row, so the row's right edge is the edge its `text-overflow: ellipsis` truncates at.
       Without this padding a truncated product name would ellipsize at 1400 and put its
       last characters behind the rail glass — the same defect, one element over.
       Re-measured after the change: breadcrumb right edge 976/1392 against rail left
       976/1392 (flush, never under), and elementsFromPoint at that edge returns no
       .al-rail* layer at 1024/1440/1920. */
    .al-pdp-topbar__row {
      padding-inline-end: max(0px, calc(var(--al-space-xl) - var(--page-margin)));
    }
  }

  /* TRUNCATION APPLIES TO THE WHOLE TRAIL, NOT JUST THE LAST CRUMB.

     The first pass scoped this to .al-breadcrumb__current, which left every ancestor
     crumb on `white-space: normal`. On a 3-level mobile trail that broke visibly:
     "Garter sets" split across two lines, and because .al-breadcrumb is a flex row with
     align-items:center, the now-taller crumb was centred — so it grew UPWARD about 9.6px
     past the single-line baseline and "Garter" ended up underneath .al-rail__logo (the
     site title in the fixed rail), which paints over it. Confirmed with elementFromPoint,
     not inferred: the element painted at that crumb's first line was the rail logo.

     So the real defect was a crumb splitting mid-phrase, not the last crumb overflowing.
     Every part now refuses to break, and the two text crumbs may shrink and ellipsize;
     the separators never shrink. Nothing can become two lines, so nothing can grow
     upward into the rail regardless of how long the names are. `overflow: hidden` on the
     nav is the backstop for the pathological case where even the ellipsized ancestors
     exceed the row.

     Not width-gated: the trail already fits on one line at desktop, so this changes
     nothing there (verified), and gating it would just re-open the bug at any narrow
     width between the breakpoints. Still scoped to this row — the shared .al-breadcrumb
     is untouched, so the Collection and About trails keep their current behaviour. */
  .al-pdp-topbar__row .al-breadcrumb {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .al-pdp-topbar__row .al-breadcrumb > * {
    white-space: nowrap;
  }

  /* SHRINK LANDS ENTIRELY ON THE CURRENT CRUMB. The ancestors are navigable links and
     the separators are structure; the last crumb is just a label for the page you are
     already on, so it is the one that can afford to lose characters.

     Letting everything shrink (flex's default) distributes it proportionally and chews
     every crumb at once — the first attempt rendered "Ho… / Garter s… / Sweet Rose…",
     which is worse than the bug being fixed. Pinning only the ancestors still truncated
     the middle one needlessly ("Garter s…") while the current crumb kept width it did not
     need. With all links pinned, "Home / Garter sets" stays whole and the product name
     absorbs the whole overflow.

     `overflow: hidden` on the nav (above) is the backstop: if a collection name were long
     enough that the ancestors alone filled the row, the trail clips at the row's edge
     instead of breaking the layout. */
  .al-pdp-topbar__row .al-breadcrumb__sep,
  .al-pdp-topbar__row .al-breadcrumb__link {
    flex: 0 0 auto;
  }

  .al-pdp-topbar__row .al-breadcrumb__link,
  .al-pdp-topbar__row .al-breadcrumb__current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Breadcrumb styling moved to assets/al-utilities.css (Phase A1) — it was owned here,
     in a PDP-ONLY section, while al-collection-header and al-about-intro also depended on
     it. Markup now comes from snippets/al-breadcrumb.liquid. */

  /* ---- Prev / next (browse across) ---- */
  .al-pdp-nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 32px);
  }
  .al-pdp-nav__link {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-family: var(--al-font-body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: var(--al-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--al-brand);
  }
  .al-pdp-nav__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }
  .al-pdp-nav__text--right {
    text-align: right;
  }
  /* 9px, OFF-SCALE ON PURPOSE — investigated in Phase A3 and deliberately NOT brought
     onto .al-eyebrow. This is not a section eyebrow: every other one labels a heading of
     20-60px+, whereas this one labels the product name in the line below it, and that
     name is 12px (inherited from .al-pdp-nav__link, which already supplies the body face,
     600 weight, eyebrow tracking and uppercase — this rule only overrides size and
     colour). At the 11px standard the two tiers would sit 11px against 12px, which reads
     as one size rather than a label above a name; 9px against 12px is what makes the
     stack legible as a hierarchy. The constraint is the parent's size, not the nav's
     width. Documented rather than "fixed" — no token exists at 9px and none should be
     invented for a single deliberate exception. */
  .al-pdp-nav__eyebrow {
    font-size: 0.5625rem;
    letter-spacing: var(--al-tracking-eyebrow);
    color: var(--al-muted);
  }
  .al-pdp-nav__divider {
    width: 1px;
    height: 30px;
    background: color-mix(in srgb, var(--al-muted) 70%, transparent);
  }
  .al-pdp-nav__arrow {
    display: inline-block;
  }
  @media (prefers-reduced-motion: no-preference) {
    .al-pdp-nav__arrow {
      transition: transform var(--al-dur-base) var(--al-ease);
    }
    .al-pdp-nav__link--prev:hover .al-pdp-nav__arrow--l {
      transform: translateX(-4px);
    }
    .al-pdp-nav__link--next:hover .al-pdp-nav__arrow--r {
      transform: translateX(4px);
    }
  }

  @media screen and (max-width: 749px) {
    /* STILL MOBILE-ONLY after the always-stacked change (2026-08-11). The two clearances
       below are not about the row's internal direction, so making the stack unconditional
       does not generalise them to desktop: the rail only OVERLAYS content on mobile (it is
       a full-width absolute bar there vs a fixed right-edge strip at >=750), so only mobile
       needs the vertical margin. Re-measured: margin-block-start 32px at 390, 0px at 800+. */

    /* CLEAR THE ICON RAIL. On mobile the rail is `position: absolute` inside
       .header-section, so it OVERLAYS the page instead of reserving height: its frosted
       panel (.al-rail__glass, backdrop-filter: blur(12px) over a 45% wash) runs to y=103
       while .header-section ends at 68.6. Anything the following section paints in that
       34.4px band sits behind frosted glass.

       This topbar is the only surface that lands there — measured across Collection, About
       and FAQ, whose first content starts at 388/1210/436 and clears it by hundreds of
       pixels. That is why it reads as a PDP bug rather than a global one, and why the fix
       is scoped here instead of making .header-section reserve the rail's height (which
       would push every page down by 34px to fix one).

       NOT DONE VIA --section-top-offset, though that is base.css's hook for exactly this
       (.spacing-style resolves padding-block-start as `calc(var(--padding-block-start) +
       var(--section-top-offset))`). Horizon zeroes it for the FIRST section on the page —
       `main > .shopify-section:first-child .section:not(.disable-section-top-offset)`
       sets it to `calc(<header-height> * 0)` at 0,4,1, which outranks a plain
       `.al-pdp-topbar` at 0,1,0. Measured, not guessed: the computed value stayed
       `calc(26px * 0)` with the rule in place. Rather than escalate specificity into a
       fight with Horizon's first-section handling, the clearance goes on the row's own
       margin, which nothing else sets. */
    .al-pdp-topbar__row {
      margin-block-start: var(--al-space-lg);
    }

    /* Follows the flex row to its new wrapper — targeting .al-pdp-topbar here would be
       dead CSS now that the row is no longer the flex container. */
    .al-pdp-topbar__row {
      gap: 14px;
    }
    /* On tight screens the product names can crowd; keep the eyebrow + arrow, drop the name. */
    .al-pdp-nav__name {
      display: none;
    }
  }
/* END_SECTION:al-product-topbar */

/* START_SECTION:al-related-products (INDEX:16) */
.al-related {
    /* Shared horizontal gutter — heading and card grid both align to it, the same way
       `.al-row` defines --al-row-gutter once for its head and its grid. Declared as ONE
       variable on purpose: setting it only on the grid pushed the cards 24px right of the
       heading at 1440 (8px at 390), which is exactly the misalignment this prevents. */
    --al-related-gutter: max(0px, calc(clamp(var(--al-space-md), 5vw, var(--al-space-2xl)) - var(--page-margin)));
  }

  .al-related__head {
    margin-block-end: 1.5rem;
    padding-inline: var(--al-related-gutter);
  }

  .al-related__heading {
    margin: 0;
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: var(--al-fs-h4);
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
  }

  /* GAP AND WIDTH ARE ONE DECISION, NOT TWO — changing either alone breaks parity with
     the homepage row, so they are set together here.

     The row's cards sit 2px apart on purpose (al-product-row: "cards butt together so the
     row reads as one continuous editorial wall"). Matching that alone would have GROWN
     these cards by ~10px, because this grid's larger gaps were the very thing offsetting
     its wider container (page-width 1360 vs the row's 1312 content box). Closing the gap
     without also closing that 48px of container width would just move the mismatch.

     So instead of patching a number, align to the row's actual gutter — see
     --al-related-gutter above, which mirrors `.al-row`'s --al-row-gutter expression
     (that variable is scoped to `.al-row`, so it cannot be referenced directly; the two
     must be kept in step by hand). We already sit inside the page margin, so the variable
     adds only the difference. Result: both grids' content boxes land on exactly the same
     x positions (64 → 1376 at 1440), making the card widths identical, not merely close. */
  .al-related__grid {
    display: grid;
    grid-template-columns: repeat(var(--al-related-cols, 4), 1fr);
    gap: 2px;
    padding-inline: var(--al-related-gutter);
  }

  @media screen and (min-width: 750px) {
    /* Rail clearance floor. The fixed icon rail overlays the viewport's right 48px
       (--al-space-xl); the page margin alone (40px) leaves the last card's price under the
       glass, clipping ~2px off it. The gutter alignment above already clears the rail at
       wide viewports (24px of padding at 1440 > the 8px needed), but the gutter SHRINKS
       with 5vw — between 750px and ~960px it drops below that 8px and the collision would
       come straight back. max() keeps whichever is larger, so the right edge can never
       slide back under the rail at any width. Same intent, and the same
       `--al-space-xl - --page-margin` term, as al-collection-header's fix.

       The collision was always present; it only became visible at 4 columns. At 2-up the
       clipped card was the second one, whose meta row sat below the fold. */
    .al-related__grid {
      padding-inline-end: max(
        calc(var(--al-space-xl) - var(--page-margin)),
        var(--al-related-gutter)
      );
    }
  }

  @media screen and (max-width: 749px) {
    /* Columns only — the 2px gap and the gutter alignment above both hold at every width,
       exactly as they do on the row (which also drops to 2-up at this breakpoint). The
       former 1.5rem/0.75rem override is gone: it was the mobile half of the same rhythm
       break, and the row uses 2px here too. */
    .al-related__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
/* END_SECTION:al-related-products */

/* START_SECTION:al-steps (INDEX:17) */
.al-steps__head {
    margin-block-end: var(--al-space-lg);
  }

  /* Type comes from .al-eyebrow (al-utilities.css, Phase A3) — layout only here. */
  .al-steps__eyebrow {
    display: block;
    margin-block-end: var(--al-space-xs);
  }

  /* Size + display face come from .al-section-head__heading--h3 (Phase A6). */
  .al-steps__heading {
    margin: 0;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
  }

  .al-steps__body {
    display: grid;
    gap: var(--al-space-2xl);
  }

  .al-steps__intro {
    max-width: 62ch;
    margin-block-end: var(--al-space-lg);
    font-size: var(--al-fs-body);
    line-height: 1.7;
    color: var(--al-ink);
  }

  .al-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* hairline set — --al-muted @ 35%, the theme-wide divider */
    border-block-start: 1px solid color-mix(in srgb, var(--al-muted) 35%, transparent);
  }

  .al-steps__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--al-space-md);
    padding-block: var(--al-space-md);
    border-block-end: 1px solid color-mix(in srgb, var(--al-muted) 35%, transparent);
  }

  .al-steps__num {
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    font-weight: 600;
    letter-spacing: var(--al-tracking-eyebrow);
    line-height: 1.6;
    color: var(--al-rose);
    font-variant-numeric: tabular-nums;
  }

  .al-steps__step-title {
    margin: 0 0 var(--al-space-xs);
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: var(--al-fs-h4);
    line-height: 1.2;
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
  }

  .al-steps__step-text {
    margin: 0;
    max-width: 58ch;
    font-size: var(--al-fs-body);
    line-height: 1.7;
    color: var(--al-ink);
  }

  .al-steps__figure {
    margin: 0;
  }

  /* FIT IS A SETTING BECAUSE THIS SECTION SERVES TWO KINDS OF IMAGE.

     The frame is 4/5 (0.8). A portrait photograph is typically 2:3 (0.667), so `contain`
     letterboxed it against the mauve ground — measured on Find-your-fit: a 591.8×739.7
     frame painting a 493.2×739.7 picture, i.e. 49.3px of mauve down each side (30.3px at
     390). That is what read as "the image doesn't fill its panel".

     `contain` was not an oversight though — it came from the fit-guide original, where the
     side image was a MEASUREMENT DIAGRAM and the note read "a diagram cropped at the edges
     loses the very lines it exists to show". That is still true. Since al-steps is generic
     (take-back / care / how-it-works will reuse it), the choice belongs to the merchant
     rather than to whichever use case was written first. Default is cover, because a
     photograph is the common case and cropping one is safe.

     The mauve ground stays: it is what `contain` letterboxes against, and it covers the
     frame before the image decodes in both modes.

     The base rule sets cover rather than leaving object-fit unset: with no value the
     initial is `fill`, which STRETCHES the picture. So any failure to emit the modifier
     degrades to a sensible crop instead of a distorted image — which is exactly what
     happened once while building this, when the modifier shipped un-interpolated.

     NO `height` here either. Specifying both width and height specifies both axes, which
     makes the browser ignore aspect-ratio: the 4/5 frame silently became the image's own
     2:3 and the crop disappeared. width + aspect-ratio is what holds the frame, and
     base.css's `img { height: auto }` supplies the other axis. */
  .al-steps__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: var(--al-surface-mauve);
  }

  .al-steps__img--cover {
    object-fit: cover;
  }

  .al-steps__img--contain {
    object-fit: contain;
  }

  @media screen and (min-width: 750px) {
    .al-steps__body--img-right,
    .al-steps__body--img-left {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
      align-items: start;
      /* Reserve clearance for the FIXED right icon rail — measured, not guessed: at 1440
         the image's right edge landed at 1400 while `.al-rail` starts at 1392, so it ran
         8px UNDER the rail. Same reservation .product-details and al-collection-header
         use, not an invented value. */
      padding-inline-end: max(0px, calc(var(--al-space-xl) - var(--page-margin)));
    }

    /* Image left = same two-column grid, order swapped. The figure is second in the DOM
       so the steps keep reading first for screen readers and on mobile. */
    .al-steps__body--img-left {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    }
    .al-steps__body--img-left .al-steps__main { grid-column: 2; grid-row: 1; }
    .al-steps__body--img-left .al-steps__figure { grid-column: 1; grid-row: 1; }

    /* Two-up step grid, for shorter step text. */
    .al-steps__list--grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--al-space-2xl);
    }

    .al-steps__step {
      grid-template-columns: 3rem minmax(0, 1fr);
      gap: var(--al-space-lg);
    }
  }
/* END_SECTION:al-steps */

/* START_SECTION:al-story (INDEX:18) */
.al-story {
    position: relative;
    background: var(--al-base);
    padding-inline: clamp(var(--al-space-md), 5vw, var(--al-space-2xl));
  }

  /* ── Text-travel motion — BUILT 2026-07-17 (al-story-motion.js) ────────────────
     The tall scroll-distance container (190vh) + native position:sticky columns
     live behind the `.al-story--travel` modifier, which al-story-motion.js adds at
     runtime (desktop + no-reduced-motion) COUPLED to the travel tween. When the
     class is present it reinstates the shared `height: 190vh` runway on the
     grid + sticky 100dvh columns, and the scrubbed text-travel transform binds to
     `.al-story__text`. When it's ABSENT (JS-off / reduced-motion / mobile) the
     section renders in its COLLAPSED resting state: content height, standard 64px
     section rhythm (via spacing-style) — no tall empty scroll void, text at rest. ──── */
  .al-story__grid {
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }

  .al-story__col {
    position: relative;
  }

  /* Collapsed: media column carries an explicit height so its image (absolute in
     travel mode) still fills a real box. */
  .al-story__col--media .al-story__sticky {
    height: clamp(480px, 62vh, 720px);
    overflow: hidden;
  }
  .al-story__col--media .al-story__img {
    position: relative;
    height: 100%;
  }

  .al-story__col--text .al-story__sticky {
    display: flex;
    align-items: flex-end;
  }

  /* Pass 2 (gated): tall scroll distance + sticky-pinned columns.

     SCROLL DISTANCE — 190vh, a SHARED CONSTANT (2026-08-02): the runway the text rises
     through. It lives here, next to the rest position below, for the same reason TRAVEL /
     REST_AT / START_AT live in al-story-motion.js — motion tuning, not merchant content.
     It was briefly a per-instance `scroll_distance` range setting (fed via a
     `--al-story-distance` inline custom property); that setting is REMOVED, because it was
     the only mechanism that ever let the homepage and About placements drift apart. Change
     it here and BOTH placements change together. Retuning it requires re-checking the
     pin-moment (see the rest-position note below) — the two are coupled. */
  .al-story--travel .al-story__grid {
    align-items: stretch;
    height: 190vh;
  }
  .al-story--travel .al-story__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .al-story--travel .al-story__col--media .al-story__sticky {
    height: 100dvh;
  }
  .al-story--travel .al-story__col--media .al-story__img {
    position: absolute;
    inset: 0;
    height: auto;
  }
  /* REST POSITION — TOP-ANCHORED SHARED CONSTANT (2026-08-02). The text settles THIS FAR
     BELOW THE TOP OF THE STICKY IMAGE; the travel tween ends at y:0, which IS this position,
     so this declaration alone defines where the story comes to rest. 162px at 1440x900.

     TOP-anchored (flex-start + padding-top), NOT the bottom-anchored flex-end + padding-bottom
     this used to be. Bottom-anchoring made the rest position a function of the TEXT BLOCK'S
     HEIGHT, so the two placements could never actually match: measured at 1440x900 the homepage
     rested 439px below the image top and About 583px, a 144px split caused purely by About
     having no link and a shorter body. It also moved when copy rewrapped (About's block is 236px
     at 1440 but 288px at 1280) and swung 232px -> 919px across desktop viewport heights. Anchoring
     to the TOP makes rest-top EQUAL this padding on both placements, at every viewport, and
     immune to copy edits — the same "cannot diverge" goal as the constants above.

     CEILING (measured cold, real wheel input, both placements, 1440x900 + 1024x640): the limit is
     NOT the blank-column-at-pin defect — raising the rest raises the whole band, so the text is
     MORE visible at pin, and it measured FULLY visible at pin in all 12 sweep runs. The real limit
     is this column's `overflow: hidden` clipping the text's BOTTOM, which binds first on the
     homepage (taller block) at short desktop viewports: 18vh leaves 174px of spare room at
     1024x640. Raising it needs a fresh sweep — see .verify/story/. */
  .al-story--travel .al-story__col--text .al-story__sticky {
    align-items: flex-start;
    padding-top: clamp(var(--al-space-3xl), 18vh, 190px);
    padding-bottom: 0;
  }

  .al-story__text {
    will-change: transform; /* Phase 8 Pass 2: text-travel transform binds here */
  }

  /* Type comes from .al-eyebrow (al-utilities.css, Phase A3) — layout only here. */
  .al-story__eyebrow {
    display: block;
  }

  .al-story__heading {
    margin: 22px 0 0;
    font-weight: 600;
    line-height: 0.99;
    letter-spacing: var(--al-tracking-heading);
    color: var(--al-brand);
    max-width: 16ch;
  }

  .al-story__body {
    margin-top: 28px;
    max-width: 46ch;
  }

  .al-story__body :where(p) {
    margin: 0 0 1em;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-body);
    line-height: 1.7;
    color: var(--al-ink);
    text-wrap: pretty;
  }

  .al-story__body :where(p):last-child {
    margin-bottom: 0;
  }

  .al-story__link {
    margin-top: 32px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-family: var(--al-font-body);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: var(--al-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--al-brand);
    border-bottom: 1px solid color-mix(in srgb, var(--al-brand) 35%, transparent);
    padding-bottom: 4px;
    transition: gap var(--al-dur-base) var(--al-ease);
  }

  .al-story__link:hover {
    gap: 14px;
  }

  /* Media column: tall image, pinned full-height on the right. */
  .al-story__img {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .al-story__img-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    display: block;
  }

  .al-story__img-el--placeholder {
    display: grid;
    place-items: center;
    background: var(--al-surface-mauve);
  }

  .al-story__placeholder-svg {
    width: 55%;
    height: 55%;
    fill: var(--al-muted);
  }

  .al-story__img-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 58%, var(--al-scrim-light) 100%);
  }

  @media screen and (max-width: 749px) {
    .al-story__grid {
      grid-template-columns: 1fr;
      height: auto;
      gap: 0;
    }
    /* On mobile the sticky/tall mechanic is dropped — stack normally. */
    .al-story__sticky {
      position: static;
      height: auto;
    }
    .al-story__col--text .al-story__sticky {
      padding-block: clamp(var(--al-space-xl), 8vh, var(--al-space-2xl));
    }
    .al-story__col--media .al-story__sticky {
      height: clamp(420px, 80vh, 640px);
    }
    .al-story__col--media .al-story__img {
      position: relative;
    }
  }
/* END_SECTION:al-story */

/* START_SECTION:al-video (INDEX:19) */
.al-video {
    background: var(--al-base);
  }

  .al-video__head {
    padding-inline: clamp(var(--al-space-md), 5vw, var(--al-space-2xl));
    margin-bottom: clamp(28px, 4vh, 48px);
  }

  /* Type comes from .al-eyebrow (al-utilities.css, Phase A3) — layout only here. */
  .al-video__eyebrow {
    display: block;
  }

  .al-video__heading {
    margin: 16px 0 0;
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: var(--al-tracking-hero);
    color: var(--al-brand);
  }

  /* Full-bleed — edge to edge, no side margins (cinematic). */
  .al-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--al-ink);
  }

  .al-video__poster,
  .al-video__el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .al-video__poster-img,
  .al-video__poster--placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .al-video__poster--placeholder {
    display: grid;
    place-items: center;
    background: var(--al-surface-mauve);
  }

  .al-video__placeholder-svg {
    width: 40%;
    height: 40%;
    fill: var(--al-muted);
  }

  .al-video__el {
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: var(--al-ink);
  }

  .al-video__frame.is-playing .al-video__el {
    opacity: 1;
    pointer-events: auto;
  }

  .al-video__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
      180deg,
      var(--al-scrim-light) 0%,
      transparent 34%,
      var(--al-scrim-med) 100%
    );
  }

  .al-video__frame.is-playing .al-video__scrim {
    opacity: 0;
    transition: opacity var(--al-dur-base) var(--al-ease);
  }

  .al-video__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(76px, 7vw, 108px);
    height: clamp(76px, 7vw, 108px);
    border-radius: 999px; /* the play affordance is the one intentional circle */
    border: 1px solid color-mix(in srgb, var(--al-on-brand) 70%, transparent);
    background: color-mix(in srgb, var(--al-on-brand) 16%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--al-on-brand);
    cursor: pointer;
    transition: background var(--al-dur-base) var(--al-ease), transform var(--al-dur-base) var(--al-ease), opacity var(--al-dur-base) var(--al-ease);
  }

  .al-video__play:hover {
    background: color-mix(in srgb, var(--al-on-brand) 26%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .al-video__play:hover {
      transform: translate(-50%, -50%) scale(1.06);
    }
  }

  .al-video__frame.is-playing .al-video__play {
    opacity: 0;
    pointer-events: none;
  }

  .al-video__caption {
    position: absolute;
    left: clamp(22px, 2.6vw, 40px);
    bottom: clamp(20px, 2.6vh, 34px);
    z-index: 3;
    font-family: var(--al-font-body);
    font-size: 11px;
    letter-spacing: var(--al-tracking-eyebrow);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--al-on-brand) 82%, transparent);
    font-weight: 600;
  }

  .al-video__frame.is-playing .al-video__caption {
    opacity: 0;
    transition: opacity var(--al-dur-base) var(--al-ease);
  }
/* END_SECTION:al-video */

/* START_SECTION:collection-links (INDEX:21) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media screen and (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:featured-product (INDEX:27) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

    @media screen and (min-width: 750px) {
      --padding-block: 40px;
      --padding-inline: 40px;
    }
  }

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:28) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
    }
  }

  .utilities a {
    color: var(--color-foreground-muted);
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
      justify-self: start;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:29) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

  .footer-content .menu__heading__default {
    font-weight: var(--font-heading--weight);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:30) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:31) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__link:not([aria-haspopup]):hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply inherit to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='top']:hover .header__row--top,
  [data-transparent-color-scheme='top']:focus-within .header__row--top,
  [data-transparent-color-scheme='both']:hover .header__row--top,
  [data-transparent-color-scheme='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover .header__row--bottom,
  [data-transparent-color-scheme='bottom']:focus-within .header__row--bottom,
  [data-transparent-color-scheme='both']:hover .header__row--bottom,
  [data-transparent-color-scheme='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-heightened);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-sticky);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='top']:hover,
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover,
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-scheme-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different color scheme, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from color scheme, background is controlled by the underlays */
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--color-border);
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Alex & Lace (Phase 3b): the rows are logo-only (icons live in the fixed
     right-edge rail), so the logo pins to the FAR LEFT at every breakpoint.
     Horizon's mobile/touch grid otherwise centers it between 44px icon
     bookends that no longer exist. */
  #header-component .header__columns .header-logo,
  #header-component[data-menu-style='drawer'] .header__columns .header-logo {
    grid-area: unset;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: flex-start;
  }

  @media screen and (max-width: 749px) {
    /* Horizon zeroes the start padding to hang the leftA icon bookend flush;
       with the logo leading the row it needs a breathing gutter again. */
    #header-component .header__columns {
      padding-inline-start: var(--al-space-sm);
    }

    /* Alex & Lace (3b-rev): on mobile the logo renders inside the full-width
       frosted rail bar (al-icon-rail) instead. Hide the ROW copy visually but
       keep its box, so the JS-measured --header-height still describes a
       logo-height header (transparent-header offsets depend on it). Desktop
       keeps the row logo — the rail's copy is desktop-hidden. */
    #header-component .header-logo {
      visibility: hidden;
    }
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
     * the height of the header
     */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:32) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

    @media screen and (min-width: 750px) {
      display: block;
    }
  }

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:33) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:34) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:36) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:37) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:38) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:40) */
.al-collection-pager {
    grid-column: var(--full-width);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md, 1rem);
    padding-block: var(--padding-md, 1rem);
    padding-inline: var(--page-margin, 1rem);
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    letter-spacing: 0.02em;
    color: var(--al-ink);
  }

  .al-collection-pager__count {
    color: var(--al-mauve);
    font-variant-numeric: tabular-nums;
  }

  .al-collection-pager__link {
    color: var(--al-ink);
    text-decoration: none;
  }

  .al-collection-pager__link:hover {
    color: var(--al-brand);
  }

  .al-collection-pager__link--disabled {
    opacity: 0.35;
    pointer-events: none;
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:42) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:43) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:44) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:45) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-hotspots (INDEX:48) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--color-foreground);
      background-color: var(--color-background);
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:49) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* ============================================================
     Alex & Lace — Phase 6 (product page) overrides.
     Scoped to the product template so the shared product-information
     layout (used by the homepage featured product too) is untouched.
     ============================================================ */

  /* Option A proportions: ~60% media / ~40% buy panel (tune-live).
     Horizon's default at this breakpoint is 2fr/1fr (~67/33). */
  @media screen and (min-width: 1200px) {
    [data-template^='product']
      .product-information__grid:not(.product-information__grid--half, .product-information--media-none).product-information--media-left {
      grid-template-columns: 3fr 2fr;
    }

    [data-template^='product']
      .product-information__grid:not(.product-information__grid--half, .product-information--media-none).product-information--media-right {
      grid-template-columns: 2fr 3fr;
    }
  }

  /* No quantity selector on the PDP (lingerie default — ROADMAP Phase 6). Horizon renders
     the quantity static block unconditionally; we hide it (the form still submits qty 1).
     Horizon's variant/cart JS is untouched — this is styling only. */
  [data-template^='product'] .product-details .quantity-selector-wrapper,
  [data-template^='product'] .product-details .quantity-label,
  [data-template^='product'] .product-details .quantity-rules {
    display: none;
  }

  /* Product title in the brand display face (Nohemi). The h3 type preset pulls Horizon's
     heading font; the brand display font isn't a Shopify font-picker option, so we map the
     PDP title to the brand token here. Higher-specificity than Horizon's
     `.text-block.h3 :is(h1..h6)` rule so it wins reliably. */
  [data-template^='product'] .product-details .text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--al-font-display);
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:52) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:57) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:58) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:60) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:61) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:62) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:63) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:64) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:65) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:66) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:67) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:68) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:69) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:70) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:71) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:74) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:76) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:80) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:81) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:83) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:86) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:87) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:88) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:89) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:92) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:96) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-details (INDEX:101) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:106) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:107) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:108) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accordion (INDEX:110) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:al-eyebrow (INDEX:112) */
/* TYPE COMES FROM .al-eyebrow (assets/al-utilities.css) — Phase A3.
     This block owned a `.al-eyebrow` rule declaring 0.75rem / 0.26em, off-scale on
     BOTH axes against the 11px / 0.22em standard, which was awkward given it is the
     one element named for the pattern. Worse, that rule was globally scoped and
     compiled into styles.css (which loads last), so once the shared utility existed
     it would have overridden it for every eyebrow on the site — not just this block.
     Deleted rather than narrowed; only the layout reset stays, under its own class. */
  .al-pdp-eyebrow {
    margin: 0;
  }
/* END_BLOCK:al-eyebrow */

/* START_BLOCK:al-product-accordion (INDEX:113) */
/* ---- PDP overrides only. Base lives in assets/al-accordion.css ----
     Scoped to `.al-accordion--product` so these can never reach the FAQ /
     Find-your-fit consumer, and so neither consumer's values depend on the
     other's. Both declare their type and colour in full. */

  /* Micro-label treatment — prototype: 12px / 0.14em / plum (closed) → brand (open) */
  .al-accordion--product .al-accordion__summary {
    padding-block: 1.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--al-plum);
  }
  .al-accordion--product .al-accordion__row[open] .al-accordion__summary {
    color: var(--al-brand);
  }

  /* Body: 14px (§5 keeps --al-ink and 1.7 from the shared base — no soft shade).
     Was 13px + a since-dropped soft-ink token. */
  .al-accordion--product .al-accordion__panel-inner {
    padding-block-end: 1.3rem;
    font-size: 0.875rem;
  }

  /* size-chart trigger — quiet text affordance, sharp corners, brand violet.
     PDP-only: `_al-accordion-row` is the sole renderer (size_chart source). */
  .al-accordion--product .al-accordion__sizechart-trigger {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-body);
    color: var(--al-brand);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }
  .al-accordion--product .al-accordion__sizechart-trigger:hover {
    color: var(--al-plum);
  }
/* END_BLOCK:al-product-accordion */

/* START_BLOCK:al-reassurance (INDEX:114) */
/* ROADMAP 6.4b (supersedes the prototype's left/11.5px caption, 2026-07-23): a deliberate,
     CENTERED reassurance bar — slightly larger, with breathing room above it. Type + space tokens.
     Breathing room lives on the WRAPPER (the __line is a <p>; Horizon's higher-specificity paragraph
     reset zeroed a margin set on it). */
  .al-reassurance {
    margin-block-start: var(--al-space-md);
  }

  .al-reassurance__line {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--al-space-md);
    text-align: center;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    line-height: 1.4;
    color: var(--al-muted);
  }

  .al-reassurance__item {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  /* Square bullet (sharp corners per design tokens), rose accent (prototype). */
  .al-reassurance__bullet {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    background: var(--al-rose);
    display: inline-block;
  }
/* END_BLOCK:al-reassurance */

/* START_BLOCK:al-short-description (INDEX:115) */
.al-short-description {
    font-family: var(--al-font-body);
    /* Body copy: flat 16px / 1.72 / ink (Design System §5 — no secondary ink shade; body = --al-ink).
       Was a clamp(14→16) size + a since-dropped soft-ink token (§5). */
    font-size: var(--al-fs-body);
    line-height: 1.72;
    color: var(--al-ink);
    max-width: 42ch;
    text-wrap: pretty;
  }
  .al-short-description > :first-child {
    margin-block-start: 0;
  }
  .al-short-description > :last-child {
    margin-block-end: 0;
  }
/* END_BLOCK:al-short-description */

/* START_BLOCK:comparison-slider (INDEX:120) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:121) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:122) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:124) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:126) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:129) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:131) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:132) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:134) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:135) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:137) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:138) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:139) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:142) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:144) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:145) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:148) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:150) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:151) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:152) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:155) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:156) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:al-free-shipping-bar (INDEX:160) */
.al-fsbar {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-block-end: 1.25rem;
  }

  .al-fsbar__label {
    margin: 0;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    color: var(--al-ink);
  }

  .al-fsbar__track {
    position: relative;
    height: 4px;
    width: 100%;
    overflow: hidden;
    /* sharp corners per design tokens */
    background: color-mix(in srgb, var(--al-muted) 45%, transparent);
  }

  .al-fsbar__fill {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    background: var(--al-brand);
    /* scaleX is set inline from the server-rendered ratio */
  }

  @media (prefers-reduced-motion: no-preference) {
    .al-fsbar__fill {
      transition: transform var(--al-dur-base) var(--al-ease);
    }
  }

  .al-fsbar__reassurance {
    margin: 0;
  }
/* END_SNIPPET:al-free-shipping-bar */

/* START_SNIPPET:al-icon-rail (INDEX:163) */
.al-rail {
    position: fixed;
    display: flex;
    /* Above page chrome/sticky content (8), below the nav drawer panel (18) and
       its backdrop (which both live INSIDE the rail's stacking context and keep
       their own layer values relative to it). */
    z-index: var(--layer-overlay);
  }

  /* The ONE frost source of truth (.al-frosted) at the rail's own lighter
     opacity — the utility's 68% default was tuned for image-duo captions; a
     full-height strip wants more transparency to stay a "delicate glass" read. */
  .al-rail__glass {
    position: absolute;
    inset: 0;
    z-index: -1; /* glass sits behind the icons, above the page */
    --al-frost-opacity: 45%;
  }

  .al-rail__top,
  .al-rail__bottom {
    display: flex;
    align-items: center;
    color: var(--al-brand);
  }

  /* ── Desktop: thin full-height strip on the right edge ─────────────── */
  @media screen and (min-width: 750px) {
    .al-rail {
      inset: 0 0 0 auto;
      width: var(--al-space-xl); /* 48px — thin; wide enough for 44px touch targets */
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding-block: var(--al-space-sm);
    }

    /* Hairline on the inner (left) edge only — the other three sit on
       viewport edges where a border would just read as a stray line. */
    .al-rail__glass {
      border-width: 0 0 0 1px;
    }

    /* Logo lives in the header row on desktop; the rail copy is mobile-only. */
    .al-rail__logo {
      display: none;
    }

    .al-rail__top,
    .al-rail__bottom {
      flex-direction: column;
      gap: var(--al-space-sm);
    }

    /* Cart above account (3b order: cart, account, language+currency,
       top → bottom). DOM order is account-then-cart, so reverse it. */
    .al-rail header-actions {
      flex-direction: column-reverse;
      align-items: center;
      gap: var(--al-space-sm);
    }

    /* Language + currency: Horizon's native dropdown-localization, rotated to
       run down the rail (escape.cafe treatment). Same component, same JS. */
    .al-rail .dropdown-localization__button {
      writing-mode: vertical-rl;
      background: transparent;
      border: none;
      box-shadow: none;
      padding: var(--al-space-xs) 0;
      /* vertical-rl makes the INLINE axis horizontal, so min-height alone left
         this 22px wide — the one rail control missing the width half of the
         44px target its siblings above already set. */
      min-width: var(--minimum-touch-target);
      min-height: var(--minimum-touch-target);
      color: var(--al-brand);
      gap: var(--al-space-xs);
    }

    /* Open the picker leftward out of the rail, bottom-aligned with the
       trigger — Horizon's default (below the trigger) would fall off-screen. */
    .al-rail dropdown-localization-component .localization-wrapper.right-bound {
      top: auto;
      bottom: 0;
      right: calc(100% + var(--al-space-xs));
      left: auto;
    }
  }

  /* ── Mobile: full-width frosted bar, logo left / icons right ───────── */
  @media screen and (max-width: 749px) {
    .al-rail {
      /* Not sticky on mobile: absolute anchors to .header-section (the
         nearest positioned ancestor, position:relative), so the bar
         scrolls away with the page. Desktop keeps the fixed rail. */
      position: absolute;
      top: 0;
      right: 0;
      left: 0; /* edge-to-edge — full viewport width */
      /* Height comes from content (44px targets) + padding, NOT from
         --header-height: the JS-measured header is logo-only now and its
         height no longer describes this bar. */
      flex-direction: row;
      align-items: center;
      gap: var(--al-space-xs);
      padding: var(--al-space-xs);
      /* Logo gutter — matches the breathing room the header row gives it. */
      padding-inline-start: var(--al-space-sm);
    }

    .al-rail__glass {
      border-width: 0 0 1px 0; /* full-width bar: hairline on the bottom edge only */
    }

    .al-rail__logo {
      display: flex;
      align-items: center;
      min-height: var(--minimum-touch-target);
    }

    /* The frosted bar is a LIGHT backdrop at every scroll position, so the
       rail copy never wants the transparent-header inverse treatment the row
       copy gets over the hero — pin it to the original logo in brand violet
       (the text fallback inherits color). */
    .al-rail__logo .header-logo {
      color: var(--al-brand);
      --header-logo-display: block;
      --header-logo-inverse-display: none;
    }

    /* Push the icon cluster to the right edge; logo holds the left. */
    .al-rail__top {
      margin-inline-start: auto;
    }

    .al-rail__top,
    .al-rail__bottom {
      flex-direction: row;
    }

    /* Search and cart must stay one-tap visible (conversion requirement);
       account and language/currency live inside the nav drawer on mobile.
       The dropdown localization already carries Horizon's mobile:hidden
       class. */
    .al-rail .account-button {
      display: none;
    }
  }

  /* ── Icon treatment — violet on frost ──────────────────────────────── */

  /* Menu toggle: Horizon gives the summary --padding-lg, which would force the
     strip wide. Tighten it; the icon keeps its 44px minimum target. */
  .al-rail .menu-drawer-container .header__icon--summary {
    color: var(--al-brand);
    padding: var(--al-space-xs);
    min-width: var(--minimum-touch-target);
    min-height: var(--minimum-touch-target);
    transition: color var(--al-dur-fast) var(--al-ease);
  }

  .al-rail .menu-drawer-container .header__icon--summary:hover {
    color: var(--al-plum);
  }

  .al-rail .header-actions__action {
    --button-color: var(--al-brand);
    transition: color var(--al-dur-fast) var(--al-ease);
  }

  /* Search trigger: violet comes from .header-actions__action above; it just
     needs the 44px target the header row's grid bookends used to guarantee. */
  .al-rail .search-action .header-actions__action {
    min-width: var(--minimum-touch-target);
    min-height: var(--minimum-touch-target);
    align-items: center;
  }

  .al-rail .header-actions__action:hover {
    --button-color: var(--al-plum);
  }

  .al-rail .account-button {
    --color-account-icon: var(--al-brand);
  }

  /* The old header row gave .header__drawer a 60px min-height for row
     alignment; in the rail the toggle sizes itself (44px minimum target). */
  .al-rail .header__drawer {
    min-height: 0;
  }
/* END_SNIPPET:al-icon-rail */

/* START_SNIPPET:al-product-card (INDEX:164) */
/* ---- Mobile grid-track overflow fix (2026-07-23) ----------------------------------
     Horizon's base .product-grid uses `grid-template-columns: 1fr 1fr` on mobile, and
     `1fr` == `minmax(auto, 1fr)`. The `auto` floor is each track's min-content — driven
     by the card's intrinsic image width (~226px here) — which exceeds the 50% share, so
     BOTH tracks grow to fit content and the row overflows the viewport (scrollWidth 426 >
     390, clipping the right column's top-right SALE chip). `minmax(0, 1fr)` drops the
     floor to 0 so the two tracks are forced to an exact equal share and the grid fits its
     container. Mobile-only (<750); the ≥750 desktop `--product-grid-columns-desktop` is
     untouched. Belt-and-suspenders is NOT used — the width math is correct, no clipping. */
  @media screen and (max-width: 749px) {
    .product-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* ---- One-column view must survive the rule above (2026-08-09) --------------
       The 2026-07-23 fix above silently broke the mobile one-column toggle, and the
       reason is NOT visible from base.css line numbers. Horizon's intended rule is

         [product-grid-view='mobile-single'], .product-grid-mobile--large
           { @media (max-width:749px) { grid-template-columns: 1fr } }   base.css:1024

       which is (0,1,0) — an exact specificity TIE with the `.product-grid` rule above.
       The tie breaks on document order ACROSS STYLESHEETS: this snippet's stylesheet
       block is compiled into `compiled_assets/styles.css`, which loads AFTER base.css,
       so the two-track rule won and `product-grid-view="mobile-single"` was a no-op —
       the radio and its icon changed state, the grid never reflowed.
       (Confirmed via CDP CSS.getMatchedStylesForNode: base.css = sheet …-39,
       the compiled bundle = sheet …-9, and the bundle rule sorts last.)

       Fixing it HERE rather than bumping Horizon's rule keeps the cause and the cure
       in one file. (0,2,0) clears both (0,1,0) rules regardless of sheet order, and it
       keeps the same `minmax(0, …)` floor the fix above exists for — a single track
       needs that floor for exactly the same min-content reason a pair does. */
    .product-grid[product-grid-view='mobile-single'],
    .product-grid.product-grid-mobile--large {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .al-card {
    position: relative; /* anchor for the quick-add popover */
    display: flex;
    flex-direction: column;
  }

  /* ---- Media + portrait frame -------------------------------------------------- */
  .al-card__media {
    position: relative;
    aspect-ratio: 2 / 3; /* tall editorial portrait, 8pm.it feel */
    overflow: hidden;
    background: var(--al-surface-mauve);
    isolation: isolate;
  }

  .al-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .al-card__img--secondary {
    opacity: 0;
    transition: opacity var(--al-dur-base) var(--al-ease);
  }

  .al-card__img--placeholder {
    display: grid;
    place-items: center;
  }

  .al-card__placeholder-svg {
    width: 70%;
    height: 70%;
    fill: var(--al-muted);
  }

  /* Hover swap + restrained zoom. Zoom is motion-sensitive; the swap itself is allowed
     under reduced-motion (it carries information, not decoration). */
  .al-card__media:hover .al-card__img--secondary {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .al-card__img {
      /* transform: distinct easeOutCubic (0.22,0.61,0.36,1) kept — not a motion token; see §6 flag. */
      transition: transform var(--al-dur-slow) cubic-bezier(0.22, 0.61, 0.36, 1), opacity var(--al-dur-base) var(--al-ease);
    }
    .al-card__media:hover .al-card__img {
      transform: scale(1.06);
    }
  }

  .al-card__media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  /* ---- Corner tag (NEW / BESTSELLER chip, top-left) -----------------------------
     Design-matched (Collection.dc.html): 14px inset, near-opaque base fill (92%),
     violet uppercase text, 6x11 chip padding, sharp 0px corners, weight 500.
     TWO constrained-badge exceptions to the design system, both scoped to this chip:
       1. OFF-SCALE size — 11px via the legacy --al-fs-eyebrow token (below the 13px
          --al-fs-small floor), uniform across breakpoints. Same category as the
          size-cell labels; the 13px read too dense on the 2-up mobile card.
       2. TIGHTER tracking on MOBILE ONLY — 0.14em under 750px vs the 0.22em eyebrow
          standard (--al-tracking-eyebrow) kept on desktop. "BESTSELLER" is a long word;
          on the narrow 2-up card, word length × 0.22em drove the chip past ~60% of the
          card. Desktop chips sit ~34% wide with room to spare, so they stay on-standard;
          the exception is confined to where the width problem actually is. */
  .al-card__tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3; /* above the media link + cursor labels */
    pointer-events: none; /* decorative — clicks fall through to the card link */
    font-family: var(--al-font-body);
    font-size: var(--al-fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--al-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--al-brand);
    background: color-mix(in srgb, var(--al-base) 92%, transparent);
    padding: 6px 11px;
  }

  /* SALE chip — top-RIGHT, rose (--al-rose = the reserved sale colour). Reuses the .al-card__tag chip
     geometry (92% base fill, 11px eyebrow tier, 0px corners, tracking exceptions); only the corner and
     colour change, so it can't collide with the top-left NEW/BESTSELLER chip. Rose here reads as SALE
     (a corner badge paired with the rose price), distinct from the site's rose EYEBROW convention
     (uppercase lead-in text) — the card carries no eyebrow, so there's nothing to confuse it with. */
  .al-card__tag--sale {
    left: auto;
    right: 14px;
    color: var(--al-rose);
  }

  /* SOLD-OUT chip — top-LEFT (inherits .al-card__tag geometry: 92% base, 11px eyebrow tier, 0px corners,
     tracking exceptions). Muted (not violet/rose) reads as an unavailable state, not a badge. Shares the
     top-left corner with NEW/BESTSELLER but never coexists (rendered only when card_tag is blank). */
  .al-card__tag--soldout {
    color: var(--al-muted);
  }

  /* Dim + partly desaturate a sold-out card's imagery. Applied to .al-card__frame — the wrapper
     around the image PAIR — never to the individual images. Fixed 2026-08-02.

     WHY THE LAYER MATTERS (two ways to get this wrong, both verified in the browser):
       1. `opacity` on `.al-card__img` — what shipped before. Specificity 0,2,0 beat
          `.al-card__img--secondary { opacity: 0 }` at 0,1,0, so the hover-swap's hidden image was
          never hidden: both painted at 0.55 simultaneously (double exposure) and the swap was dead.
       2. `filter: opacity()` on `.al-card__img` — dodges the specificity clash and fixes the REST
          state, but not hover: at hover the swapped-in image is itself 55% translucent, so the
          image beneath shows through and the card ghosts again mid-swap.
     Dimming the FRAME fixes both. The swap resolves at full opacity inside the frame — the
     top image completely covers the one below — and the composited result is dimmed once.

     The frame wraps ONLY the images. The SOLD OUT / SALE chips (z-index 3) and the cursor-follow
     labels (z-index 2) are siblings outside it, so they keep full strength; the chips carry their
     own muted treatment via `.al-card__tag--soldout`. */
  .al-card__frame {
    position: absolute;
    inset: 0;
  }

  .al-card--soldout .al-card__frame {
    filter: grayscale(0.45);
    opacity: 0.55;
  }

  /* ---- Cursor-following labels ------------------------------------------------- */
  .al-card__labels {
    position: absolute;
    inset-inline: 0;
    bottom: 1.1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none; /* let clicks fall through to the media link... */
    opacity: 0;
    transition: opacity var(--al-dur-base) var(--al-ease);
    will-change: transform;
  }

  /* ...except the right label, which is its own link to the same target. */
  .al-card__label {
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    letter-spacing: var(--al-tracking-body);
    line-height: 1.2;
    color: var(--al-on-brand);
    text-shadow: 0 1px 10px color-mix(in srgb, var(--al-plum) 55%, transparent); /* soft plum halo for legibility */
  }

  .al-card__label--left {
    padding-inline-start: 0.9rem;
    max-width: 45%; /* never collides with the right label; long names wrap to 2 lines */
    text-wrap: balance;
    pointer-events: none;
  }

  .al-card__label--right {
    padding-inline-end: 0.9rem;
    white-space: nowrap;
    text-decoration: none;
    pointer-events: auto;
  }

  .al-card__label--right:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  /* Fine-pointer hover (data attribute set by JS) and any :hover both reveal labels.
     Touch / reduced-motion fall back to always-visible labels. */
  al-product-card[data-al-hover] .al-card__labels,
  .al-card__media:hover .al-card__labels {
    opacity: 1;
  }

  al-product-card[data-al-static] .al-card__labels {
    opacity: 1;
  }

  /* ---- Under-image meta (all left-aligned) -------------------------------------
     --al-card-meta-size is the name/price type tier. Desktop keeps the 16px body tier;
     the mobile override at the foot of this stylesheet steps it down for a denser,
     more uniform card. Declared here so both consumers read ONE value. */
  .al-card__meta {
    --al-card-meta-size: var(--al-fs-body);

    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    /* cards butt at ~2px in the dense grid — the 6px inline inset keeps
       neighbouring meta columns (price | next name) from touching */
    padding: var(--al-space-xs) 6px var(--al-space-sm);
  }

  .al-card__meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }

  /* ---- Name slot (hover-swap stage) --------------------------------------------
     Name and sizes occupy THE SAME grid cell, so the slot is as tall as the taller of
     the two and its height is identical at rest and mid-swap. That is what keeps the
     price and the quick-add row from moving — the requirement is structural, not a
     min-height guess. `min-inline-size: 0` lets the slot shrink under the price inside
     the flex row (the default `auto` floor is the longest word). */
  .al-card__name-slot {
    display: grid;
    min-inline-size: 0;
  }

  .al-card__name-slot > * {
    grid-area: 1 / 1;
  }

  .al-card__name {
    font-family: var(--al-font-body);
    font-size: var(--al-card-meta-size);
    color: var(--al-ink);
    text-decoration: none;
    min-inline-size: 0;
    /* Desktop: ONE line, ellipsis on overflow. The cursor-follow label surfaces the full
       name on hover, so truncation is never a dead end here. Mobile re-enables wrapping
       (no hover fallback exists there) at the foot of this stylesheet. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--al-dur-fast) var(--al-ease), color var(--al-dur-base) var(--al-ease);
  }

  .al-card__name:hover {
    color: var(--al-brand);
  }

  /* The swapped-in sizes line. Sits under the name until hover, then crosses over. */
  .al-card__swap {
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small); /* 13px — the shared small/meta tier */
    letter-spacing: var(--al-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--al-mauve);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--al-dur-fast) var(--al-ease);
  }

  /* Swap fires on hovering anywhere on the card, but ONLY where there is something to swap
     IN. `:has()` scopes the name's fade-out to slots that actually contain a sizes line, so:
       · sold-out cards          — `.al-card__swap` is never rendered → name stays put (spec:
                                   nothing is purchasable, surfacing sizes would mislead)
       · products with no size   — e.g. a single-variant "Default Title" product → name stays
         axis                      put rather than fading to an empty slot
     Without the `:has()` guard the bare `.al-card:hover .al-card__name { opacity: 0 }` fires
     on every card and blanks the name on exactly those two cases — measured 2026-08-02. */
  .al-card:hover .al-card__name-slot:has(.al-card__swap) .al-card__name {
    opacity: 0;
  }

  .al-card:hover .al-card__swap {
    opacity: 1;
  }

  .al-card__price {
    font-family: var(--al-font-body);
    font-size: var(--al-card-meta-size);
    color: var(--al-ink);
    white-space: nowrap;
    /* Never squished, and never displaced: the name slot truncates with an ellipsis instead
       of pushing the price, so the price holds one fixed position no matter the name length
       or the hover state. */
    flex-shrink: 0;
  }

  /* SALE price — struck compare-at (muted) beside the current price in rose (--al-rose). One line
     (nowrap inherited); server-rendered, so the extra price never causes a runtime layout shift. */
  .al-card__price--sale {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
  }
  .al-card__price-was {
    color: var(--al-muted);
    text-decoration: line-through;
  }
  .al-card__price-now {
    color: var(--al-rose);
  }

  .al-card__attrs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }

  .al-card__attrs-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }

  {%- comment -%} `.al-card__sizes` / `.al-card__size` removed 2026-08-02 — the sizes line lives in
    the name slot now (`.al-card__swap`) and its separators are real commas in the text, so the
    `+ .al-card__size` margin that used to fake them is gone with it. {%- endcomment -%}

  .al-card__colors {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }

  .al-card__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%; /* dots — the one place a circle is intentional */
    background: var(--al-dot, var(--al-surface-mauve));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--al-plum) 18%, transparent);
  }

  .al-card__dot--image {
    background-image: var(--al-dot-image);
    background-size: cover;
    background-position: center;
  }

  .al-card__dot--empty {
    background: var(--al-surface);
  }

  /* ---- Quick-add pill (no button chrome, violet, always visible) --------------- */
  .al-card__quickadd-trigger {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    /* roomy tap target without visual chrome */
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding-block: 0.25rem;
    padding-inline-start: 0.5rem;
    /* MUST be declared, not left to the UA (2026-08-15). This rule set three sides and left
       the fourth alone, so Chrome's default `button { padding-inline: 6px }` came through on
       the end side only — confirmed via CDP getMatchedStylesForNode: a user-agent rule for
       `button` supplying padding-inline-end:6px, with no author declaration to beat it.

       The visible effect was the reported one: the trigger's BORDER BOX already shared the
       price's right edge exactly (both 689 — the two rows are both `space-between` inside
       the same padding box, so the containers were never at fault), but its TEXT stopped
       6px short, so "+ Quick add" and the price read as two different alignment points.

       Zeroing it is safe rather than a nudge: this control has no visual chrome to shift
       (`background: none`, `border: 0` above), so nothing but the text moves, and the tap
       target keeps its 1.75rem min-height plus the 0.5rem leading padding. The card's own
       `.al-card__meta` inline padding still supplies the breathing room to the card edge. */
    padding-inline-end: 0;
    /* Type comes from .al-eyebrow--lg (Phase A3). This is the B2 placeholder the A3 brief
       flagged: B2 set font-size directly to var(--al-fs-small) "matched to the swapped-in
       sizes line so every small uppercase label on the card sits on ONE tier", precisely
       because the --lg variant did not exist yet. Now it does, so the direct declaration
       is gone and the class carries it — same 13px, no behaviour change. */
    --al-eyebrow-color: var(--al-brand);
    white-space: nowrap;
    cursor: pointer;
  }

  .al-card__quickadd-trigger:hover {
    color: var(--al-plum);
  }

  /* ---- Quick-add popover ------------------------------------------------------- */
  .al-card__quickadd-panel {
    position: absolute;
    z-index: 5;
    inset-inline-end: 0;
    /* sits just above the meta row, overlaying the bottom of the image */
    inset-block-end: 2.5rem;
    width: min(20rem, 92%);
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--al-surface);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--al-plum) 22%, transparent);
    /* closed by default; JS toggles [data-open] */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .al-card__quickadd-panel[data-open] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    .al-card__quickadd-panel {
      transform: translateY(0.4rem);
      transition: opacity var(--al-dur-fast) var(--al-ease), transform var(--al-dur-fast) var(--al-ease), visibility 0s linear var(--al-dur-fast);
    }
    .al-card__quickadd-panel[data-open] {
      transform: translateY(0);
      transition: opacity var(--al-dur-fast) var(--al-ease), transform var(--al-dur-fast) var(--al-ease);
    }
  }

  .al-card__quickadd-options {
    display: grid;
    gap: 0.7rem;
  }

  .al-card__quickadd-option {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  /* Type comes from .al-eyebrow (Phase A3) — 11px standard; mauve via the custom
     property. NOTE: the A3 brief described this and the trigger as both parked on
     var(--al-fs-small) awaiting --lg. Only the TRIGGER was (13px); this legend was
     already on var(--al-fs-eyebrow) (11px), so it takes the standard, not --lg.
     Both keep their current rendered size. */
  .al-card__quickadd-legend {
    padding: 0;
    margin-block-end: 0.4rem;
    --al-eyebrow-color: var(--al-mauve);
  }

  .al-card__quickadd-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* Hidden but focusable — keyboard focus lands on the radio, the chip shows the ring.
     (Avoids Horizon's .visually-hidden, which un-hides on :focus and flashes a native radio.) */
  .al-card__quickadd-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* Sharp corners per design tokens — no border-radius on chips. */
  .al-card__quickadd-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding-inline: 0.55rem;
    font-family: var(--al-font-body);
    font-size: var(--al-fs-small);
    color: var(--al-ink);
    border: 1px solid var(--al-muted);
    cursor: pointer;
    user-select: none;
  }

  .al-card__quickadd-radio:checked + .al-card__quickadd-chip {
    background: var(--al-brand);
    border-color: var(--al-brand);
    color: var(--al-on-brand);
  }

  .al-card__quickadd-radio:focus-visible + .al-card__quickadd-chip {
    outline: 2px solid var(--al-brand);
    outline-offset: 2px;
  }

  .al-card__quickadd-radio[data-soldout] + .al-card__quickadd-chip {
    color: var(--al-mauve);
    opacity: 0.5;
    text-decoration: line-through;
  }

  /* Add button: brand violet, sharp corners. */
  .al-card__quickadd-add.button {
    width: 100%;
    border-radius: 0;
  }

  @media screen and (max-width: 749px) {
    /* CURSOR-FOLLOW LABELS ARE DESKTOP-ONLY (2026-08-02). They used to render on mobile, and
       not merely as a leftover hover state: al-product-card.js gates the choreography on
       POINTER TYPE, not width — `(hover: hover) and (pointer: fine)`. A touch device fails
       that test, takes the `else` branch and gets `data-al-static`, whose rule pins the
       labels at `opacity: 1` PERMANENTLY. Measured on an iPhone profile: every card carried
       "<name> [ View product ]" burned into the image with no way to dismiss it. A narrow
       fine-pointer window (desktop browser resized to 390) got the full cursor-follow instead.
       `display: none` kills both cases, is resize-safe, and drops the labels from the
       accessibility tree too — the name and link they duplicate are already in the meta
       below, so nothing is lost. The old per-side padding here went with them. */
    .al-card__labels {
      display: none;
    }

    /* ---- Compact meta (reference-card rhythm) ---------------------------------
       Name + price step down from 16px to the 13px small/meta tier and share ONE size,
       so the pair reads as a tight unit rather than a heading with a caption. Measured
       against 16px and 14px on a 390 viewport before settling here (see session notes). */
    .al-card__meta {
      --al-card-meta-size: var(--al-fs-small);

      gap: 0.2rem;
      padding-block: var(--al-space-xs) var(--al-space-xs);
    }

    /* No hover on touch, so a truncated name would be unrecoverable — wrap to 2 lines
       and clamp there. This overrides the desktop single-line ellipsis. */
    .al-card__name {
      white-space: normal;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      text-overflow: clip;
    }

    /* Sizes and swatches are PDP content on mobile — the card carries name, price and
       quick-add only. `display: none` (not opacity) so neither reaches assistive tech. */
    .al-card__swap,
    .al-card__colors {
      display: none;
    }

    .al-card__meta-row {
      /* The wider SALE price (struck + now) cannot share a 2-up row with a 2-line name;
         let it drop to its own line rather than force a mid-word break. */
      flex-wrap: wrap;
      row-gap: 0.15rem;
    }

    /* Constrained-badge exception (see .al-card__tag note): tighten tracking on the
       narrow 2-up card only. Applies to the short "NEW" chip that stays here; the long
       "BESTSELLER" chip is hidden below (kept for the tracking record — NEW unchanged). */
    .al-card__tag {
      letter-spacing: 0.14em;
    }
    /* BESTSELLER hidden on mobile: "BESTSELLER" (10 letters) exceeds comfortable badge
       width on the narrow 2-up card even at 11px / 0.14em. NEW (3 letters) is retained —
       short enough to fit. Desktop keeps BESTSELLER exactly as-is. */
    .al-card__tag--bestseller {
      display: none;
    }
  }
/* END_SNIPPET:al-product-card */

/* START_SNIPPET:background-media (INDEX:167) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:168) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:169) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:171) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons-styles (INDEX:172) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
     where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:173) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:174) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-button-background);
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-items-component (INDEX:175) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:176) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:177) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:179) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:181) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:182) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:183) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:184) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:185) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:189) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:191) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:192) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:193) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-drawer__heading .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

  /* Alex & Lace — Phase 7 badge pulse: subtle violet scale 1 → 1.15 → 1 over ~400ms.
     Retunes Horizon's `grow` (1.2) to the spec; the violet comes from the bubble's own
     --color-primary-button-background, so there's no colour flash. */
  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: al-cart-pulse 400ms var(--al-ease);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  @keyframes al-cart-pulse {
    0% {
      transform: scale(1);
    }
    45% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Reduced motion: skip the pulse + number motion — the count still updates. */
  @media (prefers-reduced-motion: reduce) {
    .cart-bubble--animating .cart-bubble__background,
    .cart-bubble--animating .cart-bubble__text {
      animation: none;
    }
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:194) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  /* ── The (☰) → (✕) mark ───────────────────────────────────────────────────
     Replaces three display:none swap rules that toggled two sibling icon spans.

     WHY aria-expanded AND NOT .menu-open — this is the whole trick, and the
     obvious hook is the wrong one. `.menu-open` is added a frame after open()
     but on close it is NOT removed when the user clicks: the root drawer closes
     via #reverseRootClose(), which only reverses the GSAP timeline, and
     `.menu-open` survives until reset() runs on onReverseComplete. Binding here
     would hold the ✕ for the entire ~0.5s slide-out and then snap back to ☰ at
     the very end. `aria-expanded` is set synchronously in BOTH directions —
     'true' in open(), 'false' as the first act of #reverseRootClose() — so it is
     the only symmetric hook, and it needs no JS change. It lives on the summary,
     which IS .header__icon--menu.

     The bars fold rather than cross-fade: top and bottom translate to the centre
     line and counter-rotate into the ✕, the middle retracts into them. Order
     matters — translateY runs FIRST (rightmost), moving the bar onto the centre,
     then rotate spins it about the viewBox centre. Reversed, that lands the bar
     back on its own third.

     THE 6px IS NOT ARBITRARY — it is the bar's distance from the centre line, so
     it is coupled to the SVG's geometry: bars sit at y=6/12/18 on the 24 grid, so
     top travels +6 and bottom −6 to meet at y=12. If the icon's spacing is ever
     retuned, this value MUST move with it or the arms will cross off-centre. It
     was 5px while the bars sat at 7/12/17 (the too-small first cut).

     transform-box: view-box so transform-origin: center resolves to the 24×24
     centre; fill-box would be wrong here for the same reason as the accordion —
     a horizontal line's fill box is zero-height, so its centre is unreliable. */
  .al-menu-icon__bar {
    transform-box: view-box;
    transform-origin: center;
  }

  .header__icon--menu[aria-expanded='true'] .al-menu-icon__bar--top {
    transform: rotate(45deg) translateY(6px);
  }

  .header__icon--menu[aria-expanded='true'] .al-menu-icon__bar--bottom {
    transform: rotate(-45deg) translateY(-6px);
  }

  .header__icon--menu[aria-expanded='true'] .al-menu-icon__bar--mid {
    transform: scaleX(0);
    opacity: 0;
  }

  /* Motion is gated: under reduce the bars sit in their ✕ / ☰ positions with no
     tween, matching how every other transform in the theme is gated (colour
     transitions are the established exception, and this is not one). Duration and
     easing are --al-dur-base / --al-ease, the same pair the accordion mark uses —
     measured, not assumed: frame-sampling this morph showed the same front-loaded
     curve reads as crisp here as it does there. It is a small multi-bar transform,
     not a large height reveal, so it does NOT need the panel's --al-ease-inout. */
  @media (prefers-reduced-motion: no-preference) {
    .al-menu-icon__bar {
      transition: transform var(--al-dur-base) var(--al-ease),
        opacity var(--al-dur-base) var(--al-ease);
    }
  }

  .menu-drawer {
    position: fixed;
    /* Alex & Lace (Phase 3): right-edge drawer — parked off the RIGHT, slides left into view. */
    transform: translateX(100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: 100vw; /* ~full on mobile */
    max-width: none;
    z-index: var(--layer-menu-drawer);
    right: 0;
    top: 0;
    padding: 0;
    /* 3b polish: FROSTED panel — tint/blur/edge come from .al-frosted on the
       element (no background-color here, or the tint can't show). Left-edge
       plum shadow strengthened (was rgba(56,41,85,0.16) hardcoded) and
       tokenized on --al-plum. */
    overflow: auto;
    /* This slide-in panel is the drawer's OWN scroll context; contain the scroll so reaching its
       top/bottom never chains to the (now scroll-locked) page behind it (2026-07-24). */
    overscroll-behavior: contain;
    display: flex;
    box-shadow: -16px 0 64px color-mix(in srgb, var(--al-plum) 28%, transparent);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      /* 3b-final: the panel is sized FROM the featured slot — 445px content
         column (the fixed 4:3 featured frame) + the panel's own inner padding
         on each side, so the image fills the column with no right-side gap.
         (Was 42vw ≈ 605px at 1440, which left ~120px dead space.) The 45vw
         cap only bites below ~1070px viewports, where the drawer — and the
         featured frame with it — shrink proportionally. */
      /* +1px: the panel's left-edge hairline is inside the border-box and
         would otherwise shave the content column to 444px. */
      width: calc(445px + 2 * var(--drawer-padding) + 1px);
      max-width: 45vw;
    }
  }

  /* Frost tuning — .menu-drawer.al-frosted outspecifies the utility's defaults
     regardless of stylesheet order. A full-height panel holding readable nav
     links wants a stronger veil than the rail's delicate 45% (arbitrary page
     content scrolls behind it), but still translucent enough to read as glass:
     85% tint + a deeper 20px blur. Hairline kept on the inner (left) edge only,
     replacing the old --style-border-drawer border-left. */
  .menu-drawer.al-frosted {
    --al-frost-opacity: 85%;
    --al-frost-blur: 20px;

    /* Re-assert the frost tint at this higher specificity: the global
       `.color-<scheme>` rule (color-schemes.liquid) paints background-color on
       ANY element carrying a scheme class — same specificity as .al-frosted,
       so cascade order could let it overpaint the frost with a solid fill. */
    background-color: color-mix(in srgb, var(--al-frost-tint) var(--al-frost-opacity), transparent);
    border-width: 0 0 0 1px;
  }

  /* Mirror the utility's no-backdrop-filter fallback at the same specificity:
     near-solid whisper so nav text never sits on bare translucency. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .menu-drawer.al-frosted {
      background-color: color-mix(in srgb, var(--al-frost-tint) 92%, transparent);
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    /* 3b polish: plum scrim veil (was backdrop-filter: brightness(0.75) — a
       neutral dim). The brand-tinted scrim is what makes the drawer pop. */
    background: var(--al-scrim-light);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    /* This is the drawer's OWN scroll context; contain the scroll so reaching its top/bottom never
       chains to the (now locked) page behind it (2026-07-24, with the body scroll-lock fix). */
    overscroll-behavior: contain;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    /* Alex & Lace (Phase 3): submenu slides in rightward, consistent with the panel. */
    right: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  /* Alex & Lace (Phase 3): both keyframes flipped to rightward motion so the dormant
     accordion/submenu path animates the same direction as the drawer. */
  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }

  /* =========================================================================
     Alex & Lace — Phase 3 drawer: editorial right-edge nav
     ========================================================================= */

  /* Drawer is the PRIMARY nav at all breakpoints: suppress the horizontal
     mega-menu + bottom navigation-bar row; always show the menu toggle. */
  #header-component .header-menu,
  #header-component .header__navigation-bar-row {
    display: none !important;
  }

  @media screen and (min-width: 750px) {
    #header-component .header__drawer {
      display: flex !important;
    }
  }

  /* Toggle sits on the header right (the side the drawer slides from). */
  #header-component .header__columns .header__drawer {
    justify-self: end;
  }

  @media screen and (max-width: 749px) {
    #header-component .header__columns .header__drawer {
      grid-area: rightB;
      justify-self: end;
    }

    #header-component .header__columns header-actions {
      grid-area: rightA;
    }
  }

  /* Let the nav fill the available height so the utility links + featured
     product settle at the bottom of the panel. */
  .menu-drawer__navigation {
    flex-grow: 1;
  }

  /* Flat primary links — Nohemi, sentence case, editorial scale, brand violet.
     (Applies to the dormant accordion/submenu parents too, for consistency.) */
  .menu-drawer__menu-item--mainlist {
    font-family: var(--al-font-display);
    font-weight: 500;
    text-transform: none;
    letter-spacing: var(--al-tracking-hero);
    color: var(--al-brand);
    font-size: clamp(1.75rem, 1rem + 2.4vw, 2.5rem);
    line-height: 1.1;
  }

  .menu-drawer__menu-item--mainlist:hover {
    color: var(--al-plum);
  }

  /* Nav link dividers (3b polish #4) — faint persistent hairlines BETWEEN
     primary links (escape.cafe style), not hover/active markers. li + li keeps
     them strictly between items (none above the first or below the last).
     Spec named --al-orchid; orchid was DROPPED in Design System §5 — --al-muted
     is the hairline token. */
  .menu-drawer__navigation > .menu-drawer__menu > li + li {
    border-block-start: 1px solid color-mix(in srgb, var(--al-muted) 35%, transparent);
  }

  /* Optional small secondary links (Search / Account / Contact). */
  .al-drawer-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--margin-sm) var(--margin-xl);
    padding-inline: var(--drawer-padding);
    margin-block: var(--margin-md) var(--margin-lg);
  }

  .al-drawer-secondary__link {
    font-family: var(--al-font-body);
    font-weight: 600;
    font-size: var(--al-fs-eyebrow);
    letter-spacing: var(--al-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--al-mauve);
    text-decoration: none;
  }

  .al-drawer-secondary__link:hover {
    color: var(--al-brand);
  }

  /* Featured product (halo slot) — bottom of the drawer. */
  .al-drawer-featured {
    display: block;
    padding: var(--drawer-padding);
    text-decoration: none;
    color: inherit;
  }

  /* Fixed frame on the CONTAINER (image-duo pattern): the slot renders at the
     same size no matter what the editor uploads — portrait, landscape or
     square all crop to fill the frame. Mobile keeps the full-drawer-width 4:5
     portrait read; desktop flips to 4:3 LANDSCAPE (3b-final), which favors
     wide source images — portrait uploads crop top/bottom on desktop. */
  .al-drawer-featured__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--menu-image-border-radius, 0px);
    background-color: var(--al-surface-mauve);
  }

  /* Desktop: the drawer runs ~600px wide, so a full-bleed portrait image
     towered ~750px tall and dominated the panel. Landscape 4:3 capped at
     445px (→ 445×334; info caps with it so the text block stays aligned to
     the frame); mobile keeps full width. */
  @media screen and (min-width: 750px) {
    .al-drawer-featured__media {
      aspect-ratio: 4 / 3;
    }

    .al-drawer-featured__media,
    .al-drawer-featured__info {
      max-width: 27.8125rem; /* 445px */
    }
  }

  .al-drawer-featured__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--al-dur-slow) var(--al-ease);
  }

  .al-drawer-featured:hover .al-drawer-featured__media img {
    transform: scale(1.04);
  }

  @media (prefers-reduced-motion: reduce) {
    .al-drawer-featured__media img {
      transition: none;
    }

    .al-drawer-featured:hover .al-drawer-featured__media img {
      transform: none;
    }
  }

  .al-drawer-featured__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-block-start: var(--margin-sm);
  }

  /* Type comes from .al-eyebrow (Phase A3); mauve rather than rose, against the
     drawer's frosted panel. Colour via the custom property. */
  .al-drawer-featured__eyebrow {
    --al-eyebrow-color: var(--al-mauve);
  }

  .al-drawer-featured__title {
    font-family: var(--al-font-display);
    font-weight: 500;
    font-size: var(--al-fs-h3);
    color: var(--al-brand);
  }

  .al-drawer-featured__price {
    font-family: var(--al-font-body);
    font-weight: 500;
    color: var(--al-ink);
  }

  /* When GSAP drives the motion (class set by header-drawer.js once GSAP is
     present and motion isn't reduced), hand it sole ownership: kill the CSS
     transition/keyframe entrances so they don't fight the timeline. */
  .al-gsap .menu-drawer,
  .al-gsap .menu-drawer__backdrop {
    transition: none !important;
  }

  .al-gsap .menu-drawer__animated-element {
    animation: none !important;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:199) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:202) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:203) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 0; /* sharp — ROADMAP §7 radius rule (was 8px, site-wide leak) */
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  /* Was `#no-results-message` — that id is per-instance now, so match on the
     class the element already carries instead. */
  .localization-form__list-item.localization-form__list-item-disabled {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:204) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:209) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:210) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:211) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:215) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:216) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:218) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:219) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:220) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:221) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:222) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:223) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:224) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:225) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:226) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:228) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:230) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:231) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:232) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:search-modal (INDEX:235) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:236) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:237) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:239) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:241) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:242) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:243) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

    &:hover {
      color: var(--color-hover);
    }

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:245) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:247) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:255) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:264) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:265) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:266) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:267) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */