/** Shopify CDN: Minification failed

Line 3613:2 Unexpected "{"
Line 3613:3 Expected identifier but found "%"
Line 3613:49 Unexpected "("
Line 3629:71 Expected identifier but found "%"
Line 8785:2 Unexpected "{"
Line 8785:3 Expected identifier but found "%"
Line 8785:25 Unexpected "2026"
Line 8787:79 Unterminated string token
Line 8793:76 Unterminated string token
Line 8805:47 Expected identifier but found "%"
... and 22 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:3) */
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:9) */
.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:10) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    /* Nether: the fallback was --color-border, which contrast-override resolves to
       the palette's lightest colour on this section. That painted a full-strength
       bone rule across the whole band, and a hard bright line on flat black is the
       loudest thing in the footer. A white alpha at the same value as the mobile
       accordion hairlines gives the band one hairline instead of two treatments.
       Stated as a literal because this section is locked to flat black in BOTH
       schemes, so a foreground-derived colour would go black on black in light mode.
       An explicit divider colour set in the editor still wins. */
    border-top: var(--border-width) solid var(--divider-color, rgb(255 255 255 / 0.12));
    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,
  .utilities button {
    color: var(--color-utilities, var(--color-foreground-muted));
  }

  .utilities > * {
    text-align: center;

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

  /* Nether: MOBILE legal strip, one zone instead of four loose lines (user
     2026-08-01, the footer should read as three deliberate zones).

     In DOM order this is copyright, socials, policies, payment icons, and stacked
     on a phone at a flat 24px that put the social icons between the two pieces of
     small print, which is what made the bottom of the band look like leftovers.
     Reordered so the icons lead the strip and the two lines of legal text finish it
     together, tight enough to read as one block.

     Done with `order` rather than by editing block_order in footer-group.json, so
     the desktop three-up row (copyright left, socials centre, policies right,
     payment icons on their own line) is untouched. The .utilities--blocks-4 rules
     below key off :nth-child, which is DOM order and ignores `order`.

     Hooks are the blocks' own root classes, not :nth-child, so adding or removing a
     block cannot silently shuffle the rest. The policy list has no class of its own;
     anchored-popover-component is its root element. */
  @media screen and (max-width: 749px) {
    .utilities {
      row-gap: var(--padding-xs);
    }

    .utilities .social-icons__wrapper {
      order: 1;
      margin-block-end: var(--padding-lg);
    }

    .utilities .payment-icons {
      order: 2;
      margin-block-end: var(--padding-lg);
    }

    .utilities anchored-popover-component {
      order: 3;
    }

    .utilities .footer-utilities__group-copyright {
      order: 4;
    }
  }

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

    /* 4 blocks: the legal row keeps its three parts, and the payment icons take a
       line of their own underneath. Squeezing a wrapping icon list into a quarter
       of the row would shrink everything else to make room for it. */
    .utilities--blocks-4 {
      grid-template-columns: 1fr auto 1fr;
    }

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

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

    .utilities--blocks-4 > *:nth-child(4) {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:11) */
/* The two promises under the wordmark. Side by side once there is room,
     stacked on a phone. Quiet by design: this is the closing note, not a
     merchandising strip, so it takes the footer's muted ink rather than full
     white and never competes with the wordmark above it. */
  .footer-promises {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Real air under the wordmark (owner 2026-08-16). At 20px these sat almost
       on the mark; the wordmark needs room before anything else starts. */
    padding-block-start: clamp(36px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    /* Centred under the wordmark, which is itself centred, so the two share an
       axis instead of the promises hanging off the left edge. */
    align-items: center;
    gap: var(--space-lg);
  }

  @media screen and (min-width: 750px) {
    .footer-promises {
      flex-direction: row;
      justify-content: center;
      gap: clamp(32px, 5vw, 64px);
      /* flex-start, not center: it is what puts the two ICONS on one line.
         Each item is a column starting with its icon, so aligning the columns
         to their tops aligns the icons — even though the left column carries an
         extra link and is therefore taller. */
      align-items: flex-start;
      /* Kept explicit even though the parent now centres too (2026-08-16). It
         was added when the wordmark was still hard right and the list was
         inheriting align-items: flex-end, which right-aligned it to the mark's
         edge and, being twice the mark’s width, hung it off to the LEFT. The
         parent centring makes this redundant rather than wrong, and stating it
         means the promises stay centred if the mark ever moves again. */
      align-self: center;
    }
  }

  /* Icon ABOVE the copy, not beside it (owner 2026-08-16: "the icons need to come
     in line, and then everything else should be center-aligned and then centred,
     not left").

     Side-by-side was the bug: each item was icon + text of a different width, so
     centring the row put the two icons at different distances from the middle and
     they never lined up. Stacked, the icon is the first row of each column, the
     list is align-items: flex-start, and the two icons land on one line by
     construction — even though the left column carries an extra link. */
  .footer-promises__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    /* A measure, so a label never runs wider than its own column and drags the
       icon off the shared axis. */
    max-inline-size: 22ch;
  }

  .footer-promises__icon {
    flex: 0 0 auto;
    inline-size: 24px;
    block-size: 24px;
    /* The footer band is locked to flat black in both schemes (nether-chrome),
       so this is white-on-black regardless of the page's colour scheme. */
    color: rgb(255 255 255 / 0.85);
  }

  .footer-promises__icon svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .footer-promises__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .footer-promises__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium, 500);
    color: rgb(255 255 255 / 0.92);
    line-height: var(--leading-tight-ui, 1.25);
  }

  .footer-promises__link {
    font-size: var(--font-size-sm);
    color: rgb(255 255 255 / 0.6);
    text-decoration: underline;
    text-underline-offset: 3px;
    /* Pad to the tap minimum without pushing the underline off the text. */
    padding-block: calc((var(--minimum-touch-target, 44px) - 1lh) / 2);
    margin-block: calc(((var(--minimum-touch-target, 44px) - 1lh) / 2) * -1);
    inline-size: fit-content;
  }

  @media (hover: hover) and (pointer: fine) {
    .footer-promises__link:hover {
      color: rgb(255 255 255 / 0.95);
    }
  }

  .footer-content {
    /* Nether: stock Horizon shipped `contain: content; content-visibility: auto`
       here as a render-skip optimization. Inside our .page-wrapper scroller the
       relevance check misfires: the footer stays "skipped" while on screen, size
       containment collapses it to its padding (~50px), the black scheme layer
       shrinks with it, and the light-on-dark links paint invisibly over the bone
       body below (user 07-25, "can't see anything"). One small grid — the
       optimization buys nothing; dropped. */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

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

  /* Nether: put the Join the list column on the same vertical grid as the three
     link columns (user 2026-08-01, "space out the email list to kind of go in line
     with everything else").

     Two separate things pushed it off the grid, which is why it never looked like a
     spacing setting anyone could fix in the editor:

     1. Its heading renders at --font-size-md while the three column headers render
        at --font-size-sm, so it starts taller and its baseline sits lower.
     2. base.css:1454 gives every <summary> a padding-block of --padding-sm. The
        column headers are summaries and get that padding; the newsletter heading is
        a text block and gets nothing, so it started ~11px higher than its neighbours
        and handed that offset down to every line beneath it.

     Matching the size and borrowing the same padding lands both headings on one
     baseline. The rest then falls into place for free: the group's gap is 12px
     (footer-group.json) and the menus' spacing is 12px, so the body copy begins on
     exactly the line the first link begins on.

     Weight and colour are deliberately not restated. chrome already sets both to the
     same values it gives the column headers, and repeating them here would be a
     second place to keep in step. */
  .footer-content.footer-grid .group-block :is(h2, h3) {
    font-size: var(--font-size-sm);
    letter-spacing: var(--tracking-normal);
    line-height: var(--leading-ui);
    padding-block: var(--padding-sm);
  }

  /* Nether: MOBILE, three zones instead of seven stacked things (user 2026-08-01).

     The running order was already right, so nothing moves. What made the band read
     as debris is that every group was separated by the same 40px gap, so the
     wordmark, the newsletter and three collapsed accordions all looked equally
     unrelated to each other.

     Zone 1 is the wordmark, which owns its air through .footer-lead above.
     Zone 2 is the newsletter, still first in the flow.
     Zone 3 is the three menus, pulled together into a single ruled list. */
  @media screen and (max-width: 749px) {
    /* Gaps are taken over by margins and rules below so each boundary can say
       something different. Column gap is untouched: this tier is one column. */
    .footer-content.footer-grid {
      row-gap: 0;
    }

    .footer-content.footer-grid > *:has(input[type='email']) {
      order: -1;
      margin-block-end: var(--padding-4xl);
    }

    /* The hairlines are literal white alphas on purpose. nether-chrome locks this
       band to flat black in BOTH light and dark, so --hairline, --line-control or
       anything else off the page foreground would inherit the light-mode ink and
       paint black on black. */
    .footer-content.footer-grid accordion-custom.menu {
      border-block-start: 1px solid rgb(255 255 255 / 0.12);
    }

    /* Closes the list. :last-of-type, not :last-child: the newsletter group is last
       in the DOM and only moves to the top visually, so :last-child is the group. */
    .footer-content.footer-grid accordion-custom.menu:last-of-type {
      border-block-end: 1px solid rgb(255 255 255 / 0.12);
    }

    /* A row you can hit, rather than a line of text with a caret beside it. The
       summary's own --padding-sm left the rows about 40px tall. */
    .footer-content.footer-grid .menu--accordion .menu__heading {
      padding-block: var(--padding-lg);
    }

    /* The caret drops to link weight. At full white it shouted as loudly as the
       label it belongs to, which is most of what made the closed rows look unfinished. */
    .footer-content.footer-grid .menu__heading__toggle {
      color: rgb(255 255 255 / 0.55);
    }

    /* menu.liquid gives .details-content a 12px margin-block-start on this tier, and
       margin is not part of the accordion's transition or its closed-state reset. So
       every CLOSED row was carrying 12px of dead space under it, which is what put
       the uneven ragged gaps between the collapsed headings. Moving that space to
       padding hands it to the accordion, which already animates padding-block and
       zeroes it while closed. */
    .footer-content.footer-grid .menu--accordion .details-content {
      margin-block-start: 0;
    }

    .footer-content.footer-grid accordion-custom.menu details[open] .details-content {
      padding-block: var(--padding-lg) var(--padding-2xl);
    }
  }

  /* Nether: the wordmark that opens the footer. Two supersessions have run through
     this comment, so here is the chain. It first read "the wordmark and the one
     quiet line", which stopped being true when the trust line was removed on
     2026-08-01. It was then corrected to "there is nothing under the mark now and
     that is the point", which stopped being true on 2026-08-16 when the two
     promises were folded in from the homepage values band. There IS something
     under the mark again, and it owns its own air via .footer-promises above.

     What survives both reversals is the padding rule: the wordmark needs room
     around it, not a caption under it. It is the first thing in the band and the
     only piece of brand in a strip of links, so it gets real air on both sides of
     itself rather than the single gap it had.

     This padding was written against --space-2xl / --space-3xl, and neither one
     exists: the theme's space scale stops at --space-xl (typography-tokens.liquid).
     A var() with no fallback and no definition makes the WHOLE declaration invalid
     at computed-value time, and padding is not inherited, so both lines computed to
     zero and the wordmark had been sitting flush against the top of the black band
     the entire time. That is the padding the owner was told had landed and could not
     see. Rebuilt on --padding-*, which is real (theme-styles-variables.liquid:423). */
  .footer-lead {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-5xl) var(--padding-4xl);
  }

  .footer-lead__mark {
    display: block;
    width: auto;
    height: var(--footer-mark-height);
    object-fit: contain;
    /* SHRINK TO THE ARTWORK, DO NOT STRETCH TO THE COLUMN.

       .footer-lead is a flex column, so its default align-items: stretch was
       pulling the <img> box out to the full width of the footer — 398px on a
       430px phone — while width:auto/height:22px only ever intended the mark's
       own 141px. object-fit: contain then did exactly what it is for and
       letterboxed the artwork in the middle of that box, so the wordmark sat
       CENTRED on mobile above three left-aligned link columns, with invisible
       dead space either side of it.

       Desktop never showed it: the min-width rule below sets align-items:
       flex-end on the parent, and any align-items other than stretch lets the
       image take its intrinsic width. This is the same defect at the other
       breakpoint, so it is fixed on the child where both cases meet. */
    align-self: flex-start;
  }

  /* Mobile centres the mark (owner 2026-08-03). Worth being precise about what
     changed: the mark USED to appear centred here, but only because the <img>
     box was stretched to the full column and object-fit letterboxed the artwork
     inside it, so the thing was 398px wide with dead space either side and could
     not be clicked or aligned against anything. This centres the BOX instead,
     which is why align-self: flex-start above still has to stay as the base. */
  @media screen and (max-width: 749px) {
    .footer-lead__mark {
      align-self: center;
    }
  }

  @media screen and (min-width: 750px) {
    .footer-lead__mark {
      height: var(--footer-mark-height-desktop);
    }

    /* Desktop CENTRES the mark (owner 2026-08-16: "the logo should be centered
       above those two tabs on desktop as well... than pushed into the far right
       awkwardly").

       This reverses the 2026-08-01 right-hand placement, which put the mark over
       the newsletter column so it read as the band signing off and balanced a row
       whose weight otherwise sat left. That was right while the mark was the only
       thing in the lead block. It stopped being right once the two promises were
       folded in underneath: the mark sat hard right while the promises were
       centred, so the lockup read as two unrelated things stacked rather than one
       sign-off. Measured at 2560 after the change: mark, promises and lead all
       centre on 1270.

       align-items survived the undefined-token bug above because only the invalid
       declaration is dropped, not the rule, so the mark was already placed but had
       no air. More above than below on purpose: the space above separates the
       footer from the page, the space below only separates it from its own columns. */
    .footer-lead {
      align-items: center;   /* centred 2026-08-16, was flex-end */
      padding-block: calc(var(--padding-5xl) * 1.5) var(--padding-5xl);
    }

    /* The mark's own alignment beats the parent's on desktop. flex-start on the
       child (set above, for the mobile stretch) would otherwise drag it back to
       the left and undo the placement this rule exists for. That placement was
       flex-end until 2026-08-16 and is centre now; the reason the child has to
       restate it is unchanged either way. */
    .footer-lead__mark {
      align-self: center;    /* centred 2026-08-16, was flex-end */
    }
  }

  /* Nether: a `@media (min-width: 990px)` block used to sit here lifting
     `.footer-content .menu__heading__default` and `.footer-content .menu a`.
     It never applied once: nether-chrome.liquid is an inline style block rendered
     at layout/theme.liquid:51, after the stylesheets render at :41, and its footer
     rules match at the same specificity, so the later sheet won every time. The
     intended sizes live in nether-chrome, at the layer that wins. */

  @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:12) */
.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:13) */
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__list-item > .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 transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(:has(header-menu[aria-expanded='true']))
      .header__row {
      --color-foreground: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(
        :has(header-menu[aria-expanded='true'])
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* 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:hover),
    &:has(header-menu[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-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='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-background='bottom']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='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-menu-drawer);
  }

  /* 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-menu-drawer);
  }

  .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-background-top-row) 0 var(--top-row-height),
      var(--color-background-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-background-top-row) 0 var(--top-row-height),
      var(--color-background-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, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-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 background color, 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 section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__submenu:not([inert])) {
      /* 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(--border-bottom-color, 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);
      border-bottom-color: var(--border-bottom-color-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);
    border-bottom-color: var(--border-bottom-color-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;
  }

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

  /* Transparent header layout. Keep this in sync with snippets/section.liquid's first-section height compensation. */
  body:has(#header-component[transparent]) .content-for-layout > .shopify-section:first-child {
    margin-top: calc(var(--header-group-height) * -1);
  }

  body:has(#header-component[transparent]) #header-group > .header-section {
    z-index: var(--layer-menu-drawer);
  }

  /* All other header group content should be beneath the floating header,
  but above the rest of the page content */
  body:has(#header-component[transparent]) #header-group > *:not(.header-section) {
    z-index: calc(var(--layer-menu-drawer) - 1);
  }

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

  /* 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;
    border-radius: 0;
  }

  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-foreground-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(.language-selector--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:14) */
.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:15) */
.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:16) */
.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:18) */
.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:19) */
/**
   * 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);
    background-color: var(--color-background);
  }

  /**
   * 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:20) */
.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;
  }

  /* THE CART IS A PAGE, SO ITS TITLE IS A PAGE TITLE (2026-09-12).

     Measured at 390px before this: "Your cart is empty" rendered at 20px/500,
     because the markup is <h1 class="h4"> — an h1 wearing the fourth-level
     preset. The collection and blog h1s on the same site render at 40px/700
     off the real h1 tokens, so the cart was three steps below every other page
     title while being the last screen before checkout.

     Scoped to .cart-title so it cannot reach the "Cart (n)" heading inside the
     drawer, which is a different thing wearing a similar class — see the note
     at snippets/cart-bubble.liquid:138 about exactly that collision.

     clamp rather than a literal, matching the PDP title's treatment, so the two
     most consequential headings on the site scale the same way. */
  .cart-title .h4,
  .cart-title h1 {
    font-size: clamp(26px, 7.4vw, 32px);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  .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:marquee (INDEX:24) */
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:25) */
.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:nether-also-consider (INDEX:26) */
.nether-ac {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-ac__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 48px);
    inline-size: 100%;
    max-inline-size: var(--page-width, 1520px);
    margin-inline: auto;
    /* Same gutter expression as the colour rail and the announcement panel. */
    padding-inline: max(var(--page-margin, 20px), 22px);
  }

  .nether-ac__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 52ch;
  }

  .nether-ac__eyebrow {
    margin: 0;
    opacity: 0.6;
  }

  .nether-ac__heading {
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-ac__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px 24px;
  }

  @media screen and (min-width: 750px) {
    .nether-ac__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* The nether-pillars treatment: a rule and space, never a box. There is no
     fill, no border on three sides and no shadow, so the card cannot go
     missing the way a 6% black fill does over a dark surface. */
  .nether-ac__card {
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  /* Reserved geometry: the ratio is declared, so the card holds its shape
     before a photograph exists and does not move when one lands. Capped in
     width because a full column 4:5 slot is roughly 900px tall at 1520. */
  .nether-ac__media {
    position: relative;
    display: block;
    inline-size: min(100%, 260px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-media, 6px);
    background-color: var(--fill-subtle);
    margin-block-end: var(--space-xs);
  }

  .nether-ac__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .nether-ac__q {
    margin: 0;
    opacity: 0.6;
  }

  .nether-ac__title {
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-ac__meta {
    margin: 0;
  }

  .nether-ac__body {
    margin: 0;
    opacity: 0.75;
    max-width: 42ch;
  }

  .nether-ac__cta {
    margin: 0;
  }

  /* The theme's one arrow move, matching nether-bento: 4px on the in-place
     role, transition on the base selector so the release animates too. */
  .nether-ac__arrow {
    display: inline-block;
    transition: transform var(--motion-quick) var(--ease-ui);
  }

  @media (hover: hover) {
    .nether-ac__card:hover .nether-ac__arrow {
      transform: translateX(4px);
    }
  }
/* END_SECTION:nether-also-consider */

/* START_SECTION:nether-announcement (INDEX:27) */
/* The section WRAPPER is what competes with the header (z-index 18). A
     z-index on .nether-ann alone is trapped inside this wrapper's stacking
     context, so the panel painted under the logo. Lift the wrapper instead —
     Patagonia's panel fades in over the header, covering it. */
  .shopify-section.nether-announcement-section {
    position: relative;
  }

  /* base.css pins every header-group child below the header when the header is
     transparent:
       body:has(.header[transparent]) #header-group > :not(.header-section)
     That ID-level selector outranks anything class-based, so the open panel
     painted underneath the logo. Lift it ONLY while the panel is open, leaving
     the normal transparent-header layering exactly as Horizon intends. */
  .shopify-section.nether-announcement-section:has(.nether-ann__panel.is-open) {
    /* stylelint-disable-next-line declaration-no-important */
    z-index: 25 !important;
  }

  .nether-ann {
    display: block;
    position: relative;
    background: var(--nann-bg, #0b0b0b);
    color: var(--nann-fg, #ffffff);
  }

  .nether-ann--divider {
    border-block-end: 1px solid rgb(255 255 255 / 0.12);
  }

  .nether-ann__bar {
    /* Above the scrim so the bar itself never dims — only the page behind. */
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nann-bg, #0b0b0b);
    min-height: var(--nann-height, 40px);
    padding-inline: clamp(44px, 9vw, 84px);
  }

  .nether-ann__scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgb(0 0 0 / var(--nann-scrim, 0.45));
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--motion-base) var(--ease-out-cubic, var(--ease-ui)),
      visibility var(--motion-base);
  }

  .nether-ann__scrim.is-open {
    opacity: 1;
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .nether-ann__scrim {
      transition: none;
    }
  }

  .nether-ann__toggle {
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 8px 4px;
    color: inherit;
    font: inherit;
    display: inline-flex;
    /* Fills the bar's full height rather than shrink-wrapping its 34px of type,
       which left a ~3px dead strip above and below the only control most people
       will aim at. Free: the toggle paints nothing and its own align-items keeps
       the ticker and chevron centred, so nothing moves. 40px is the ceiling here
       — the bar's height is a merchant setting, and growing the bar to reach
       --minimum-touch-target would be inflating the mark. */
    align-self: stretch;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Lets the ticker inside it truncate rather than overflow the bar. */
    min-inline-size: 0;
  }

  .nether-ann__toggle--static {
    cursor: default;
  }

  /* Every message is stacked in ONE grid cell and every message stays in flow,
     all the time. The ticker is therefore always as wide as the LONGEST message
     and its width never changes across a rotation. Only opacity moves.

     Taking the inactive messages out of flow was the bug: for the whole
     crossfade window NO title was in flow, the ticker collapsed to zero width,
     the 13px chevron snapped to the centre of the bar and the outgoing message
     jumped left by half its width. The first motion anyone sees on the site read
     as a rendering fault.

     No JS measurement, on purpose. Pinning an explicit measured width is the
     other way this has been got wrong here: it read a stale, too-narrow value
     and put the chevron on top of the text ("30-day guarantee", 07-26). */
  .nether-ann__ticker {
    display: grid;
    align-items: center;
    justify-items: center;
    /* The stack is now as wide as the LONGEST message rather than the current
       one, so on a narrow phone an over-long message has to truncate instead of
       pushing the bar wider than the screen for the whole rotation. Both this
       and the min-width on the toggle are needed: a flex item's automatic
       minimum size is its content width, so without them nothing can shrink. */
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .nether-ann__title {
    grid-area: 1 / 1;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: var(--tracking-normal);
    opacity: 0;
    /* visibility keeps the hidden messages out of the accessibility tree and
       untappable while STILL reserving their layout, which is what holds the
       width steady. Declared on the base selector so both directions animate. */
    visibility: hidden;
    transition:
      opacity var(--nann-fade, var(--motion-quick)) var(--ease-ui),
      visibility var(--nann-fade, var(--motion-quick)) var(--ease-ui);
  }

  .nether-ann__title.is-active {
    opacity: 1;
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    .nether-ann__title {
      transition: none;
    }
  }

  .nether-ann__chev {
    display: inline-flex;
    width: 13px;
    height: 13px;
    transition: transform var(--motion-base) var(--ease-out-cubic, var(--ease-ui));
  }

  .nether-ann__chev svg {
    width: 100%;
    height: 100%;
  }

  .nether-ann__toggle[aria-expanded="true"] .nether-ann__chev {
    transform: rotate(180deg);
  }

  /* 14px of glyph, 44px of target. The box paints nothing, so it can simply grow
     to the token; the end offset then gives back half the growth (28 -> 44) and
     the X stays on the exact pixel it was on.

     The overhang is harmless in both axes, measured at 430px: the box is 44x44
     and the glyph centre sits 24.74px from the bar's end edge, where it sat
     before. Vertically 44px in a 40px bar reaches 2px past it — off the top of
     the viewport above, under the header (z-index 18) below — so the usable
     height is the bar's own 40px and neither neighbour loses a tap. Horizontally
     it can cross the bar's inline padding edge by up to ~4px around 490px wide,
     where the padding is still on its 44px clamp floor; that strip is the
     toggle's own end padding, never its text, and the ticker is centred and
     content-sized, so at 430px the two do not touch at all. */
  .nether-ann__dismiss {
    position: absolute;
    inset-inline-end: calc(clamp(8px, 2.5vw, 20px) - (var(--minimum-touch-target, 44px) - 28px) / 2);
    inset-block: 0;
    margin-block: auto;
    width: var(--minimum-touch-target, 44px);
    height: var(--minimum-touch-target, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--motion-quick) var(--ease-ui);
    -webkit-tap-highlight-color: transparent;
  }

  /* pointer: fine as well as hover: hover. A hybrid laptop reports hover: hover,
     but a tap there leaves :hover latched on, so the X would sit at full opacity
     for the rest of the visit as if it were still under the cursor. */
  @media (hover: hover) and (pointer: fine) {
    .nether-ann__dismiss:hover {
      opacity: 1;
    }
  }

  .nether-ann__dismiss svg {
    width: 14px;
    height: 14px;
  }

  /* Expandable panel — OVERLAYS the page instead of growing the bar. Expanding
     in flow pushed the whole header down into the hero on mobile, which read as
     the page scrolling itself (user 07-26). Patagonia fades its panel in over
     the header; nothing moves. */
  .nether-ann__panel {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--nann-bg, #0b0b0b);
    color: var(--nann-fg, #ffffff);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--motion-base) var(--ease-out-cubic, var(--ease-ui)),
      transform var(--motion-base) var(--ease-out-cubic, var(--ease-ui)),
      visibility var(--motion-base);
  }

  .nether-ann__panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .nether-ann__panel {
      transition: none;
      transform: none;
    }
  }

  .nether-ann__panel-inner {
    min-height: 0;
    max-height: min(78dvh, 660px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Roomy by design: the panel reads like a drawer, not a dropdown. */
  .nether-ann__panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(34px, 7vw, 52px);
    max-width: var(--page-width, 1400px);
    margin-inline: auto;
    padding: clamp(28px, 6vw, 44px) max(var(--page-margin, 20px), 22px) clamp(36px, 9vw, 56px);
  }

  @media screen and (min-width: 750px) {
    .nether-ann__panel-grid {
      grid-template-columns: repeat(var(--nann-cols, 3), minmax(0, 1fr));
    }
  }

  .nether-ann__col-head {
    margin: 0 0 10px;
    font-weight: var(--font-weight-semibold, 500);
  }

  .nether-ann__col-body {
    margin: 0 0 16px;
    opacity: 0.64;
    max-width: 46ch;
    line-height: var(--leading-relaxed, 1.5);
  }

  .nether-ann__col-link {
    display: inline-block;
    font-weight: var(--font-weight-semibold, 500);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
/* END_SECTION:nether-announcement */

/* START_SECTION:nether-beat (INDEX:28) */
.nether-beat {
    position: relative;
    display: flex;
    block-size: var(--beat-h, 78svh);
    /* 100% of the section wrapper, NOT 100vw. Measured on this theme: body is
       1430px inside a 1440px viewport because .page-wrapper reserves a scrollbar
       gutter, so calc(50% - 50vw) pulled every beat 10px left of the viewport and
       10px short of the right edge — and on any desktop with a visible scrollbar
       100vw also overflows the page horizontally.

       The shopify-section wrapper here is already full width and unpadded, so
       100% IS the bleed and it cannot disagree with the scrollbar. */
    inline-size: 100%;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
  }

  .nether-beat--bottom { align-items: flex-end; }
  .nether-beat--center { align-items: center; }

  .nether-beat__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #23262b;
  }

  .nether-beat__asset {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  /* THE SCRIM. This rule did not exist until 2026-08-28. The section set
     --beat-scrim on every beat and the desktop block below switched a
     ::after off again, but nothing ever switched one ON, so five beats
     rendered white type straight onto daylight photographs. The owner
     reported it as "it's hard to see the text", which is exactly what a
     scrim of zero looks like.

     A GRADIENT, not a flat wash. Every beat here aligns its copy to the
     bottom, so darkening the whole frame would dim the subject of the
     photograph — a sewing machine, a lake — to protect two lines sitting
     under it. The gradient spends the darkness where the words are and
     leaves the top of the image alone. It also means the stored percentage
     now reads as "how dark it gets behind the text", which is what a
     merchant moving that slider expects to be adjusting. */
  .nether-beat__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgb(0 0 0 / var(--beat-scrim, 0)) 0%,
      rgb(0 0 0 / calc(var(--beat-scrim, 0) * 0.55)) 24%,
      rgb(0 0 0 / 0) 58%
    );
  }

  /* Centred copy has no bottom edge to hide under, so it gets an even wash
     held slightly below the stored value to compensate for covering the
     whole frame. */
  .nether-beat--center .nether-beat__media::after {
    background: rgb(0 0 0 / calc(var(--beat-scrim, 0) * 0.78));
  }

  .nether-beat__todo {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }

  .nether-beat__todo span {
    padding: 6px 12px;
    border: 1px solid rgb(255 255 255 / 0.32);
    border-radius: var(--radius-control, 6px);
    color: rgb(255 255 255 / 0.72);
    font-size: var(--font-size-3xs);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
  }

  .nether-beat__copy {
    position: relative;
    inline-size: 100%;
    max-inline-size: 34rem;
    padding: var(--nether-gutter) var(--nether-gutter) calc(var(--nether-gutter) + var(--space-12));
    /* Second line of defence, and the cheap one. The scrim handles the broad
       tonal range; this handles the local case the scrim cannot — a highlight
       that happens to land exactly behind a letter, like the white sewing
       machine under the eyebrow on beat_archive_1. Inherited by all three
       copy elements, so it is declared once. Cancelled on desktop, where the
       text is dark ink on the cream page and a shadow would only muddy it. */
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.28);
  }

  .nether-beat--center .nether-beat__copy {
    margin-inline: auto;
    text-align: center;
  }

  .nether-beat__eyebrow {
    margin: 0 0 var(--space-12);
    font-size: var(--font-size-3xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.7);
  }

  .nether-beat__heading {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: #ffffff;
    text-wrap: balance;
  }

  .nether-beat__subtext {
    margin: var(--space-12) 0 0;
    font-size: var(--font-size-base);
    line-height: var(--leading-ui);
    color: rgb(255 255 255 / 0.82);
  }

  /* SPACING. Measured on a 375px viewport 2026-08-28: every beat/text
     boundary on the story page was a 0px gap — the bottom edge of a
     full-bleed photograph and the first line of a paragraph shared a
     y-coordinate. Both the beats and the timeline text sections declare no
     block padding at all, so neither side was supplying any.

     The space belongs to the beat, because the beat is the thing that bleeds
     to the edges. The text sections are ordinary page content and already
     read correctly against each other.

     Desktop is untouched: it already sets padding-block below. */
  @media screen and (max-width: 749px) {
    .nether-beat {
      margin-block: var(--space-40);
    }

    /* The opening beat sits directly under the header. A margin there would
       show a strip of page ground above what is meant to be a full-screen
       reel panel. */
    .shopify-section:first-child .nether-beat {
      margin-block-start: 0;
    }

    /* MEDIA RUNS CONTINUOUS, TEXT GETS PAGE SPACING (owner 2026-08-28:
       "all the text needs to feel like real page text, but the media just
       needs to feel kind of like a media page").

       The 40px above exists to stop a photograph colliding with a paragraph.
       Between two full-bleed media panels it does the opposite — it inserts a
       strip of page ground into what should read as one continuous reel, which
       is what the gap between the surf beat and the closing banner was.

       :has() rather than a modifier class, because the correct spacing is a
       property of what a beat happens to SIT NEXT TO in a given template, not
       of the beat itself. A merchant reordering sections in the editor gets
       the right answer without touching a setting. */
    .shopify-section:has(> .nether-beat, > .nether-story)
      + .shopify-section .nether-beat {
      margin-block-start: 0;
    }

    /* NOT :has(+ .shopify-section:has(...)). A :has() cannot contain another
       :has() — the browser rejects the whole rule as a syntax error while the
       CSS minifier passes it through happily, so it ships looking correct and
       does nothing. Written instead as one relative selector list, which says
       the same thing legally: has a next-sibling section whose child is a
       beat or a story. */
    .shopify-section:has(> .nether-beat):has(
        + .shopify-section > .nether-beat,
        + .shopify-section > .nether-story
      ) .nether-beat {
      margin-block-end: 0;
    }
  }

  /* An autoplaying background video is decoration. Anyone who has asked for
     less motion gets the poster frame instead. */
  @media (prefers-reduced-motion: reduce) {
    .nether-beat__asset video,
    video.nether-beat__asset {
      display: none;
    }
  }
  /* Placed at the END of the sheet on purpose: media queries add no
     specificity, so an override that precedes its base rules loses to them.
     The first version of this block sat above the base copy rules and the
     desktop headings stayed white on the cream page — the exact ordering
     mistake this build keeps finding in older sections. */
  /* ==================================================================
     DESKTOP: THIS IS NOT A REEL (owner 2026-08-26: "it can also just be
     normal on desktop. This reel view would be mobile only").

     A full-bleed 100svh media panel is a phone idiom. On a wide screen the
     same frame is a 2:1 letterbox, and both archival photos are 2400x3200
     portraits — cover would show about 37% of the image height.

     The obvious fix would be two sections swapped with display:none. This
     theme already learned that one: display:none does not stop a fetch, which
     is why ten templates moved to <picture>/<source media>. So it stays ONE
     section, one image, one request — and only the layout changes.

     Above 750px the beat stops being a stage and becomes a figure: image at
     its own aspect ratio on the page ground, caption underneath in normal ink.
     Nothing is cropped and nothing is overlaid.
     ================================================================== */
  @media screen and (min-width: 750px) {
    /* A ROW, not a stack. Stacked, a portrait phone photo and its caption ate
       800px of a 1187px screen and left ~350px of empty ground either side of
       the picture — all the spare room was horizontal and the layout used none
       of it. Side by side, the same photo reads as a figure in an article.

       No markup change: .nether-beat already has exactly two children, so it
       becomes the flex row itself. A silent beat has one child and centring
       handles it. */
    .nether-beat {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: var(--space-32);
      block-size: auto;
      max-inline-size: 62rem;
      margin-inline: auto;
      padding: var(--space-24) var(--nether-gutter);
      background: none;
      color: inherit;
    }

    /* The box is sized BY the media, not the media by the box. The previous
       version did the opposite — inline-size: 100% on an 864px column with
       object-fit: contain — which letterboxed a 606x1080 phone video into a
       864x973 frame: 545px of video with 160px of dead ground either side, and
       every beat over 1000px tall on a 1187px screen. Measured 2026-08-28.
       A flex row plus intrinsic sizing means a portrait sits in a portrait box
       and a landscape in a landscape one, with no bars in either. */
    .nether-beat__media {
      position: relative;
      inset: auto;
      z-index: auto;
      display: flex;
      justify-content: center;
      flex: 0 1 auto;
      min-inline-size: 0;
      background: none;
    }

    /* No scrim: nothing is sitting on top of the photograph any more. */
    .nether-beat__media::after { content: none; }

    /* 56svh, not 82svh. These are phone snapshots from 2023, not hero art —
       at 82svh a picture of a sewing machine was taller than the paragraph it
       illustrates and the page read as a slideshow with captions. */
    .nether-beat__asset {
      inline-size: auto;
      block-size: auto;
      /* Capped on BOTH axes. Height alone let the landscape sewing photo take
         652px of a 992px row and squeeze its caption to 228px, so the beat
         with the most words had the least room for them.

         72svh, not 52svh. Measured at 1440x900: a 52svh cap on 9:16 phone
         footage produced a 263px-wide video — 18% of the viewport, and
         NARROWER than the 416px archive thumbnails in the strip below it.
         The supporting images were outranking the hero ones. Height is the
         binding constraint on portrait media, so raising it is what makes
         these read as moments again. */
      max-inline-size: min(100%, 34rem);
      max-block-size: 72svh;
      object-fit: contain;
    }

    /* A beat with no caption is not half a layout — it is a photograph. With
       nothing sharing the row it can take the space the copy would have used,
       instead of sitting at 288px in a 1440px row with 1152px of empty page
       beside it, which is what the silent closing beat was doing. */
    .nether-beat:not(:has(.nether-beat__copy)) .nether-beat__asset {
      max-inline-size: min(100%, 42rem);
      max-block-size: 82svh;
    }

    .nether-beat__todo {
      position: relative;
      inline-size: 100%;
      max-inline-size: 40rem;
      aspect-ratio: 16 / 9;
      background-color: #23262b;
    }

    .nether-beat__copy {
      flex: 1 1 18rem;
      max-inline-size: 28rem;
      margin-inline: 0;
      padding: 0;
      text-align: start;
      text-shadow: none;
    }

    /* NOT the scheme tokens. The section carries color-scheme-5 for the mobile
       stage, and inside that class --color-foreground stays white — which on the
       desktop layout means white text on the cream page ground. The desktop
       figure sits on the PAGE, so its ink follows the page theme, stated
       directly the way nether-theme-bridge states it. */
    .nether-beat__eyebrow { color: rgb(0 0 0 / 0.55); }
    .nether-beat__heading { color: rgb(0 0 0 / 0.87); }
    .nether-beat__subtext { color: rgb(0 0 0 / 0.72); }
  }

  @media screen and (min-width: 750px) {
    html[data-theme='dark'] .nether-beat__eyebrow { color: rgb(255 255 255 / 0.55); }
    html[data-theme='dark'] .nether-beat__heading { color: #ffffff; }
    html[data-theme='dark'] .nether-beat__subtext { color: rgb(255 255 255 / 0.72); }
  }
/* END_SECTION:nether-beat */

/* START_SECTION:nether-design-details (INDEX:29) */
.nether-dd {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-dd__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 52px);
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  .nether-dd__head {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .nether-dd__eyebrow {
    margin: 0;
    opacity: 0.6;
  }

  .nether-dd__heading {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro-caps);
    color: var(--color-foreground);
  }

  /* ---- Hotspot stage ---- */
  /* Studio-paper stage, built from the scheme instead of hardcoded charcoal
     (owner 2026-08-10: "I don't know if I really like the black gradient look
     anymore. It doesn't really suit the rest of it"). On the light scheme this
     is the same soft grey seamless the product photography was actually shot
     on; on a dark scheme it is a subtle lift off near-black. Either way the
     section now obeys its colour scheme rather than overruling it. */
  .nether-dd__stage {
    position: relative;
    aspect-ratio: var(--dd-stage-ratio, 16 / 10);
    overflow: hidden;
    border-radius: var(--dd-radius, 12px);
    isolation: isolate;
    background-color: var(--color-background);
    background-image:
      radial-gradient(72% 58% at 50% 40%, rgb(var(--color-foreground-rgb) / 0.04) 0%, transparent 62%),
      linear-gradient(170deg, rgb(var(--color-foreground-rgb) / 0.03) 0%, rgb(var(--color-foreground-rgb) / 0.09) 100%);
  }

  .nether-dd__stage-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Blend mode ON (default): the photo's LIGHT studio background sinks into the
     stage (multiply keeps the darker pixel), so the garment sits on the paper
     and the photo's rectangle edge disappears. Was `lighten`, which did the
     same trick for the old near-black renders; the real photography is shot on
     light grey seamless, and multiply is that trick for light. The radial mask
     still feathers the outer edge. Turn the toggle OFF for cutout PNGs — or if
     this section ever goes back on a dark scheme, where multiply would sink
     the whole photo. */
  .nether-dd[data-dd-blend="true"] .nether-dd__stage-img {
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(115% 100% at 50% 48%, #000 60%, transparent 100%);
    mask-image: radial-gradient(115% 100% at 50% 48%, #000 60%, transparent 100%);
  }

  /* Dark mode is the case the comment above predicted. multiply keeps the
     DARKER pixel, so against a near-black stage it keeps the stage everywhere
     and the photograph sinks into it: the owner saw the whole section wearing a
     dark overlay (2026-08-12).
     There is no blend mode that hides a light-grey studio backdrop inside a
     dark stage, because the trick depends on the stage being the lighter of the
     two. So the blend simply comes off here and the photo is a photo. The
     radial mask stays, which is what actually feathers the rectangle edge, so
     the frame still dissolves rather than ending on a hard line. */
  html[data-theme='dark'] .nether-dd[data-dd-blend="true"] .nether-dd__stage-img {
    mix-blend-mode: normal;
  }

  @media (prefers-reduced-motion: no-preference) {
    .nether-dd__stage-img { transition: opacity var(--motion-base) var(--ease-ui); }
  }

  .nether-dd__hotspot {
    position: absolute;
    left: var(--hx, 50%);
    top: var(--hy, 50%);
    transform: translate(-50%, -50%);
    inline-size: 34px;
    block-size: 34px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
  }

  /* 34px visible, 44px to a thumb. The dot has to stay 34px — any bigger and it
     covers the detail it is pointing at — so the hit area is a transparent pad
     instead. z-index 0 keeps it under the dot and the pulse ring; it is empty,
     so nothing about the stage changes visually. */
  .nether-dd__hotspot::before {
    content: '';
    position: absolute;
    inset: calc((34px - var(--minimum-touch-target, 44px)) / 2);
    z-index: 0;
  }

  .nether-dd__hotspot-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    /* Frosted glass in the scheme's own ink: background-tinted fill, foreground
       ring and digit. Was white-on-black glass, which only made sense on the
       retired charcoal stage. */
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.4);
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 500);
    line-height: var(--leading-none);
    transition: transform var(--motion-quick) var(--ease-ui),
      background var(--motion-quick) var(--ease-ui);
  }

  .nether-dd__hotspot-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.45);
    animation: nether-dd-pulse 2.4s var(--ease-ui) infinite;
  }

  @keyframes nether-dd-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    70% { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
  }

  .nether-dd__hotspot:hover .nether-dd__hotspot-dot,
  .nether-dd__hotspot.is-active .nether-dd__hotspot-dot {
    transform: scale(1.12);
    /* Inverted token pair. The 2026-08-03 white-on-white bug happened because
       the fill flipped and the digit colour did not; the guard is that fill and
       digit ALWAYS move together. They were a hardcoded pair while the base dot
       was hardcoded white glass; now the base is tokenised, so the pair is the
       same two tokens swapped, which inverts correctly on every scheme. */
    background: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
  }

  @media (prefers-reduced-motion: reduce) {
    .nether-dd__hotspot-pulse { animation: none; }
  }

  /* ---- Feature rail ---- */
  .nether-dd__rail-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .nether-dd__rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    /* Held in a variable so the desktop track width below can subtract the real
       gaps instead of guessing at them. */
    --dd-rail-gap: clamp(12px, 1.6vw, 20px);
    gap: var(--dd-rail-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .nether-dd__rail::-webkit-scrollbar { display: none; }

  /* Exactly three across on desktop, at any width (owner 2026-08-12: "this
     section should just be three slides on desktop, and this should just auto
     adapt always").

     It was a flat 31%, which ignores the gaps: three cards came to 93% of the
     rail and the remaining 7% showed a sliver of a fourth. A sliver reads as a
     rendering mistake at this size, where on mobile the same peek is deliberate
     and tells you the row scrolls.

     Subtracting the two real gaps makes the three cards fill the rail exactly,
     and because it is all relative it holds at every desktop width without
     another breakpoint. */
  @media screen and (min-width: 750px) {
    .nether-dd__rail {
      grid-auto-columns: calc((100% - (2 * var(--dd-rail-gap))) / 3);
    }
  }

  .nether-dd__card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .nether-dd__card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--dd-radius, 12px);
  }

  .nether-dd__card--empty .nether-dd__card-media {
    /* Same studio paper as the stage, so an image-less card reads as an empty
       frame in the set rather than a black hole in a light section. */
    background-color: var(--color-background);
    background-image:
      radial-gradient(120% 100% at 20% 0%, rgb(var(--color-foreground-rgb) / 0.03) 0%, transparent 55%),
      linear-gradient(160deg, rgb(var(--color-foreground-rgb) / 0.04) 0%, rgb(var(--color-foreground-rgb) / 0.09) 100%);
  }

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

  .nether-dd__card-index {
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    margin: 0;
    opacity: 0.7;
  }

  .nether-dd__card-heading {
    margin: 0;
    color: var(--color-foreground);
  }

  .nether-dd__card-body {
    margin: 0;
    color: var(--color-foreground);
    opacity: 0.72;
    max-width: 36ch;
  }

  /* ---- Progress track ---- */
  .nether-dd__track {
    position: relative;
    block-size: 2px;
    background: rgb(var(--color-foreground-rgb) / 0.16);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  .nether-dd__thumb {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 30%;
    background: var(--color-foreground);
    border-radius: var(--radius-pill);
    transform: translateX(0);
    will-change: transform, inline-size;
  }
/* END_SECTION:nether-design-details */

/* START_SECTION:nether-editorial (INDEX:30) */
.nether-editorial {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-editorial__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
  }

  .nether-editorial__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 46ch;
    align-self: center;
  }

  .nether-editorial__eyebrow {
    margin: 0;
    opacity: 0.6;
  }

  .nether-editorial__heading {
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
    text-wrap: balance;
  }

  .nether-editorial__body {
    margin: 0;
    opacity: 0.82;
  }

  .nether-editorial__body p {
    margin: 0;
  }

  .nether-editorial__button {
    align-self: flex-start;
    margin-top: var(--space-xs);
  }

  .nether-editorial__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--style-border-radius-control, 0);
  }

  .nether-editorial__media--primary {
    aspect-ratio: 3 / 4;
  }

  .nether-editorial__media--secondary {
    aspect-ratio: 4 / 3;
  }

  @media screen and (min-width: 750px) {
    .nether-editorial__grid {
      grid-template-columns: 1fr 1fr;
      gap: clamp(32px, 5vw, 72px);
      column-gap: clamp(32px, 5vw, 72px);
    }

    /* image-right: text top-left, tall image right, small image bottom-left */
    .nether-editorial--image-right .nether-editorial__text {
      grid-column: 1;
      grid-row: 1;
    }
    .nether-editorial--image-right .nether-editorial__media--primary {
      grid-column: 2;
      grid-row: 1 / span 2;
      aspect-ratio: 3 / 4.4;
    }
    .nether-editorial--image-right .nether-editorial__media--secondary {
      grid-column: 1;
      grid-row: 2;
    }

    /* image-left: mirror */
    .nether-editorial--image-left .nether-editorial__text {
      grid-column: 2;
      grid-row: 1;
    }
    .nether-editorial--image-left .nether-editorial__media--primary {
      grid-column: 1;
      grid-row: 1 / span 2;
      aspect-ratio: 3 / 4.4;
    }
    .nether-editorial--image-left .nether-editorial__media--secondary {
      grid-column: 2;
      grid-row: 2;
    }

    .nether-editorial__text {
      align-self: start;
    }
  }
/* END_SECTION:nether-editorial */

/* START_SECTION:nether-faq (INDEX:31) */
.nether-faq {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-faq__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 6vw, 72px);
    /* .page-width is a no-op in Horizon 4.x (it only sets vars), so this
       section pads itself with the same --page-margin variable. */
    max-inline-size: calc(760px + var(--page-margin, 16px) * 2);
    margin-inline: auto;
    padding-inline: var(--page-margin, 16px);
  }

  .nether-faq__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
    padding-block-start: var(--space-xl);
  }

  .nether-faq__heading {
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-faq__subheading {
    margin: 0;
    opacity: 0.72;
    max-inline-size: 44ch;
    margin-inline: auto;
  }

  /* Category chips. Same hairline as the rows and the same subdued caps as the
     category labels, so the row reads as navigation and not as a new device.
     Mobile keeps them on one scrolling line, bled to the page edges so a
     cut-off chip says there are more; from 750px there is room to wrap. */
  .nether-faq__chips {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    margin-inline: calc(var(--page-margin, 16px) * -1);
    padding-inline: var(--page-margin, 16px);
  }

  .nether-faq__chips::-webkit-scrollbar {
    display: none;
  }

  .nether-faq__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--minimum-touch-target);
    padding-inline: var(--space-md);
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    border-radius: var(--radius-control);
    /* No opacity on the text. .type-ui-caps already pins colour to
       --ink-secondary (#707072), and dimming that another 28% measured about
       2.5:1 on the light background, under the 4.5:1 that 12px text needs.
       The chip reads quiet enough on ink alone; the hairline does the rest, and
       hover moves the BORDER rather than the legibility of the label. */
    color: var(--ink-secondary);
    transition: color var(--motion-quick) var(--ease-ui), border-color var(--motion-quick) var(--ease-ui);
  }

  .nether-faq__chip:hover {
    color: var(--ink-primary);
    border-color: rgb(var(--color-foreground-rgb) / 0.28);
  }

  .nether-faq__group {
    display: flex;
    flex-direction: column;
    /* A chip jumps here, so the landing has to clear the sticky header. */
    scroll-margin-block-start: calc(var(--header-height) + var(--space-xl));
  }

  {%- comment -%} A GROUP HEADING, not a whisper (2026-09-12).

     Measured on the draft: 12px, weight 500, at opacity 0.5 — so roughly a
     fifth of the visual weight of the questions it groups, which render at
     16px/700. The thing naming six sections of the page was the quietest text
     on it, which is the same inversion the home page had (see the
     --type-heading-lg note in typography-tokens).

     18px/700 sentence case, full opacity. Deliberately NOT uppercase: the
     questions under it already are, so case is what separates the two levels
     here — group is larger and sentence case, items are smaller and caps.
     Making both uppercase would collapse the distinction again.

     opacity goes to 1 rather than being deleted, because the desktop sticky
     rule below moved its fade into the COLOUR for a stated reason (rows pass
     behind the label, so it has to paint solid). Leaving 0.5 here would have
     kept dimming it on mobile where nothing passes behind it at all. {%- endcomment -%}
  .nether-faq__category {
    margin: 0 0 var(--space-sm);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    opacity: 1;
  }

  @media (min-width: 750px) {
    .nether-faq__chips {
      flex-wrap: wrap;
      justify-content: center;
      overflow-x: visible;
      margin-inline: 0;
      padding-inline: 0;
    }

    /* The category you are inside stays named while its rows scroll past.
       header.js republishes --header-height against the measured header, so
       this tracks a header that changes size on scroll. */
    .nether-faq__category {
      position: sticky;
      top: calc(var(--header-height) + 12px);
      z-index: 1;
      /* Rows now pass behind the label, so it has to paint solid. opacity
         would take the paint down with the text, so the fade moved into the
         colour and the margin became padding to keep the strip unbroken.

         The fade used to be 50% toward the background, which measured 1.95:1
         in light and 2.80:1 in dark. That is not a quiet label, it is an
         unreadable one, and it failed WCAG AA by a wide margin. The intent
         was to sit the label back from the questions it groups, so the fade
         stays, just far less of it: --ink-secondary is already the site's
         "quieter than body" ink, so it does the job on its own. */
      opacity: 1;
      color: var(--ink-secondary);
      background-color: var(--color-background);
      margin-block-end: 0;
      padding-block-end: var(--space-sm);
    }
  }

  /* BN3TH mobile polish (user 07-24 "just looks a lot cleaner"): lighter
     hairlines — --color-border is the heavy 81%-alpha near-black and read as
     bars, not dividers. */
  .nether-faq__row {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  .nether-faq__row:last-child {
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  /* MUST stay list-item: Safari <=15 makes a summary with any other display
     non-interactive, so the rows would never open (zero-JS section, no
     fallback). The row layout lives on .nether-faq__q-inner instead. */
  .nether-faq__q {
    display: list-item;
    /* Roomier again (owner 2026-08-22, BN3TH reference: "a little bit more
       spacing"). 20-26 was already a deliberate increase, but against a bold
       question line it reads tight: heavier type needs more air around it or
       the rows run together into a block. */
    padding-block: clamp(24px, 4vw, 32px);
    cursor: pointer;
    list-style: none;
  }

  .nether-faq__q-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .nether-faq__q::-webkit-details-marker {
    display: none;
  }

  .nether-faq__q-text {
    text-transform: uppercase;
    letter-spacing: var(--type-ui-caps-tracking);
    /* BOLD (owner 2026-08-22: "we should have everything bolded").

       It was --type-ui-caps-weight, which aliases --font-weight-semibold, which
       resolves to 500 because the served face has no 600. Against BN3TH's
       questions this read almost regular. --font-weight-bold is 700 and is a
       real face, so this is a true bold rather than a synthesised one. Same
       cause as the trust-card glyph on the PDP. */
    font-weight: var(--font-weight-bold, 700);
    /* Bigger question line than the type-body-sm base */
    /* --leading-ui (1.4), not the 1.35 literal this carried: the scale has a
       token for a UI line of text and an off-scale value here bought nothing. */
    font-size: var(--font-size-base);
    line-height: var(--leading-ui);
  }

  /* Larger and darker, to carry its weight beside a 700 question. At 12px and
     0.55 it was a hairline next to bold type, which is the same optical
     mismatch the PDP trust cards had. The reference's chevron is solid. */
  .nether-faq__chevron {
    flex: 0 0 auto;
    inline-size: 14px;
    block-size: 14px;
    display: grid;
    place-items: center;
    opacity: 0.8;
    transition: transform var(--motion-exit) var(--ease-out-cubic, var(--ease-ui));
  }

  .nether-faq__chevron svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .nether-faq__row[open] .nether-faq__chevron {
    transform: rotate(90deg);
  }

  /* The hover tint existed but had no transition, so the whole page snapped
     (2026-08-22 seam audit). Base carries it per the layer rule. */
  .nether-faq__q-text {
    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  .nether-faq__q:hover .nether-faq__q-text {
    opacity: 0.65;
  }

  .nether-faq__a {
    /* More room under an open answer, and FULL ink. At 0.82 under a 700
       question the answer read as disabled rather than as supporting text; the
       weight difference already does the hierarchy, so the fade was doing the
       same job twice. */
    /* clamp, not --space-xl. The space scale stops at 24px, which is only 4px
       more than the --space-lg this replaced: not the extra room asked for. This
       tracks the question row's own clamp so an open row breathes in proportion
       to the rows around it. */
    padding-block-end: clamp(28px, 4vw, 36px);
    max-inline-size: 58ch;
    line-height: var(--leading-normal, 1.6);
  }

  .nether-faq__a > :first-child {
    margin-block-start: 0;
  }

  .nether-faq__a > :last-child {
    margin-block-end: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .nether-faq__row[open] .nether-faq__a {
      animation: nether-faq-reveal var(--motion-base) var(--ease-out-cubic, var(--ease-ui));
    }
  }

  @keyframes nether-faq-reveal {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 0.82;
      transform: translateY(0);
    }
  }

  .nether-faq__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
    padding-block: var(--space-xl);
  }

  .nether-faq__cta-heading,
  .nether-faq__cta-text {
    margin: 0;
  }

  .nether-faq__cta-text {
    opacity: 0.72;
  }

  .nether-faq__cta-button {
    margin-block-start: var(--space-sm);
  }
/* END_SECTION:nether-faq */

/* START_SECTION:nether-feature-rows (INDEX:32) */
.nether-frows {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-frows__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 7vw, 104px);
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  .nether-frows__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 46ch;
  }

  .nether-frows__head-eyebrow,
  .nether-frows__eyebrow {
    margin: 0;
    color: var(--color-foreground);
    opacity: 0.9;
  }

  .nether-frows__head-heading {
    margin: 0;
  }

  /* ---- Row: mobile stacks image over text ---- */
  .nether-frows__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .nether-frows__media {
    order: -1;
  }

  .nether-frows__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 50ch;
  }

  .nether-frows__heading {
    margin: 0;
    text-wrap: balance;
  }

  .nether-frows__body {
    margin: 0;
    opacity: 0.78;
  }

  .nether-frows__body p {
    margin: 0;
  }

  .nether-frows__body p + p {
    margin-top: var(--space-sm);
  }

  .nether-frows__button {
    align-self: flex-start;
    margin-top: var(--space-xs);
  }

  .nether-frows__media {
    aspect-ratio: var(--frow-ratio, 4 / 3);
    overflow: hidden;
    border-radius: var(--frow-radius, 12px);
  }

  .nether-frows__media--empty {
    background:
      radial-gradient(120% 100% at 20% 0%, rgb(var(--color-foreground-rgb) / 0.08) 0%, transparent 55%),
      linear-gradient(160deg, rgb(var(--color-foreground-rgb) / 0.1) 0%, rgb(var(--color-foreground-rgb) / 0.04) 100%);
  }

  .nether-frows__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media screen and (min-width: 750px) {
    .nether-frows__row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: clamp(40px, 6vw, 88px);
    }

    .nether-frows__media {
      order: 0;
    }

    .nether-frows__row[data-side="right"] .nether-frows__text {
      grid-column: 1;
    }
    .nether-frows__row[data-side="right"] .nether-frows__media {
      grid-column: 2;
    }
    .nether-frows__row[data-side="left"] .nether-frows__text {
      grid-column: 2;
    }
    .nether-frows__row[data-side="left"] .nether-frows__media {
      grid-column: 1;
    }
  }
/* END_SECTION:nether-feature-rows */

/* START_SECTION:nether-founder (INDEX:33) */
.nether-founder {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-founder__inner {
    inline-size: 100%;
    /* Media tier, not --page-width. The photograph is the point of this band,
       so it tracks the viewport; the story below it stays on its own 54ch
       measure regardless, so nothing becomes unreadable as this grows. */
    max-inline-size: var(--media-width, var(--page-width, 1520px));
    margin-inline: auto;
    padding-inline: var(--nether-gutter);
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 64px);
  }

  /* DESKTOP: image left, copy right (owner 2026-08-22: "the full-bleed image
     currently pushes the copy a full viewport down").

     Stacked, this band spent an entire screen on the photograph before the
     story started, so the two halves were never seen together and the copy read
     as a separate section. Side by side they are one statement.

     align-items: center rather than stretch, so the photograph keeps its own
     ratio instead of being handed the copy's height. That is the same ruling
     made on the PDP tabs media, and for the same reason. */
  @media screen and (min-width: 750px) {
    .nether-founder__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      gap: clamp(32px, 5vw, 72px);
    }
  }

  .nether-founder__media {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-media, 6px);
    background-color: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .nether-founder__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: var(--founder-ratio, 16 / 9);
  }

  /* One image per breakpoint, so a landscape frame never hard-crops on a phone. */
  .nether-founder__img--desktop {
    display: none;
  }

  /* FOCAL POINT, not a hardcoded object-position (2026-08-24). The mobile
     source is a 9:16 phone still and the frame is 4:5, so object-fit: cover
     keeps only the middle 70% of the height — 15% comes off the top and 15%
     off the bottom. On the founder shot that put tent canopy in frame while
     clipping the product table.

     Rather than guess a percentage in CSS, both <img> tags now emit Shopify's
     own focal point. Drag the crop marker on the file in admin > Content >
     Files and the section follows it, on every breakpoint, with no code
     change. Falls back to center center when none is set, which is exactly
     what the browser did before. */
  .nether-founder__img--mobile {
    display: block;
    /* A phone gets a taller frame; a 16:9 strip on a 400px screen is a sliver.
       4:5 and not taller: bled to 100vw the frame is now 125vw tall, which on a
       typical phone is a little over half the screen — a real picture, without
       becoming the takeover the trio cards were just pulled back from. */
    aspect-ratio: 4 / 5;
  }

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

    .nether-founder__img--mobile {
      display: none;
    }
  }

  /* When only one of the two is set, it paints at every width. */
  .nether-founder__media:not(:has(.nether-founder__img--mobile)) .nether-founder__img--desktop {
    display: block;
  }

  .nether-founder__media:not(:has(.nether-founder__img--desktop)) .nether-founder__img--mobile {
    display: block;
  }

  .nether-founder__caption {
    margin: 0;
    padding-block-start: var(--space-sm);
    opacity: 0.6;
  }

  /* The read. One narrow measure, centred, so the eye has a single column to
     fall into after the photograph. */
  .nether-founder__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    max-inline-size: 54ch;
    margin-inline: auto;
  }

  .nether-founder__eyebrow {
    margin: 0;
    opacity: 0.6;
  }

  .nether-founder__heading {
    margin: 0;
    /* One voice for section headings (finish pass 2026-09-01). Caps by CSS
       with wide tracking, medium weight, lg size -- identical across every
       section so the page reads as one hand. Typed caps in the content still
       render as caps; only the tracking stops fighting them. */
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.02em);
    font-weight: var(--type-heading-lg-weight);  /* 2026-09-12: defers to the type scale (bold) instead of pinning 500. The "finish pass" that set every section heading to medium flattened the page - see typography-tokens. nether-also-consider never had this override and was already correct. */
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-founder__body {
    margin: 0;
    opacity: 0.85;
  }

  .nether-founder__body > :first-child {
    margin-block-start: 0;
  }

  .nether-founder__body > :last-child {
    margin-block-end: 0;
  }

  .nether-founder__signature {
    margin: 0;
    padding-block-start: var(--space-xs);
    opacity: 0.6;
  }

  .nether-founder__link {
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 0.2em; /* em, not px: one offset for every text link */
    /* Pad to the theme's tap minimum without moving the underline off the text. */
    padding-block: calc((var(--minimum-touch-target, 44px) - 1lh) / 2);
    margin-block-start: calc(var(--space-xs) - ((var(--minimum-touch-target, 44px) - 1lh) / 2));
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-founder__link:hover {
      opacity: 0.7;
    }
  }
  /* ===================================================================
     MOBILE. LAST IN THE SHEET DELIBERATELY.

     This block used to sit above the base .nether-founder__media and __copy
     rules, and lost to them: a media query carries no specificity of its own,
     so `margin: 0` and `margin-inline: auto` declared later simply won and the
     bleed never applied. Anything here that re-declares a base property has to
     stay below it.
     =================================================================== */

  /* FULL-BLEED PHOTOGRAPH, COPY UNDERNEATH (owner 2026-08-23: "I don't
     want it to be this inset look either, it kind of reads like a blog post...
     it should be like a real picture, and then a nice-looking text
     underneath").

     The photograph sat inside the page gutter, which framed it — and a framed
     image with a centred heading and paragraph under it is precisely the shape
     of a blog post. Running it edge to edge makes it a picture the page is
     built around rather than an illustration dropped into an article. Same
     move the trio rail makes one section above, so the two read as one
     language on a phone.

     The negative margin cancels the gutter --founder__inner pays; the copy
     keeps its own padding below, so only the media bleeds.

     The 62vh cap goes with it. It existed to stop a tall crop eating the
     viewport before the copy started; the ratio below already governs height,
     and at full width a cap would have cropped the frame rather than sized it. */
  @media screen and (max-width: 749px) {
    /* THE CAP COMES OFF FIRST. Measured in the browser 2026-08-23: on a 375px
       phone --media-width resolves to min(100vw - 80px, 2200px) = 295px, so
       __inner was 295 wide inside a 375 viewport, centred by its own
       margin-inline: auto — 40px of dead margin down each side.

       That is where the "inset look" came from, and it is why a negative
       margin on the media alone could not fix it: the media was bleeding to
       the edge of a box that was itself floating in the middle of the screen.

       The 40px in that token is a desktop gutter that never shrinks. Correct
       on a 1440px screen, more than a tenth of the width of a phone. So on
       mobile the band takes the full viewport and pays its own gutter as
       padding, which the media then cancels below. */
    .nether-founder__inner {
      max-inline-size: none;
      margin-inline: 0;
    }

    .nether-founder__media {
      margin-inline: calc(var(--nether-gutter) * -1);
    }

    /* The caption belongs to the copy column, not to the bled frame, so it
       keeps the gutter the photograph just gave up. */
    .nether-founder__caption {
      padding-inline: var(--nether-gutter);
    }

    /* Closer than the desktop gap. The words are the picture's caption block
       now; a 32px trench between them reads as two separate things. */
    .nether-founder__inner {
      gap: var(--space-lg);
    }

    /* LEFT, not centred. Centred type under a framed image is the blog-post
       lockup being moved away from; ranged left under a full-bleed photograph
       is the photo-essay one. The 54ch measure is unchanged — it just starts
       at the gutter instead of being balanced around the middle. */
    .nether-founder__copy {
      align-items: flex-start;
      text-align: start;
      margin-inline: 0;
    }
  }
/* END_SECTION:nether-founder */

/* START_SECTION:nether-hero-product (INDEX:34) */
.nether-hp {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  /* One centred column: plate, then the action under it. */
  .nether-hp__inner {
    inline-size: 100%;
    max-inline-size: var(--media-width, var(--page-width, 1520px));
    margin-inline: auto;
    padding-inline: var(--nether-gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .nether-hp__media {
    inline-size: 100%;
    overflow: hidden;
    border-radius: var(--radius-media, 6px);
    background-color: rgb(var(--color-foreground-rgb) / 0.04);
  }

  /* Contained on desktop: a tall plate with air either side, not a second hero. */
  @media screen and (min-width: 750px) {
    .nether-hp__media {
      max-inline-size: var(--hp-width, 760px);
      margin-inline: auto;
    }
  }

  /* Two ratios, one per breakpoint. The supplied art is 16:9 on desktop and 9:16
     on mobile, so a single shared ratio would hard-crop one of them to nothing.
     Mobile is the base because the section is built mobile-first. */
  .nether-hp__img,
  .nether-hp__img--empty {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: var(--hp-ratio-mobile, 3 / 4);
  }

  @media screen and (min-width: 750px) {
    .nether-hp__img,
    .nether-hp__img--empty {
      aspect-ratio: var(--hp-ratio, 3 / 4);
    }
  }

  /* One image per breakpoint, so a landscape frame never hard-crops on a phone. */
  .nether-hp__img--desktop {
    display: none;
  }

  .nether-hp__img--mobile {
    display: block;
  }

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

    .nether-hp__img--mobile {
      display: none;
    }
  }

  /* When only one of the two is set, it paints at every width. */
  .nether-hp__media:not(:has(.nether-hp__img--mobile)) .nether-hp__img--desktop {
    display: block;
  }

  .nether-hp__media:not(:has(.nether-hp__img--desktop)) .nether-hp__img--mobile {
    display: block;
  }

  /* Everything under the plate is centred (owner: the Shop Now is centred too). */
  .nether-hp__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    max-inline-size: 42ch;
  }

  .nether-hp__eyebrow {
    margin: 0;
    opacity: 0.6;
  }

  .nether-hp__heading {
    /* One voice for section headings (finish pass 2026-09-01). Caps by CSS
       with wide tracking, medium weight, lg size -- identical across every
       section so the page reads as one hand. Typed caps in the content still
       render as caps; only the tracking stops fighting them. */
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.02em);
    font-weight: var(--type-heading-lg-weight);  /* 2026-09-12: defers to the type scale (bold) instead of pinning 500. The "finish pass" that set every section heading to medium flattened the page - see typography-tokens. nether-also-consider never had this override and was already correct. */
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-hp__body {
    margin: 0;
    opacity: 0.8;
  }

  .nether-hp__body > :first-child {
    margin-block-start: 0;
  }

  .nether-hp__body > :last-child {
    margin-block-end: 0;
  }

  .nether-hp__price {
    margin: 0;
  }

  /* Outline, not filled, matching the hero's button. That half of the 2026-08-14
     decision stands ("a square one with just an outline reads a lot cleaner than
     a filled pill") — it is the FILL that was the problem, not the corner.

     This comment used to say "square outline". The square corner went on
     2026-08-16 when the owner standardised radii site-wide ("every border radius
     should be standardized... they all have to be pills"), which is what the
     border-radius below already reflects. */
  .nether-hp__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The CTA tokens, not the tap minimum (owner 2026-08-22: the buttons read
       "too small and too tight"). --minimum-touch-target is the floor a control
       must clear to be tappable, and using it as the SIZE is what made this
       44px next to a 56px add to cart. --action-height is what every other call
       to action in the theme is built from, so this now belongs to that family
       instead of sitting a size below it. */
    min-block-size: var(--action-height);
    padding-inline: var(--action-padding-inline);
    margin-block-start: var(--space-xs);
    border: 1px solid var(--color-foreground);
    /* Pill, matching every other button on the site (owner 2026-08-16: one
       radius everywhere, some were boxes and some pills). */
    border-radius: var(--action-radius);
    background: transparent;
    color: var(--color-foreground);
    text-decoration: none;
    /* --action-size (16px) and the CTA's normal tracking. The old 13px at
       0.02em wide tracking was the small-caps-ish register the token file
       retired: "caps at wide tracking is the hype register this theme is
       deliberately out of". */
    font-size: var(--action-size);
    font-weight: var(--action-weight);
    letter-spacing: var(--action-tracking);
    transition: background var(--motion-quick) var(--ease-ui), color var(--motion-quick) var(--ease-ui);
  }

  /* ===== THE WIPE ======================================================
     (owner 2026-08-22: "I feel like we could build a cooler shop button here...
     it's kind of an awkward section... underutilized right under the hero".)

     The fill sweeps in from the left instead of the whole background swapping
     at once. Same two colours the old hover used, so nothing about the palette
     changes — what changes is that the button now has a DIRECTION, which is
     what it was missing sitting under a full-bleed hero.

     Why this gesture and not another: the page already spends its other
     micro-interactions elsewhere and repeating one would flatten them all
     together. Hero swells and inverts, story slides an arrow, trio reveals on
     hover, the photo credit folds out a pill. A directional wipe is unused,
     and it suits a secondary control because it reads as the button filling in
     rather than jumping forward.

     scaleX on a pseudo-element, not a width or a background-position: transform
     is the only one of the three the compositor can run without laying out or
     repainting the button on every frame.

     isolation + z-index -1 keeps the fill behind the label without needing the
     label wrapped in a span the template would have to render. overflow: clip
     makes the fill respect the pill radius. */
  .nether-hp__button {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }

  .nether-hp__button::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-foreground);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-base) var(--ease-enter);
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-hp__button:hover::before,
    .nether-hp__button:focus-visible::before {
      transform: scaleX(1);
    }

    .nether-hp__button:hover,
    .nether-hp__button:focus-visible {
      color: var(--color-background);
    }
  }

  /* Touch gets the filled end state on press, since there is no hover to run
     the wipe through. */
  @media (hover: none) {
    .nether-hp__button:active::before {
      transform: scaleX(1);
    }

    .nether-hp__button:active {
      color: var(--color-background);
    }
  }

  /* Reduced motion: the fill still arrives, it just does not travel. */
  @media (prefers-reduced-motion: reduce) {
    .nether-hp__button::before {
      transition-duration: 0.01ms;
    }
  }
/* END_SECTION:nether-hero-product */

/* START_SECTION:nether-hero (INDEX:35) */
.nether-hero {
    position: relative;
    /* vh fallback, then svh. svh is the SMALL (toolbar-shown) viewport and is
       STABLE: it does not change when the mobile address bar retracts on scroll.
       dvh was used here before (2026-08-14, to stop 100vh over-expanding behind
       the iOS toolbar) but dvh tracks the VISIBLE viewport, so the hero grew and
       read as "zooming in" as you scrolled and the bar hid (owner 2026-08-16).
       svh fixes both: fills the screen on load, no overflow behind the toolbar,
       and no growth on scroll. */
    min-height: var(--hero-min-height-mobile, 90vh);
    min-height: var(--hero-min-height-mobile-svh, 90svh);
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .nether-hero {
      min-height: var(--hero-min-height, 88vh);
    }
  }

  /* Slide rail: native horizontal scroll-snap, so swipe works with no JS. */
  .nether-hero__track {
    display: flex;
    min-height: inherit;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nether-hero__track::-webkit-scrollbar {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .nether-hero__track {
      scroll-behavior: auto;
    }
  }

  .nether-hero__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    min-height: inherit;
    display: flex;
    scroll-snap-align: start;
    /* Deliberately NOT scroll-snap-stop: always. That rule forbids skipping past a
       snap point, which silently clamps a bar click to a single slide advance (so
       tapping bar 3 from slide 1 only ever reached slide 2). Mandatory snapping
       still lands cleanly on each slide. */
  }

  .nether-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .nether-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Desktop focal point. A landscape still gets cropped hard at 92vh on a wide
     screen, and which band survives is a per-photo call (heads in one shot,
     product in the next), so it is a slide setting rather than a constant.
     0% holds the top of the image, 100% the bottom.

     Desktop only, deliberately: mobile already loads its own portrait crop, so
     it has nothing to rescue, and one slider driving both would mean every
     desktop correction knocked the phone version off centre. */
  @media screen and (min-width: 750px) {
    .nether-hero__img {
      object-position: 50% var(--hero-focal-desktop, 50%);
    }
  }

  /* A slide with both a desktop and a mobile still wraps its <img> in a
     <picture> (see snippets/nether-hero-slide.liquid). display: contents takes
     that wrapper out of the box tree, so .nether-hero__img keeps sizing against
     .nether-hero__bg exactly as it does unwrapped, and the height: 100% above
     resolves the same in both cases. No swap rules belong here: <picture>
     chooses its candidate before fetching, so there is nothing to hide. */
  .nether-hero picture {
    display: contents;
  }

  /* Breakpoint-scoped video wrappers: landscape clip on desktop, portrait on
     phones. Each fills the bg so the video-background inside covers the frame. */
  .nether-hero__media {
    position: absolute;
    inset: 0;
  }

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

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

  /* Refined dark backdrop. Works with or without a photo: a soft top-light
     vignette plus a bottom gradient that anchors the text.

     The middle stop is the clearest point of the photo, and where it sits is
     what "overlay reach" moves. Expressed as 100% minus the reach so the slider
     reads the way it behaves: turn it UP and the darkening climbs further into
     the middle of the image, turn it DOWN and it stays gathered under the text.
     Reach is clamped 10-90 in the schema so the stop can never collide with
     either end stop and invert the ramp. */
  .nether-hero__overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 80% at 50% 0%, rgb(255 255 255 / 0.06) 0%, transparent 55%),
      linear-gradient(
        to bottom,
        rgb(0 0 0 / calc(var(--hero-overlay-opacity) * 0.4)) 0%,
        rgb(0 0 0 / calc(var(--hero-overlay-opacity) * 0.15)) calc(100% - var(--hero-overlay-reach, 60%)),
        rgb(0 0 0 / var(--hero-overlay-opacity)) 100%
      );
  }

  .nether-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    align-items: flex-end;
    padding-inline: var(--page-margin, 20px);
    padding-block: clamp(72px, 12vh, 160px);
  }

  /* Full-bleed hero (BN3TH / Nike immersive style): hug the LEFT edge instead of
     sitting in the centered page-width column the content sections share. */
  .nether-hero .nether-hero__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(24px, 3vw, 48px);
  }

  /* Room for the bars so long copy never collides with them. */
  .nether-hero:has(.nether-hero__bars) .nether-hero__inner {
    padding-block-end: clamp(96px, 14vh, 184px);
  }

  .nether-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
    max-width: var(--hero-max-width, 22ch);
    text-align: var(--hero-align, left);
    align-items: var(--hero-align, flex-start);
  }

  .nether-hero__content[style] {
    align-items: flex-start;
  }

  .nether-hero__eyebrow {
    margin: 0;
    color: var(--color-foreground);
    /* 0.6 to match every other eyebrow (finish pass 2026-09-01). This value
       never actually showed before: the entrance keyframe below fills forwards
       to opacity 1, which beat the rule, so the hero eyebrow landed brighter
       than the rest of the site. --rise-to lets the keyframe land here. */
    opacity: 0.6;
    --rise-to: 0.6;
  }

  .nether-hero__heading {
    margin: 0;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-foreground-heading, var(--color-foreground));
    text-wrap: balance;
  }

  .nether-hero__subheading {
    margin: 0;
    max-width: 46ch;
    color: var(--color-foreground);
    opacity: 0.85;
  }

  .nether-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-sm);
  }

  .nether-hero__button {
    min-width: 12rem;
  }

  /* Outline, not filled. That half of the 2026-08-14 decision stands ("a square
     one with just an outline instead of the button itself would look a lot
     cleaner") — it is the FILL that was the problem, not the corner.

     The square corner is gone as of 2026-08-16: owner reversed it site-wide
     ("every border radius should be standardized... they all have to be pills").
     The theme's own button radius setting is 100, so pill is the house shape and
     the hero no longer disagrees with it.

     Two class names to clear Horizon's own .button, which is equal specificity
     and would otherwise win on source order. Colour rides --color-foreground so
     it follows the hero's scheme (light on the dark home), not a hardcoded white. */
  /* PRIMARY — the solid one (owner 2026-08-22: "let's do the hero and story
     CTAs distinct roles as well. It shouldn't all be the same thing").

     The page was running FIVE outline-or-white pills that looked identical and
     carried different weights of ask: hero, hero product, story, trio and the
     row button under it. Identical styling for unequal jobs is what made the
     home read repetitive, so each surface now gets one register:

       hero          PRIMARY      solid fill      the page's main entry
       hero product  SECONDARY    outline         supports the product plate
       story         EDITORIAL    text + arrow    a brand line, not an offer
       trio          CONTEXTUAL   reveals on hover, per card

     This one is filled because it is the first and strongest ask on the site
     and it sits over full-bleed photography, where an outline is only as
     legible as whatever happens to be behind it. Colour still rides
     --color-foreground rather than a hardcoded white, so it follows the hero's
     scheme instead of assuming the hero is dark. */
  .nether-hero .nether-hero__button {
    /* Same height as every other call to action (finish pass 2026-09-01).
       Horizon's .button padding was landing this at 76px while the product
       hero button directly below it sat at --action-height, 56px. One pill
       height across the page; the min-block-size is the tap floor and the
       size, padding-block zero so the token is the only thing setting it. */
    min-block-size: var(--action-height);
    padding-block: 0;
    border-radius: var(--action-radius);
    background: var(--color-foreground);
    border: 1px solid var(--color-foreground);
    color: var(--color-background);
  }

  /* Hover INVERTS to the outline, which is the same two states the old version
     had, swapped so the resting state is the loud one. Pointer-gated so a phone
     tap does not leave it stuck in the hover state. */
  @media (hover: hover) and (pointer: fine) {
    .nether-hero .nether-hero__button:hover {
      background: transparent;
      color: var(--color-foreground);
    }
  }

  /* The hero's SECOND slot keeps the outline, so a slide carrying both actions
     still reads as primary + secondary rather than two equals. */
  .nether-hero .button-secondary.nether-hero__button {
    background: transparent;
    color: var(--color-foreground);
  }

  @media screen and (max-width: 749px) {
    .nether-hero__button {
      flex: 1 1 auto;
      min-width: 0;
    }
  }

  /* =========================================================
     POSITION BARS — clean, centred, one per slide (Stance pattern). Token-driven
     so they follow the section's scheme. The fill doubles as the autoplay timer.
     ========================================================= */
  /* Position lines, one per slide. CENTRED on desktop (Stance pattern); moved to
     the bottom-right corner on mobile only (owner 2026-08-14: "they stay
     centered on desktop, but on mobile they'll be on the bottom right-hand side,
     across from the Shop Now button"). The fill doubles as the autoplay timer.
     Reuses the nether-hero.js wiring; renders only when slide_count > 1. The
     mobile reposition lives in the max-width block below. */
  .nether-hero__bars {
    position: absolute;
    z-index: 2;
    inset-block-end: clamp(20px, 3.5vh, 40px);
    inset-inline: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-inline: clamp(24px, 3vw, 48px);
    pointer-events: none;
  }

  /* Desktop only (owner 2026-08-03). The reference mobile heroes (BN3TH,
     Gymshark) put the copy tight against the bottom edge with nothing beneath
     it, and the bars were the only thing standing between this and that.

     Safe to hide: nether-hero.js measures track.clientWidth and never a bar, so
     display:none costs no navigation. Swipe still moves the rail and autoplay
     still advances; the bars were click-to-jump and a position readout, both of
     which a one-thumb screen does without. */
  @media screen and (max-width: 749px) {
    /* Lines move to the bottom-right corner on mobile (owner 2026-08-14),
       right-aligned and pulled off the centre so they sit across from the
       Shop Now button, which is bottom-left. No longer hidden here. */
    .nether-hero__bars {
      inset-inline-start: auto;
      inset-inline-end: clamp(16px, 5vw, 28px);
      justify-content: flex-end;
      padding-inline: 0;
      inset-block-end: clamp(18px, 3vh, 30px);
    }

    /* The padding rule below stands on its own: the bars used to reserve
       clamp(96px, 14vh, 184px) of bottom padding (~114px on a phone), which put
       the copy mid-image with a hole under the button. The :has() selector is
       repeated so this matches its specificity and wins. */
    .nether-hero__inner,
    .nether-hero:has(.nether-hero__bars) .nether-hero__inner {
      /* Trimmed 2026-08-14 (owner: "a little less padding so you can kinda see
         the product"). Was clamp(32px, 5vh, 56px). The copy block sits at the
         bottom on mobile, so pulling the floor down gives the product image
         back the strip the padding was holding. */
      padding-block-end: clamp(20px, 3.5vh, 40px);
    }

    /* Heading a step down on mobile (owner: "decrease the header text so it
       just fits a little bit smaller under the corner"). --font-size-3xl runs
       up to 48px, which crowded the top corner and pushed the product out of
       frame; --font-size-2xl tops out at 36px. Desktop keeps 3xl. */
    .nether-hero__heading {
      font-size: var(--font-size-2xl);
    }
  }

  .nether-hero__bar {
    position: relative;
    inline-size: clamp(30px, 4.5vw, 60px);
    block-size: 3px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--style-border-radius-pills, 999px);
    /* Lighter over the image (owner 2026-08-14: "decrease the opacity for the
       bars"). Inactive track 0.3 -> 0.2; the active fill eases to 0.8 below. */
    background-color: rgb(var(--color-foreground-rgb) / 0.2);
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--motion-quick) var(--ease-ui);
  }

  /* The tap target is bigger than the 3px bar so it stays thumb-friendly. */
  .nether-hero__bar::before {
    content: '';
    position: absolute;
    inset-block: -12px;
    inset-inline: -4px;
  }

  @media (hover: hover) {
    .nether-hero__bar:hover {
      background-color: rgb(var(--color-foreground-rgb) / 0.5);
    }
  }

  .nether-hero__bar:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 4px;
  }

  .nether-hero__bar-fill {
    display: block;
    block-size: 100%;
    inline-size: 100%;
    border-radius: inherit;
    background-color: rgb(var(--color-foreground-rgb) / 0.8);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform var(--motion-base) var(--ease-out-cubic, var(--ease-ui));
  }

  .nether-hero__bar.is-active .nether-hero__bar-fill {
    transform: scaleX(1);
  }

  /* Autoplay: the rAF loop in nether-hero.js drives the active fill directly,
     so transitions must be OFF in timed mode. A leftover transition here makes
     the computed value chase the per-frame target and lag seconds behind; the
     only crisp motion left is the outgoing bar collapsing right-to-left, which
     reads as a backwards countdown. Stories behavior: fill tracks time exactly,
     outgoing bar snaps empty. */
  .nether-hero__bars.is-timed .nether-hero__bar-fill {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .nether-hero__bar-fill,
    .nether-hero__bars.is-timed .nether-hero__bar.is-active .nether-hero__bar-fill {
      transition: none;
    }
  }

  /* Content rises in on whichever slide is showing, and again on each change.
     Paced down from 0.8s and a 0.07s step (feel WO-14.5): the copy used to be
     still moving four fifths of a second in, so on a six second slide the
     customer read a moving headline for most of the first beat. On the travel
     role with the stagger token the last line lands under 0.6s, and the rest
     of the slide is a still poster. Rise is the foundation 10px, not 16. */
  @media (prefers-reduced-motion: no-preference) {
    .nether-hero__slide.is-active .nether-hero__content > * {
      animation: nether-hero-rise var(--motion-panel) var(--ease-enter) both;
    }
    .nether-hero__slide.is-active .nether-hero__content > *:nth-child(2) { animation-delay: var(--motion-stagger); }
    .nether-hero__slide.is-active .nether-hero__content > *:nth-child(3) { animation-delay: calc(2 * var(--motion-stagger)); }
    .nether-hero__slide.is-active .nether-hero__content > *:nth-child(4) { animation-delay: calc(3 * var(--motion-stagger)); }
  }

  @keyframes nether-hero-rise {
    from {
      opacity: 0;
      transform: translateY(var(--motion-rise));
    }
    to {
      /* Land on the element's own target, not a flat 1: the eyebrow sets
         --rise-to: 0.6 so the entrance finishes at its resting opacity
         instead of overriding it forever (fill-mode: both). Everything
         else keeps the default of 1. */
      opacity: var(--rise-to, 1);
      transform: translateY(0);
    }
  }
/* END_SECTION:nether-hero */

/* START_SECTION:nether-icon-card (INDEX:36) */
.nether-ic {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-ic__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.5vw, 40px);
    inline-size: 100%;
    max-inline-size: var(--page-width, 1520px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 40px);
  }

  .nether-ic__lead {
    margin: 0;
    max-inline-size: 44ch;
    opacity: 0.9;
  }

  .nether-ic__card {
    list-style: none;
    margin: 0;
    padding: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .nether-ic__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    padding-block: clamp(20px, 2.5vw, 28px);
  }

  .nether-ic__item + .nether-ic__item {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  @media screen and (min-width: 750px) {
    .nether-ic__card {
      flex-direction: row;
      align-items: stretch;
    }

    .nether-ic__item {
      flex: 1;
      justify-content: flex-start;
      padding-block: var(--space-md);
      padding-inline: clamp(12px, 2vw, 28px);
    }

    .nether-ic__item + .nether-ic__item {
      border-block-start: 0;
      border-inline-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    }
  }

  .nether-ic__icon {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    color: var(--color-foreground);
    margin-block-end: var(--space-xs);
  }

  .nether-ic__icon svg {
    inline-size: 30px;
    block-size: 30px;
  }

  .nether-ic__tech {
    margin: 0;
    opacity: 0.55;
  }

  .nether-ic__benefit {
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
  }
/* END_SECTION:nether-icon-card */

/* START_SECTION:nether-image-trio (INDEX:37) */
/* One centred action under the row, matching the hero and hero-product button
     (outline, no fill) so the page has one button language. Radius comes from
     --action-radius, the single button token, not a local literal. */
  .nether-trio__action {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(28px, 4vw, 48px);
  }

  .nether-trio__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* CTA tokens, matching nether-hero-product (owner 2026-08-22: buttons read
       "too small and too tight"). The tap minimum is a floor, not a size. */
    min-block-size: var(--action-height);
    padding-inline: var(--action-padding-inline);
    border: 1px solid var(--color-foreground);
    border-radius: var(--action-radius);
    background: transparent;
    color: var(--color-foreground);
    text-decoration: none;
    font-size: var(--action-size);
    font-weight: var(--action-weight);
    letter-spacing: var(--action-tracking);
    transition: background var(--motion-quick) var(--ease-ui), color var(--motion-quick) var(--ease-ui);
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-trio__button:hover {
      background: var(--color-foreground);
      color: var(--color-background);
    }
  }

  .nether-trio {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-trio__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vw, 56px);
  }

  /* One gutter (feel WO-14.9). nether-chrome.liquid pads this inner at
     --page-margin (16px on the narrow homepage) from a (0,1,0) selector that
     renders after the section stylesheets, so the shared floor has to be
     declared at (0,2,0) to reach. Same move .nether-hero already makes on its
     own inner. The mobile rail's negative end margin below reads the identical
     expression, so the two can never disagree and bleed past the page edge. */
  .nether-trio .nether-trio__inner {
    /* Media tier. The row had no cap of its own and inherited the section
       wrapper's, so it stopped at 1520 on a 2560 screen. The card captions are
       short and each card caps its own text, so widening the row does not put
       any prose past a measure. */
    inline-size: 100%;
    max-inline-size: var(--media-width, var(--page-width, 1520px));
    margin-inline: auto;
    padding-inline: var(--nether-gutter);
  }

  /* THE CAP COMES OFF ON A PHONE (owner 2026-08-23: "the media in the block is
     too small", with a Patagonia mobile carousel as the reference).

     --media-width resolves to min(100vw - 80px, 2200px). The 80px is a desktop
     gutter that never shrinks, so on a 393px iPhone the row was capped at
     313px and each 88% card came out around 275px: roughly 70% of the screen,
     against a reference card sitting at about 84% with a peek on both sides.
     The cards were not styled small, they were being measured inside a box
     two thirds the width of the phone.

     Third section caught by this token today, after the founder band and the
     size page. It is worth fixing at the token rather than per section. */
  @media screen and (max-width: 749px) {
    .nether-trio .nether-trio__inner {
      max-inline-size: none;
      margin-inline: 0;
    }
  }

  .nether-trio__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-inline-size: 52ch;
  }

  .nether-trio__eyebrow {
    margin: 0;
    opacity: 0.6;
  }

  .nether-trio__heading {
    /* One voice for section headings (finish pass 2026-09-01). Caps by CSS
       with wide tracking, medium weight, lg size -- identical across every
       section so the page reads as one hand. Typed caps in the content still
       render as caps; only the tracking stops fighting them. */
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.02em);
    font-weight: var(--type-heading-lg-weight);  /* 2026-09-12: defers to the type scale (bold) instead of pinning 500. The "finish pass" that set every section heading to medium flattened the page - see typography-tokens. nether-also-consider never had this override and was already correct. */
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
    text-wrap: balance;
  }

  .nether-trio__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }

  .nether-trio__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .nether-trio__media {
    position: relative;
    /* 4:5 on desktop, TALLER on mobile (owner 2026-08-22, reverting the
       uniform-everywhere version).

       Three side by side want the shorter ratio or the row pushes off the fold.
       Scrolling at ~60% width on a phone, 4:5 reads stubby against a full-width
       heading, which is the complaint that started this. So the ratio is
       uniform ACROSS THE THREE CARDS at any given width, which is what made
       them read as a set, and only changes between breakpoints. */
    aspect-ratio: 4 / 5;

    /* 4/5 on a phone. It has been 2/3, then 78svh, then back to 2/3; the
       reference card the owner pointed at is close to square, and at 86% of a
       full viewport a 2:3 portrait is 430px tall on a 393px phone, which is
       the "overly extended" complaint returning by a different route. 4:5 is
       tall enough to still read as a portrait photograph and short enough that
       the caption under it lands above the fold. */
    /* 1/1.4 on a phone, matching the On rail measured on 2026-08-23 (they run
       340px cards at ratio 1.41 on a 375px viewport). Slightly taller than the
       4:5 this replaced, and the caption now lives below the frame rather than
       on it, so the extra height costs the caption nothing. */
    @media screen and (max-width: 749px) {
      aspect-ratio: 1 / 1.4;
    }
    overflow: clip;
    /* --radius-none, matching every other piece of media on the site (owner
       2026-08-22: "all the border radii should match for all media").

       This was --style-border-radius-control, a CONTROL token on MEDIA, which
       the collapse rule in typography-tokens.liquid explicitly rules out:
       "-none on everything else including cards, media and panels". It went
       unnoticed at 8px and became visible on 2026-08-20 when that token was
       aliased to --radius-control and moved to 10px.

       Measured on the home page: hero, hero product, story, founder and stories
       media are all 0. The trio was the only rounded one. */
    border-radius: var(--radius-media, 6px);

    /* The card is what the press moves (see the :active rules below), so the
       transition lives here rather than on the button. --motion-edge is the
       theme's shortest real duration: a press has to feel like it happened
       under the finger, not after it. */
    transform-origin: center;
    transition: transform var(--motion-edge) var(--ease-ui);
  }

  /* ===== THE STRETCHED LINK ============================================
     Covers the frame so the whole photograph is the tap target, and centres
     the action inside itself so the button needs no positioning of its own.
     z-index 1 keeps it above the image and the tag but BELOW the credit chip
     at 3, which is what lets the small control keep its corner. */
  /* ===== THE STRETCHED LINK ============================================
     Covers the WHOLE card, image and caption together, which is how all three
     reference sites behave. It draws nothing at all now: no wash, no centred
     action, no hover state of its own. The card's only hover is the image zoom
     that nether-hover.liquid already provides.

     z-index 1 keeps it above the image and below the credit chip at 3, so that
     corner stays its own control. */
  .nether-trio__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
  }

  .nether-trio__hit:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-foreground);
    outline-offset: 3px;
  }

  /* The card is the positioning context now that the link spans all of it. */
  .nether-trio__item {
    position: relative;
  }

  /* Touch has no hover, so the press itself is the moment to darken. */
  @media (hover: none) {
    .nether-trio__hit:active {
      background-color: rgb(0 0 0 / 0.52);
    }

    /* THE PRESS, on touch. Same gesture as desktop: the CARD shrinks, not the
       button (owner 2026-08-23: "what would an iOS app do").

       It used to scale and re-fill the button, which was the only press state
       a phone had — the reveal that carries the gesture on desktop never runs
       here, because the button is permanently visible with no hover to summon
       it. Moving the press onto the card gives touch the same feedback as a
       pointer and makes the card behave like one object rather than a photo
       with a control loose on top of it. */
    .nether-trio__item:active .nether-trio__media {
      transform: scale(0.98);
    }
  }

  .nether-trio__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease-enter);
  }

  /* pointer: fine as well as hover: hover. A hybrid laptop reports hover: hover,
     and an ungated :hover latches on after a tap there — the card would stay
     zoomed for the rest of the visit with nothing pointing at it. */
  @media (hover: hover) and (pointer: fine) {
    .nether-trio__item:hover .nether-trio__img {
      /* --hover-zoom, which IS this decision: 1.02 was set here as the motion
         spec cap because at 1.04 the zoom "was the loudest event on a light
         monochrome page and it fired on mouse drift rather than on intent". The
         2026-08-22 pass found four different numbers doing this job across the
         theme and unified them onto the cap set here. */
      transform: scale(var(--hover-zoom));
    }
  }

  .nether-trio__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-block-start: var(--space-md);
  }

  /* In-frame tag, matching the slideshow's: white over the photograph with a
     soft shadow, so it holds on a light or dark frame and in both schemes.
     The shadow stays even though there is now a gradient under it — the
     gradient protects the caption's weight, and the tag is set smaller. */
  .nether-trio__tag {
    margin: 0;
    color: rgb(255 255 255 / 0.95);
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
  }

  /* text-transform here, not on the shared token. type-ui-caps carries the
     tracking, size and weight of an eyebrow but NOT the casing: every other
     eyebrow on the site is typed in capitals in the editor. These captions are
     set in sentence case in the template so they read correctly in the editor
     field, so the casing is applied in CSS. */
  /* ===== THE CAPTION, ON THE PHOTOGRAPH =============================
     Bottom-left, over the gradient below. Fixed white rather than the section's
     ink token: it sits on an image, not on the section ground, so it must not
     follow the colour scheme. */
  /* ===== THE CAPTION, UNDER THE PHOTOGRAPH ============================
     Plain type on the page ground. Sentence case and regular weight, not caps
     and not bold: Arc'teryx sets these at weight 400 and On at 700 but on a
     33px heading, and both read as editorial rather than as UI labels. Caps
     here would put it back in the same register as the eyebrow above it. */
  .nether-trio__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-block-start: var(--space-sm);
  }

  .nether-trio__tag {
    margin: 0;
    opacity: 0.55;
  }

  .nether-trio__caption {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    color: var(--color-foreground-heading, var(--color-foreground));
    max-inline-size: 30ch;
  }

  .nether-trio__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-xs);
    opacity: 0.7;
  }

  .nether-trio__arrow {
    transition: transform var(--motion-quick) var(--ease-ui);
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-trio__item:hover .nether-trio__cta {
      opacity: 1;
    }
    .nether-trio__item:hover .nether-trio__arrow {
      transform: translateX(4px);
    }
  }

  /* One screen, not two (feel WO-14.7). Three 3:4 portraits stacked put the
     third card most of a viewport below the second, so the band read as a
     scroll rather than a set. Below 750px it becomes the slideshow's rail:
     84% cards, mandatory snap, and the same negative end margin so the third
     card bleeds past the gutter and says there is more to the right. */
  @media screen and (max-width: 749px) {
    .nether-trio__grid {
      display: flex;
      gap: clamp(12px, 1.6vw, 20px);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
      margin-inline-end: calc(var(--nether-gutter) * -1);
      padding-inline-end: var(--nether-gutter);
    }

    .nether-trio__grid::-webkit-scrollbar {
      display: none;
    }

    /* FULL-BLEED (owner 2026-08-22: "mobile: full-bleed swipe cards. Big —
       close to full viewport height. The photos are strong, let them carry
       it").

       The rail already bled off the RIGHT edge to show the next card. It now
       bleeds off the left as well, so the first card starts at the screen edge
       instead of inside the page gutter — at 88vw the old inset made the cards
       look windowed rather than full-bleed. The scroll-padding keeps the first
       card snapping flush to that edge. */
    .nether-trio__grid {
      margin-inline: calc(var(--nether-gutter) * -1);
      padding-inline: var(--nether-gutter);
      scroll-padding-inline-start: var(--nether-gutter);
    }

    .nether-trio__item {
      /* 84vw, measured against the reference rather than expressed as a
         percentage of the rail. A percentage resolves against the rail's
         CONTENT box, so it silently shrinks by whatever padding the rail is
         paying: 86% read as 76% of the screen here. A viewport unit is
         independent of that, so the card is the size it says it is. */
      flex: 0 0 84vw;
      /* Matched to the stories rail below it: two rails on one page that
         disagree on card width read as an accident. */
      scroll-snap-align: center;
    }
  }

  @media screen and (min-width: 750px) {
    .nether-trio__grid {
      grid-template-columns: repeat(3, 1fr);
      align-items: start;
    }

    /* The On stagger: middle card sits lower so the row breathes. Floor raised
       from 32px (feel WO-14.2): between 750px and 1100px the old clamp landed
       around 37-55px, which reads as a card that missed its baseline rather
       than a deliberate device. */
    /* STAGGER REMOVED (owner 2026-08-22: "tops aligned"). The middle card
       dropped by up to 72px, which was a deliberate editorial device but read
       as an accident once the three ratios were unified: a set of three
       identical frames with one sitting lower looks like a bug, not a rhythm. */
  }
/* END_SECTION:nether-image-trio */

/* START_SECTION:nether-made-with (INDEX:38) */
.nether-mw {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-mw__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
    inline-size: 100%;
    max-inline-size: var(--page-width, 1520px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 40px);
  }

  .nether-mw--center .nether-mw__inner {
    align-items: center;
    text-align: center;
  }

  .nether-mw__eyebrow {
    margin: 0;
    opacity: 0.55;
  }

  .nether-mw__marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(28px, 5vw, 64px);
  }

  .nether-mw--center .nether-mw__marks {
    justify-content: center;
  }

  .nether-mw__mark {
    display: inline-flex;
    align-items: center;
  }

  .nether-mw__img {
    inline-size: var(--mw-w, 200px);
    max-inline-size: 60vw;
    block-size: auto;
    display: block;
  }

  /* Defensive blends: a logo with a baked white (light mode) or black (dark
     mode) background still sits clean on the page. Transparent PNGs are
     unaffected in practice. */
  .nether-mw__img--light {
    mix-blend-mode: multiply;
  }

  html[data-theme='dark'] .nether-mw__img--light {
    mix-blend-mode: normal;
  }

  html[data-theme='dark'] .nether-mw__img--dark {
    mix-blend-mode: screen;
  }

  /* Dark mode: prefer the supplied dark artwork; fall back to a CSS invert
     only when the mark has no dark version (safe for pure-black logos). */
  .nether-mw__img--dark {
    display: none;
  }

  html[data-theme='dark'] .nether-mw__mark:has(.nether-mw__img--dark) .nether-mw__img--light {
    display: none;
  }

  html[data-theme='dark'] .nether-mw__img--dark {
    display: block;
  }

  html[data-theme='dark'] .nether-mw__mark:not(:has(.nether-mw__img--dark)) .nether-mw__img--light {
    filter: invert(1) hue-rotate(180deg);
  }

  /* Type-set wordmarks (TRAIL GRIP™ etc.) ride currentColor — no swap needed */
  .nether-mw__word {
    font-size: clamp(1.375rem, 2.4vw, 2rem);
    /* --font-weight-black was retired 07-31: it aliased 700, which is exactly
       --font-weight-bold, and Shopify only serves 400/500/700 for this face. */
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-mw__link {
    align-self: flex-start;
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .nether-mw--center .nether-mw__link {
    align-self: center;
  }
/* END_SECTION:nether-made-with */

/* START_SECTION:nether-process-strip (INDEX:39) */
.nether-strip {
    inline-size: 100%;
    padding-block: var(--space-40);

    /* NOT --nether-gutter (22px). The strip sits between paragraphs, and
       Horizon's page-width sections inset body copy by 16px on a phone — so a
       22px rail put the photographs 6px inside the text above them. Measured
       at 390px: text at 16, tiles at 22, beats full-bleed at 0. Three edges
       where the page should have two, content and full-bleed.

       Declared here rather than reaching for --page-margin, which lives on
       .page-width-* and would resolve to its fallback at this level — the
       same trap that silently cost every desktop gutter 18px in August. */
    --strip-edge: 16px;
  }

  @media screen and (min-width: 750px) {
    .nether-strip { --strip-edge: var(--nether-gutter); }
  }

  /* NO centred measure here. The rail bleeds to the gutter, so a heading
     centred inside 34rem sat 59px to the right of the photographs it was
     labelling — three different left edges in one section (heading 81px,
     tiles 22px, swipe hint 59px). Everything shares the gutter on mobile;
     the desktop block re-centres head, rail and hint together at 62rem. */
  .nether-strip__head {
    padding-inline: var(--strip-edge);
    margin-block-end: var(--space-20);
  }

  .nether-strip__eyebrow {
    margin: 0 0 var(--space-8);
    font-size: var(--font-size-3xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.55);
  }

  .nether-strip__heading {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: rgb(0 0 0 / 0.87);
    text-wrap: balance;
  }

  /* THE RAIL. scroll-padding matches the inline padding so a snapped tile
     lands level with the heading above it instead of hard against the bezel. */
  .nether-strip__rail {
    display: flex;
    gap: var(--space-12);
    margin: 0;
    padding: 0 var(--strip-edge);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--strip-edge);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nether-strip__rail::-webkit-scrollbar { display: none; }

  /* Focusable, so the rail can be reached and scrolled with a keyboard. The
     ring only shows for keyboard users; a mouse click on a photo should not
     paint an outline around the whole row. */
  .nether-strip__rail:focus { outline: none; }

  .nether-strip__rail:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.6);
    outline-offset: 4px;
    border-radius: var(--radius-control, 6px);
  }

  .nether-strip__item {
    flex: 0 0 auto;
    inline-size: 62vw;
    max-inline-size: 20rem;
    scroll-snap-align: start;
  }

  .nether-strip__fig {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  /* A fixed frame, so a row of mixed portrait and landscape phone photos does
     not stagger. The archive is whatever shape it happens to be; the row
     should not be. */
  .nether-strip__img,
  .nether-strip__todo {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    background-color: #e8e4dd;
    border-radius: var(--radius-control, 6px);
  }

  .nether-strip__todo {
    display: grid;
    place-items: center;
    border: 1px dashed rgb(0 0 0 / 0.2);
  }

  .nether-strip__todo span {
    padding: 6px 12px;
    font-size: var(--font-size-3xs);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.5);
    text-align: center;
  }

  .nether-strip__cap {
    font-size: var(--font-size-2xs);
    line-height: var(--leading-ui);
    color: rgb(0 0 0 / 0.6);
    text-wrap: pretty;
  }

  .nether-strip__hint {
    margin: var(--space-12) 0 0;
    padding-inline: var(--strip-edge);
    font-size: var(--font-size-3xs);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.4);
  }

  html[data-theme='dark'] .nether-strip__eyebrow { color: rgb(255 255 255 / 0.55); }
  html[data-theme='dark'] .nether-strip__heading { color: #ffffff; }
  html[data-theme='dark'] .nether-strip__cap { color: rgb(255 255 255 / 0.6); }
  html[data-theme='dark'] .nether-strip__hint { color: rgb(255 255 255 / 0.4); }
  html[data-theme='dark'] .nether-strip__img,
  html[data-theme='dark'] .nether-strip__todo { background-color: #2f2f36; }
  html[data-theme='dark'] .nether-strip__todo { border-color: rgb(255 255 255 / 0.2); }

  /* Placed at the END of the sheet: media queries add no specificity, so an
     override written above its base rules loses to them. This build has found
     that mistake in three separate sections now. */
  /* ONE BEHAVIOUR AT EVERY WIDTH (owner 2026-08-29: "looks lame on desktop.
     mobile's aight … should be full width photos for the instagram feel").

     There was a grid here. It reflowed thirteen photographs into four columns
     inside a centred 62rem box, which turned an aside into a contact sheet
     with a ragged orphan row — and it threw away the one quality that makes
     the mobile version work, that you move through the archive one frame at a
     time rather than seeing all of it at once.

     So the rail stays a rail. Wider tiles, still bleeding to the page edge,
     still snapping. The only thing desktop changes is how much of the next
     photograph you can see. */
  @media screen and (min-width: 750px) {
    .nether-strip {
      padding-block: var(--space-48);
    }

    .nether-strip__item {
      inline-size: 26rem;
      max-inline-size: none;
    }

    .nether-strip__rail {
      gap: var(--space-16);
    }

    .nether-strip__cap {
      font-size: var(--font-size-xs);
    }

    /* A swipe instruction is for a touchscreen. */
    .nether-strip__hint { display: none; }
  }
/* END_SECTION:nether-process-strip */

/* START_SECTION:nether-review-summary (INDEX:40) */
.nether-rsum {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block-start: var(--section-gap);
  }

  /* CENTRED (owner 2026-08-22, later the same day: "this section should be
     center aligned").

     This reverses the note that stood here, which read "LEFT, not centred
     (owner 2026-08-22: all section headings left-aligned, reviews and founder
     are currently centred)" and argued that centring "was the one thing making
     this band read as a different system from the trio and stories rows either
     side of it".

     Both instructions are the owner's and the later one wins, but the earlier
     reasoning is kept because it names the real risk: this band now differs
     from its neighbours again. If it reads detached, the fix is to centre the
     trio and stories heads to match rather than to quietly flip this one
     back. */
  .nether-rsum__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
    max-inline-size: var(--page-width, 1520px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 20px);
  }

  /* Uppercase, matching every other section heading on the home page. */
  .nether-rsum__heading {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.02em);
    font-weight: var(--type-heading-lg-weight);  /* 2026-09-12: defers to the type scale (bold) instead of pinning 500. The "finish pass" that set every section heading to medium flattened the page - see typography-tokens. nether-also-consider never had this override and was already correct. */
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  /* One line: stars, score, count. Wraps on a narrow phone rather than
     shrinking the stars, which is what makes a rating row look cheap. */
  .nether-rsum__rating {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .nether-rsum__stars {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    /* Full ink. A rating is the one thing on the page that should not be
       subdued: it is the number a hesitant buyer came looking for. */
    color: var(--color-foreground);
  }

  .nether-rsum__star {
    inline-size: 18px;
    block-size: 18px;
    display: block;
  }

  .nether-rsum__score {
    font-weight: var(--font-weight-bold, 700);
  }

  .nether-rsum__count {
    opacity: 0.6;
  }
/* END_SECTION:nether-review-summary */

/* START_SECTION:nether-size-page (INDEX:41) */
/* Calculator. Sits between the chart and the gift module and borrows their
     type, so it reads as one more row of the same panel rather than a widget. */
  .nether-nsp__calc {
    margin-block-start: var(--space-xl);
  }

  /* THE SECOND IMPLEMENTATIONS THAT USED TO LIVE HERE ARE GONE (audit
     2026-08-23).

     This block hand-drew an input (border, radius, transparent fill, its own
     focus-within ring) and a button (fill, border, radius, padding, cursor,
     hover transition) out of raw tokens. Both already exist in the theme:
     Horizon ships .field / .field__input and .button, the contact form on
     /pages/contact uses them, and this very section's bottom CTA was using
     .button while the calculator beside it used neither.

     Building them again from tokens is not the same as inheriting them. The
     tokens are one layer below the components, so a hand-rolled control tracks
     the palette but stops tracking the theme editor's own input and button
     settings — border radius, button case, input background — and drifts the
     moment anyone touches those. Three input languages on one site was the
     result.

     The markup now carries .field / .field__input / .button, and only the
     LAYOUT those need is declared, at the end of this sheet. --minimum-touch-
     target is no longer forced either: the native components already meet it
     through --input-padding and --button-padding-block.

     .nether-nsp__calc-label survives because it is a caption, not a control. */
  .nether-nsp__calc-label {
    font-size: var(--font-size-sm);
    opacity: 0.6;
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-nsp__calc-go:hover {
      opacity: 0.85;
    }
  }

  .nether-nsp {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-nsp__inner {
    inline-size: 100%;
    max-inline-size: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 40px);
  }

  .nether-nsp__grid {
    display: grid;
    gap: clamp(28px, 4vw, 64px);
  }

  @media screen and (min-width: 750px) {
    .nether-nsp__grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      align-items: start;
    }

    .nether-nsp__media {
      position: sticky;
      top: calc(var(--header-height, 80px) + 24px);
    }
  }

  .nether-nsp__media {
    position: relative;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
  }

  .nether-nsp__img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .nether-nsp__img--placeholder {
    background:
      radial-gradient(120% 90% at 30% 20%, rgb(var(--color-foreground-rgb) / 0.08), transparent 60%),
      rgb(var(--color-foreground-rgb) / 0.05);
  }

  .nether-nsp__anno {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .nether-nsp__line {
    position: absolute;
    inset-inline: 8%;
    border-block-start: 1.5px dashed rgb(var(--color-foreground-rgb) / 0.55);
  }

  .nether-nsp__line--1 { inset-block-start: var(--nsp-line1, 42%); }

  .nether-nsp__badge {
    position: absolute;
    inset-inline-start: -4px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    background-color: var(--color-foreground);
    color: var(--color-background);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
  }

  .nether-nsp__badge--inline {
    position: static;
    transform: none;
    inline-size: 22px;
    block-size: 22px;
    flex-shrink: 0;
  }

  .nether-nsp__panel {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3vw, 32px);
  }

  .nether-nsp__eyebrow {
    margin: 0 0 var(--space-xs);
    opacity: 0.6;
  }

  .nether-nsp__chart-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }

  .nether-nsp__chart-title {
    margin: 0;
    font-size: var(--font-size-2xl, 28px);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight, -0.01em);
  }

  .nether-nsp__units {
    display: inline-flex;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-radius: var(--action-radius);
    padding: 3px;
    gap: 2px;
  }

  /* 44px minimum on both controls (punch list I-42). Measured at 390 these were
     56x25 / 66x25 and the jeans pills 46x36, under the theme's own
     --minimum-touch-target, which this file already honours twice. */
  .nether-nsp__unit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--minimum-touch-target, 44px);
    border: 0;
    background: none;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 5px 12px;
    border-radius: var(--action-radius);
    cursor: pointer;
  }

  .nether-nsp__unit.is-active {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  .nether-nsp__table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
  }

  .nether-nsp__table th {
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    /* --tracking-wide, not the raw 0.06em this carried: typography-tokens.liquid:69
       records -wider (0.06em) and -widest as retired, so 0.02em is the widest the
       system still offers. */
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    padding: 0 14px 10px 0;
  }

  .nether-nsp__table td {
    padding: 13px 14px 13px 0;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  .nether-nsp__size {
    font-weight: var(--font-weight-bold);
  }

  .nether-nsp__table tr.is-hit td {
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .nether-nsp__advisory {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / 0.75);
    max-inline-size: 48ch;
  }

  .nether-nsp__sub {
    margin: 0 0 var(--space-sm);
    opacity: 0.6;
  }

  .nether-nsp__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Step 2 is chart guidance, not a measurement, so it carries no numbered
     badge (the photo has one badge, and the numbers have to agree with it).
     22px inline badge + 12px gap keeps its text on the same left edge as step 1. */
  .nether-nsp__step--note {
    padding-inline-start: 34px;
  }

  .nether-nsp__step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / 0.8);
    max-inline-size: 52ch;
  }

  .nether-nsp__gift {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    padding-block-start: clamp(20px, 3vw, 28px);
  }

  .nether-nsp__gift-text {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .nether-nsp__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .nether-nsp__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--minimum-touch-target, 44px);
    min-block-size: var(--minimum-touch-target, 44px);
    padding: 9px 12px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-radius: var(--action-radius);
    background: none;
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: border-color var(--motion-quick) var(--ease-ui), background-color var(--motion-quick) var(--ease-ui);
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-nsp__pill:hover {
      border-color: rgb(var(--color-foreground-rgb) / 0.4);
    }
  }

  .nether-nsp__pill.is-active {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
  }

  .nether-nsp__gift-result {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }

  /* Centred (owner 2026-08-23). The flex row had no justification, so the
     button sat hard against the left rail under a chart that reads across the
     full width — it looked like a stray control rather than the close of the
     section. */
  .nether-nsp__cta {
    display: flex;
    justify-content: center;
  }

  /* ====================================================================
     THE FINDER CARD (owner 2026-08-23: "the calculator should be right at
     the top... it feels nice and looks like it's actually gonna solve this
     size issue and just create trust. Right now it just kinda looks like a
     page").

     APPENDED AT THE END OF THE SHEET DELIBERATELY. Several rules here
     re-declare properties set on .nether-nsp__calc, __gift and __pills
     further up. A media query carries no specificity of its own, and neither
     does intent — at equal selector weight the later rule simply wins, so
     anything meant to override has to physically follow what it overrides.
     The founder section lost an afternoon to exactly this on the same day.
     ==================================================================== */

  .nether-nsp__finder {
    /* A RAISED SURFACE, not another band of page. The whole complaint was
       that this read as a document, and the one thing a document never has is
       a panel that looks operable. Hairline plus a lifted fill is the site's
       card language (see the reviews carousel): no elevation, no shadow. */
    background: var(--color-background);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
    border-radius: var(--radius-card, 12px);
    padding: clamp(20px, 4vw, 36px);
    margin-block-end: clamp(36px, 6vw, 64px);
  }

  .nether-nsp__finder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-block-end: var(--space-xs);
  }

  .nether-nsp__finder-title {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-nsp__finder-lede {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-md);
    opacity: 0.7;
    max-inline-size: 46ch;
  }

  /* First thing in the card now, so it has no heading above it to clear. */
  .nether-nsp__calc {
    margin-block-start: 0;
  }

  /* ===== THE FIELDS ====================================================
     Roomier than they were. These used to be one row of a dense reference
     panel; they are now the primary interaction on the page, and a control
     that looks worth typing into is most of what makes this card read as a
     tool rather than as a form. */
  /* The wrapper is now a LABEL STACK, not a drawn control: caption above, the
     native .field below. The input carries .field__input, so its fill, radius,
     inset shadow and focus ring come from --color-input-background,
     --style-border-radius-inputs and --input-box-shadow-focus — the same
     values every other input on the site uses, including the contact form on
     /pages/contact.

     It used to draw its own pill border around the whole row and leave the
     input transparent inside it, which is why this control looked like nothing
     else on the site: it was a third input language, after Horizon's and the
     cart's.

     flex-basis 8rem, down from 10: at 8 the two fields still sit side by side
     on a 375px phone instead of stacking, which keeps waist and weight legible
     as ONE question with two parts. */
  .nether-nsp__calc-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1 1 8rem;
    align-items: stretch;
    border: 0;
    padding-inline: 0;
    min-block-size: 0;
  }

  /* The unit sits INSIDE the native field, pinned to its trailing edge, with
     the input padded to clear it. Absolute rather than a flex sibling so it
     cannot shrink the input's own hit area. */
  .nether-nsp__calc-field .field {
    position: relative;
    align-items: center;
  }

  .nether-nsp__calc-input {
    padding-inline-end: 3.25rem;
    font-variant-numeric: tabular-nums;
  }

  .nether-nsp__calc-unit {
    position: absolute;
    inset-inline-end: var(--space-sm);
    inset-block-start: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.55;
    font-size: var(--font-size-sm);
  }

  /* The button takes its own line under the fields on a phone. Squeezed in
     beside them it was a third of a row wide and read as a chevron. */
  /* ===== THE ANSWER ====================================================
     The payoff. Everything above it is the page asking; this is the page
     delivering, so it is allowed to be the loudest thing in the card. */
  /* [hidden] MUST WIN (bug found 2026-08-23).

     `display: flex` below is an AUTHOR rule; the [hidden] attribute is honoured
     by a UA rule. Author beats UA, so the answer card rendered PERMANENTLY —
     on screen at page load with an empty size and a blank white button, which
     is what the owner photographed in dark mode.

     It was missed in verification because the check read `element.hidden`, the
     attribute, which was correctly true the whole time. The attribute was set;
     the element was simply still displayed. Any element here toggled by
     [hidden] and given a display of its own needs this guard. */
  .nether-nsp__answer[hidden],
  .nether-nsp__answer-prompt[hidden],
  .nether-nsp__submit[hidden] {
    display: none;
  }

  /* The submit control. Full width so it reads as the end of the question
     rather than as one more thing beside the dials. */
  .nether-nsp__submit {
    inline-size: 100%;
    margin-block-start: var(--space-md);
  }

  .nether-nsp__answer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-block-start: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-card, 12px);
    /* Tonal, not white on white: the answer has to separate from the card it
       appears inside, and a tint does that without drawing a second border
       parallel to the one an inch away. */
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .nether-nsp__answer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-inline-size: 88px;
    padding-inline-end: var(--space-md);
    border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  }

  .nether-nsp__answer-label {
    margin: 0;
    opacity: 0.55;
  }

  /* Display scale, deliberately. The size IS the answer; at body size it read
     as one more line of a paragraph, which is what made a calculator that had
     worked correctly feel like it had not done anything. */
  .nether-nsp__answer-size {
    margin: 0;
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-nsp__answer-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    flex: 1 1 12rem;
    min-inline-size: 0;
  }

  /* The working. Tabular figures so the two bands align on the digit rather
     than shimmering against each other. */
  .nether-nsp__answer-bands {
    margin: 0;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }

  .nether-nsp__answer-note {
    margin: 0;
    font-size: var(--font-size-xs);
    opacity: 0.65;
    max-inline-size: 44ch;
  }

  /* Carries .button, so fill, radius, padding, type case and the hover
     transition all come from the theme's own button component. This rule is
     only the LAYOUT the card needs around it.

     It used to redeclare every one of those properties off the --action-*
     tokens by hand. That is a second button implementation: correct on the day
     it was written, and silently wrong the next time the button settings are
     touched in the theme editor, because nothing here is listening to them.
     The section's own bottom CTA was already using .button, so the page had
     two different buttons claiming to be the same thing. */
  .nether-nsp__answer-cta {
    margin-block-start: var(--space-xs);
  }

  /* Corrections, not answers. Quiet, and never dressed as the card above. */
  /* ===== THE SECOND ROUTE ==============================================
     Ruled off rather than boxed. A second card inside the card would say the
     two routes are equals, and they are not: the tape is the answer, this is
     the fallback for someone who has not got one. */
  .nether-nsp__gift {
    margin-block-start: var(--space-lg);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .nether-nsp__gift-title {
    margin: 0;
    opacity: 0.7;
  }

  .nether-nsp__gift-text {
    margin: var(--space-xs) 0 var(--space-sm);
    font-size: var(--font-size-sm);
    opacity: 0.65;
  }

  /* The pills scroll rather than wrap. Seven of them breaking to two ragged
     rows on a phone looked like a layout bug; one row that slides is a
     control, and it matches how the trio rail behaves a page away. */
  .nether-nsp__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: 2px;
  }

  .nether-nsp__pills::-webkit-scrollbar {
    display: none;
  }

  .nether-nsp__pill {
    flex: 0 0 auto;
  }

  /* The way down to the evidence. A link, not a button: it is a shortcut for
     the curious, not a step in the flow. */
  .nether-nsp__finder-more {
    display: inline-block;
    margin-block-start: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-nsp__finder-more:hover {
      opacity: 1;
    }
  }

  /* The chart is no longer the lead, so its heading steps down to match its
     new rank. */
  .nether-nsp__chart-title {
    font-size: var(--font-size-lg);
  }

  /* ===== MOBILE ========================================================
     The same cap that boxed the founder band in: --media-width resolves to
     min(100vw - 80px, 2200px), so the 40px in it is a desktop gutter that
     never shrinks and the whole section sat 295px wide and floating on a
     375px phone. Measured in the browser, not guessed (2026-08-23). */
  @media screen and (max-width: 749px) {
    .nether-nsp__inner {
      max-inline-size: none;
      margin-inline: 0;
    }

    /* The answer stacks. At 375px the divider rule plus a 12rem body could not
       share a line with the size, so the one glyph that matters was the thing
       getting squeezed. */
    .nether-nsp__answer-main {
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--space-xs);
      inline-size: 100%;
      padding-inline-end: 0;
      border-inline-end: 0;
    }

    .nether-nsp__answer-cta {
      inline-size: 100%;
    }
  }
  /* ====================================================================
     THE DIALS. Value-as-input, slider under it (owner 2026-08-23).
     ==================================================================== */
  .nether-nsp__dials {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-md);
  }

  @media screen and (min-width: 600px) {
    .nether-nsp__dials {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-xl);
    }
  }

  .nether-nsp__dial-label {
    display: block;
    font-size: var(--font-size-sm);
    opacity: 0.6;
  }

  .nether-nsp__dial-readout {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-block: var(--space-xs) var(--space-xs);
  }

  /* The number IS the control, so it is typeset like a heading and carries no
     box at all until it is focused. A field that looks like a field invites
     you to fill in a form; a number this size invites you to change it. */
  .nether-nsp__dial-num {
    inline-size: 4.5ch;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-foreground-heading, var(--color-foreground));
    font-family: inherit;
    /* Up one step, 3xl -> 4xl (owner 2026-08-23: "still looks slightly too
       small for the dials"). These are the largest thing in the card by
       intent: the number is the control, so it has to out-weigh the label
       above it and the slider below it rather than sit between them. */
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    text-align: start;
  }

  /* Stands in for the answer card until a dial is touched. Quiet on purpose:
     it is an instruction, and an instruction styled like a result would be the
     prefilled answer problem in a different costume. */
  .nether-nsp__answer-prompt {
    margin: var(--space-md) 0 0;
    font-size: var(--font-size-sm);
    opacity: 0.55;
  }

  /* Tabular figures above mean the width never jumps between 9 and 11, so the
     unit beside it stays put while the slider moves. */
  .nether-nsp__dial-num:focus {
    outline: none;
    box-shadow: 0 2px 0 0 var(--color-foreground);
  }

  .nether-nsp__dial-unit {
    font-size: var(--font-size-md);
    opacity: 0.5;
  }

  /* ===== THE SLIDER ====================================================
     A hairline rule with a small solid handle, not the platform's rounded
     grey capsule. The default control is the single strongest "this is a
     plugin" tell available, and it is also the easiest to replace: the track
     is one border-colour rule and the thumb is one circle. */
  .nether-nsp__range {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
    background: none;
    /* Tall enough to hit with a thumb even though the track it draws is 2px.
       The hit area and the drawn line are deliberately different sizes: the
       line is the design, the padding is the ergonomics. */
    block-size: var(--minimum-touch-target, 44px);
    margin: 0;
    cursor: pointer;
    --nsp-fill: 0%;
  }

  .nether-nsp__range:focus {
    outline: none;
  }

  .nether-nsp__range:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-foreground);
    outline-offset: 4px;
    border-radius: var(--radius-control);
  }

  /* The filled portion is painted by a gradient stop the script moves, so the
     part behind the handle reads as travelled and the part ahead as remaining.
     A range input cannot express its own progress in CSS. */
  .nether-nsp__range::-webkit-slider-runnable-track {
    block-size: 2px;
    border-radius: 2px;
    background:
      linear-gradient(to right,
        var(--color-foreground) 0 var(--nsp-fill),
        rgb(var(--color-foreground-rgb) / 0.18) var(--nsp-fill) 100%);
  }

  .nether-nsp__range::-moz-range-track {
    block-size: 2px;
    border-radius: 2px;
    background:
      linear-gradient(to right,
        var(--color-foreground) 0 var(--nsp-fill),
        rgb(var(--color-foreground-rgb) / 0.18) var(--nsp-fill) 100%);
  }

  .nether-nsp__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 20px;
    block-size: 20px;
    border-radius: var(--radius-pill);
    background: var(--color-foreground);
    border: 0;
    /* Centres the handle on a 2px track: half the handle minus half the track. */
    margin-block-start: -9px;
    transition: transform var(--motion-quick) var(--ease-ui);
  }

  .nether-nsp__range::-moz-range-thumb {
    inline-size: 20px;
    block-size: 20px;
    border-radius: var(--radius-pill);
    background: var(--color-foreground);
    border: 0;
    transition: transform var(--motion-quick) var(--ease-ui);
  }

  .nether-nsp__range:active::-webkit-slider-thumb {
    transform: scale(1.15);
  }

  .nether-nsp__range:active::-moz-range-thumb {
    transform: scale(1.15);
  }

  /* ===== THE UNIT LINK =================================================
     Replaces the segmented pill toggle. A preference most visitors never
     change does not deserve the second-loudest slot in the card. */
  .nether-nsp__unitlink {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    opacity: 0.6;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-nsp__unitlink:hover {
      opacity: 1;
    }
  }

  /* ====================================================================
     FINDER POLISH PASS (owner 2026-08-23 critique, items 2-7).

     Appended last so every rule here outranks the earlier ones it revises.
     ==================================================================== */

  /* --- 7. THE CARD EARNS ITS EDGE, or loses it -----------------------
     Was a 1px hairline around a full-width panel, which is chrome drawn
     around something that is already the whole column. Replaced with a
     SURFACE: a tint a step off the page ground, no border. The card is now
     legible as a distinct plane rather than as an outline. */
  .nether-nsp__finder {
    border: 0;
    background: rgb(var(--color-foreground-rgb) / 0.035);
    padding: clamp(18px, 4.5vw, 28px);
    margin-block-end: clamp(28px, 5vw, 48px);
  }

  /* --- 5/6. THE UNIT SWITCH IS A CONTROL, NOT A LINK -----------------
     It read as a third underlined link beside "Size chart & how to
     measure", so neither looked like the thing it was. The secondary
     navigation keeps the underline; this becomes a small pill that looks
     pressable and sits right-aligned to the heading. */
  .nether-nsp__finder-head {
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-sm);
  }

  .nether-nsp__unitlink {
    padding: 6px 12px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-background);
    color: var(--color-foreground);
    opacity: 1;
    text-decoration: none;
    font-size: var(--font-size-xs);
    line-height: var(--leading-none);
    white-space: nowrap;
    transition: background-color var(--motion-quick) var(--ease-ui);
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-nsp__unitlink:hover {
      background: rgb(var(--color-foreground-rgb) / 0.06);
      opacity: 1;
    }
  }

  /* The instruction, above the controls it describes. */
  .nether-nsp__hint {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-sm);
    opacity: 0.6;
  }

  /* --- 2. SMALLER NUMBERS, TIGHTER STACK -----------------------------
     4xl (44px) was near-display size for a value that is read, adjusted and
     moved past — two of them plus their tracks pushed the answer off the
     fold. Down two steps to xl, and every gap in the stack roughly halved,
     so the whole widget and its result fit one screen. */
  .nether-nsp__dials {
    gap: var(--space-md);
    margin-block-start: 0;
  }

  @media screen and (min-width: 600px) {
    .nether-nsp__dials {
      gap: var(--space-lg);
    }
  }

  .nether-nsp__dial-label {
    font-size: var(--font-size-xs);
    opacity: 0.55;
  }

  .nether-nsp__dial-num {
    display: block;
    margin-block: 2px 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    /* 175 and lb were wrapping to two lines at the old size. */
    white-space: nowrap;
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  /* --- 3. SLIDERS THAT LOOK DRAGGABLE --------------------------------
     A hairline with a dot reads as a progress indicator, not a control.
     4px track, the travelled portion filled solid, a 22px thumb with a
     soft shadow and a ring so it sits ON the track rather than in it. The
     44px tap target stays: the hit area and the drawn control are
     deliberately different sizes. */
  .nether-nsp__range {
    block-size: var(--minimum-touch-target, 44px);
    margin-block: 4px 0;
  }

  .nether-nsp__range::-webkit-slider-runnable-track {
    block-size: 4px;
    border-radius: var(--action-radius); /* was a hardcoded 999px; now the house pill */
    background:
      linear-gradient(to right,
        var(--color-foreground) 0 var(--nsp-fill),
        rgb(var(--color-foreground-rgb) / 0.14) var(--nsp-fill) 100%);
  }

  .nether-nsp__range::-moz-range-track {
    block-size: 4px;
    border-radius: var(--action-radius); /* was a hardcoded 999px; now the house pill */
    background:
      linear-gradient(to right,
        var(--color-foreground) 0 var(--nsp-fill),
        rgb(var(--color-foreground-rgb) / 0.14) var(--nsp-fill) 100%);
  }

  .nether-nsp__range::-webkit-slider-thumb {
    inline-size: 22px;
    block-size: 22px;
    /* Centres a 22px thumb on a 4px track. */
    margin-block-start: -9px;
    background: var(--color-foreground);
    box-shadow:
      0 1px 3px rgb(0 0 0 / 0.28),
      0 0 0 3px var(--color-background);
  }

  .nether-nsp__range::-moz-range-thumb {
    inline-size: 22px;
    block-size: 22px;
    background: var(--color-foreground);
    box-shadow:
      0 1px 3px rgb(0 0 0 / 0.28),
      0 0 0 3px var(--color-background);
  }

  /* The ends of the range, so its span is legible without dragging to find
     out. Tabular so the two never jitter against each other. */
  .nether-nsp__dial-ends {
    display: flex;
    justify-content: space-between;
    margin: -6px 0 0;
    font-size: var(--font-size-2xs, 0.6875rem);
    font-variant-numeric: tabular-nums;
    opacity: 0.45;
  }

  /* --- The answer, tightened to match ------------------------------- */
  .nether-nsp__answer {
    gap: var(--space-sm);
    margin-block-start: var(--space-md);
    padding: var(--space-sm) var(--space-md);
  }

  .nether-nsp__answer-size {
    font-size: var(--font-size-3xl);
  }

  .nether-nsp__answer-main {
    min-inline-size: 0;
    padding-inline-end: var(--space-sm);
  }

  /* --- 6. THE SECONDARY ACTION KEEPS ITS UNDERLINE ------------------- */
  .nether-nsp__finder-more {
    margin-block-start: var(--space-md);
    font-size: var(--font-size-sm);
  }

  @media screen and (max-width: 749px) {
    /* The answer's divider rule has nothing to divide once the size and the
       label stack, so it goes and the row closes up. */
    .nether-nsp__answer-main {
      padding-inline-end: 0;
      gap: var(--space-xs);
    }
  }

  /* ====================================================================
     SIZE CALCULATOR v2 (owner spec, 2026-08-23).

     Appended last so it outranks every earlier revision of these rules.
     Tokens throughout — the two values the scale did not have (10px, and
     0.08em tracking for micro-caps) were added to typography-tokens rather
     than written here as literals.
     ==================================================================== */

  /* --- STRUCTURE: one surface, one left rail ------------------------- */
  .nether-nsp__finder {
    background: none;
    border: 0;
    padding: 0;
    margin-block-end: clamp(28px, 5vw, 48px);
  }

  /* Every element on the same rail. The result block used to carry its own
     padding, which put its contents on a second, inset rail. */
  .nether-nsp__finder-head,
  .nether-nsp__hint,
  .nether-nsp__dials,
  .nether-nsp__answer,
  .nether-nsp__finder-more {
    padding-inline: 0;
  }

  /* --- LABELS: HEIGHT / WEIGHT / YOUR SIZE --------------------------- */
  .nether-nsp__dial-label,
  .nether-nsp__answer-label {
    display: block;
    margin: 0;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-ui);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  .nether-nsp__dial-ends {
    font-size: var(--font-size-3xs);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.4);
    opacity: 1;
  }

  /* --- VALUES -------------------------------------------------------- */
  .nether-nsp__dial-num {
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tighter);
    font-variant-numeric: tabular-nums;
  }

  /* --- SLIDER -------------------------------------------------------- */
  .nether-nsp__range::-webkit-slider-runnable-track,
  .nether-nsp__range::-moz-range-track {
    block-size: 4px;
    border-radius: var(--radius-pill, 999px);
  }

  /* NO SEAM AT THE THUMB JUNCTION. The thumb used to carry a 3px ring in the
     page colour, which cut a visible notch through the track it sits on. The
     ring is gone and the shadow does the lifting instead. */
  .nether-nsp__range::-webkit-slider-thumb {
    inline-size: 24px;
    block-size: 24px;
    margin-block-start: -10px;
    border: 0;
    background: var(--color-foreground);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
  }

  .nether-nsp__range::-moz-range-thumb {
    inline-size: 24px;
    block-size: 24px;
    border: 0;
    background: var(--color-foreground);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
  }

  /* --- RESULT BLOCK -------------------------------------------------- */
  .nether-nsp__answer {
    display: block;
    background: none;
    border-radius: 0;
    padding: var(--space-lg) 0 0;
    margin-block-start: var(--space-lg);

    /* Full-bleed hairline, MEASURED not assumed (2026-09-02).
       --nether-gutter is 22px, but this block sits inside .nether-nsp__calc,
       which is only inset 16px from a 375px screen. Pulling 22 broke out 6px
       past the viewport on each side: the document measured 387px against a
       375px window, and the whole page could be dragged sideways (owner:
       "able to drag and expand it past the actual page").

       50% - 50vw measured the real inset instead of naming it. It was still
       wrong, for a reason its own comment ruled out: "Safe here because this
       rule lives inside the max-width: 749px query, where there is no scrollbar
       to make 100vw wider than the visible page."

       THAT PRECONDITION WAS NEVER TRUE. Checked by walking the brace depth on
       2026-09-12: this rule sits at the top level of the stylesheet, inside no
       media query at all. So it evaluated 50vw wherever a scrollbar exists, and
       vw includes the scrollbar while the content box does not — the element
       measured 390px wide at left -5 in a 380px content area, overshooting by
       exactly half a scrollbar on each side and making the page draggable
       sideways by 5px. Which is the SECOND time this element has done this;
       the paragraph above records the first, at 6px, from naming 22px directly.

       So the vw dependency is gone rather than re-fenced. The bleed is now
       exactly the container's own padding, negated: .nether-nsp__inner pads by
       --page-margin and every element between it and this one has zero margin
       and padding (measured), so pulling back --page-margin lands flush with
       that container's content edge and cannot depend on a scrollbar, a
       viewport unit, or which media query the rule happens to be in.

       On a phone that edge IS the viewport edge, which is the original intent.
       On desktop it is the centred container's edge, which is the correct
       reading of "full bleed" inside a max-width layout — the previous version
       would have tried to reach the window there. */
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    margin-inline: calc(var(--page-margin, 40px) * -1);
    padding-inline: var(--page-margin, 40px);
  }

  /* THE LOCKUP STACKS. Label on its own line, letter beneath, both flush
     left — never side by side. */
  .nether-nsp__sizes {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin: var(--space-xs) 0 0;
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
  }

  /* UNTOUCHED: every size, muted, at the final optical size. Reserving the
     height here is what makes resolve a change of emphasis instead of a
     block appearing and shifting the page. */
  .nether-nsp__letter {
    color: rgb(var(--color-foreground-rgb) / 0.22);
    /* max-inline-size, not width: it collapses cleanly to nothing and is
       animatable, so the letters before the match closing up is what carries
       the matched one to the rail. */
    max-inline-size: 3ch;
    overflow: hidden;
    transition:
      opacity var(--motion-panel) var(--ease-ui),
      max-inline-size var(--motion-panel) var(--ease-ui),
      margin-inline-end var(--motion-panel) var(--ease-ui),
      color var(--motion-panel) var(--ease-ui);
  }

  .nether-nsp__answer.is-resolved .nether-nsp__letter {
    opacity: 0;
    max-inline-size: 0;
    margin-inline-end: calc(var(--space-sm) * -1);
  }

  .nether-nsp__answer.is-resolved .nether-nsp__letter.is-match {
    opacity: 1;
    max-inline-size: 3ch;
    margin-inline-end: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  /* Reduced motion: the state still changes, it just does not travel. */
  @media (prefers-reduced-motion: reduce) {
    .nether-nsp__letter {
      transition: none;
    }
  }

  /* --- COPY ---------------------------------------------------------- */
  /* RESERVED, NOT REMOVED. The hidden attribute takes the line out of flow,
     so the block grew 27px on resolve — measured — which is the layout shift
     the spec asks this block to avoid. visibility keeps the box and its
     height while hiding the words. */
  .nether-nsp__answer-note {
    visibility: hidden;
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / 0.55);
    max-inline-size: none;
    opacity: 1;
  }

  .nether-nsp__answer-note.is-shown {
    visibility: visible;
  }

  /* --- CTA: same box in both states ---------------------------------- */
  .nether-nsp__answer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-block-start: var(--space-md);
    min-block-size: var(--action-height);
    padding-inline: var(--action-padding-inline);
    border-radius: var(--radius-pill, 999px);
    font-size: var(--action-size);
    font-weight: var(--action-weight);
    letter-spacing: var(--action-tracking);
    text-decoration: none;

    /* Untouched: outlined. The border is INSET rather than a real border so
       the box is the identical size in both states and the fill swap moves
       nothing. */
    background-color: transparent;
    color: var(--color-foreground);
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.35);
    transition:
      background-color var(--motion-quick) var(--ease-ui),
      color var(--motion-quick) var(--ease-ui),
      box-shadow var(--motion-quick) var(--ease-ui);
  }

  .nether-nsp__answer-cta.is-resolved {
    background-color: var(--color-foreground);
    color: var(--color-background);
    box-shadow: inset 0 0 0 1px var(--color-foreground);
  }

  @media screen and (max-width: 749px) {
    .nether-nsp__answer-cta {
      inline-size: 100%;
    }
  }

  /* ====================================================================
     RESULT BLOCK v3 (owner 2026-08-23, after seeing v2 on device).

     Three changes: the pending size row goes, the answer centres, and the
     block stops reserving a screenful for one letter.
     ==================================================================== */

  /* The letter row is retired. These rules are neutralised rather than
     deleted so that anything still carrying the class cannot inherit a
     half-applied state. */
  .nether-nsp__sizes,
  .nether-nsp__letter {
    display: none;
  }

  /* --- THE RESULT AREA ----------------------------------------------
     CENTRED (owner: "it's up in the top left corner... it should be in the
     middle"), and no longer holding a whole screen open. The block used to
     reserve the height of a 44px letter row plus its margins even when
     empty; the slot now reserves exactly one line of the size and nothing
     more, which is all that is needed to keep resolve shift-free. */
  .nether-nsp__answer {
    text-align: center;
    padding-block: var(--space-md) 0;
    margin-block-start: var(--space-md);
  }

  .nether-nsp__answer-label {
    text-align: center;
  }

  .nether-nsp__result {
    /* One line of the size, reserved whether or not there is a size in it.
       min-block-size rather than a fixed height so a two-character size
       (XL, XXL) cannot clip. */
    display: block;
    min-block-size: 1em;
    margin: var(--space-xs) 0 0;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-nsp__answer-note {
    margin-block-start: var(--space-xs);
    text-align: center;
  }

  .nether-nsp__answer-cta {
    margin-block-start: var(--space-md);
  }

  /* The way into the evidence stays left, on the page rail — it belongs to
     the page, not to the centred answer. */
  .nether-nsp__finder-more {
    display: block;
    text-align: start;
  }

  /* ===================================================================
     THE ANSWER IS THE CHART (2026-08-26)

     Built from the concept canvas the owner picked: the dial half of
     direction A over the chart half of direction C. Appended as a final
     layer rather than edited into the blocks above, because those blocks
     record decisions that are still true for everything except the
     result area.
     =================================================================== */

  /* LEFT, not centred. Centring was right when the result was a lone
     letter floating in a wide empty block. It is wrong now: a centred
     sentence sitting on top of a full-width table reads as two elements
     that were laid out by different people. */
  .nether-nsp__answer {
    text-align: start;
    margin-block-start: var(--space-24);
    padding-block: var(--space-24) 0;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.12);
  }

  .nether-nsp__result {
    text-align: start;
    /* One line reserved so resolve is a change of text, not a block
       appearing and shoving the chart down. */
    min-block-size: 1lh;
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight-ui, 1.2);
    letter-spacing: var(--tracking-tight);
  }

  /* TWO lines reserved, not one. The note is no longer a fixed string:
     "Comfortably inside M." is one line, "Near the bottom of XXL - take XL
     for a closer fit." is two on a phone. Reserving one line would let the
     chart jump a line-height as the visitor drags across a boundary. */
  .nether-nsp__answer-note {
    text-align: start;
    min-block-size: 2lh;
    margin-block-start: var(--space-8);
  }

  /* --- THE CHART, IN THE ANSWER -------------------------------------- */
  .nether-nsp__table--answer {
    /* separate, not collapse: a collapsed table cannot carry a radius on
       the matched row, and the filled row is the whole point. */
    border-collapse: separate;
    border-spacing: 0;
    margin-block-start: var(--space-20);
    table-layout: fixed;
  }

  .nether-nsp__table--answer th {
    font-size: var(--font-size-3xs);
    letter-spacing: var(--tracking-micro-caps);
    color: rgb(var(--color-foreground-rgb) / 0.45);
    padding: 0 0 var(--space-8) 0;
  }

  .nether-nsp__table--answer td {
    padding: var(--space-12) 0;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  .nether-nsp__table--answer th:first-child,
  .nether-nsp__table--answer td:first-child {
    inline-size: 56px;
  }

  .nether-nsp__table--answer th:last-child,
  .nether-nsp__table--answer td:last-child {
    text-align: end;
  }

  /* THE MATCHED ROW. Filled rather than washed: at 5% the old highlight
     was a tint you had to look for, and this row is the answer. Inverting
     against the page ground means it reads the same way in both themes
     without a second rule. */
  .nether-nsp__table--answer tr.is-hit td {
    background-color: var(--color-foreground);
    color: var(--color-background);
    border-block-start-color: transparent;
    padding-block: var(--space-16);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
  }

  .nether-nsp__table--answer tr.is-hit td:first-child {
    border-start-start-radius: var(--radius-card);
    border-end-start-radius: var(--radius-card);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
  }

  .nether-nsp__table--answer tr.is-hit td:last-child {
    border-start-end-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
  }

  /* Full width, because it is the only action left on the page. */
  .nether-nsp__answer-cta {
    display: flex;
    inline-size: 100%;
    margin-block-start: var(--space-20);
  }

  /* DARK MODE DOES NOT INVERT THIS ROW (owner 2026-08-26: "the dark mode flip
     doesn't look good on the chart itself getting highlighted").

     var(--color-foreground) is white under a dark theme, so the matched row
     was painting as a full-white slab on a #161619 page. That is the same
     contrast ratio as the light-mode treatment and nothing like the same
     visual weight: dark ink on a light ground reads as emphasis, a white block
     on a dark ground reads as a hole punched through the page — and it pulled
     harder than the answer sentence above it, which is the one thing on this
     screen that should lead.

     Dark mode uses the palette's own elevation instead. surface-3 is the step
     the token file reserves for inputs sitting on a raised surface, which is
     what this row now is. The row is marked by being LIFTED, by holding full
     white text where its neighbours hold 50%, and by the radius it already
     had — not by inverting. */
  html[data-theme='dark'] .nether-nsp__table--answer tr.is-hit td {
    background-color: var(--nether-dark-surface-3, #2f2f36);
    color: #ffffff;
  }

  /* The standing advisory, under the chart. Sized and toned like the note
     above the chart so the two read as the same register of guidance, and
     given real space above it so it does not crowd the last chart row. */
  .nether-nsp__answer-advice {
    margin: var(--space-16) 0 0;
    font-size: var(--font-size-sm);
    line-height: var(--leading-ui);
    color: rgb(var(--color-foreground-rgb) / 0.55);
    text-align: start;
  }

  /* The explanation line under the verdict is gone (see the markup), so the
     two lines it was reserving go with it and the chart moves up under the
     verdict. Kept as a rule rather than deleted above so the earlier block
     still reads as the record of why 2lh was reserved at the time. */
  .nether-nsp__answer-note {
    display: none;
  }

  .nether-nsp__table--answer {
    margin-block-start: var(--space-16);
  }

  /* THE UNIT LINK STOPS MOVING (owner 2026-08-26: "inches/kg cm button thing
     moves from top right to under the label after clicking", "on mobile the
     cm/kg thing gets broken").

     The two labels were different lengths: "Use cm and kg" measured 111px and
     "Use inches and pounds" 159px. The head is a space-between flex row that
     is allowed to wrap, so the extra 48px shunted the link left on desktop and
     pushed it onto its own line under the title on a phone. A control that
     relocates when you press it reads as breakage, which is what it was.

     Fixed at the copy first: both labels are now the same short shape, and it
     is the vocabulary this page already used when the chart carried its own
     in/lb and cm/kg buttons. min-inline-size holds the box steady on top of
     that, so no font fallback can reintroduce the jump. */
  .nether-nsp__unitlink {
    /* 8em clears the wider of the two labels ("Use cm / kg" measures 94px at
       12px) so BOTH clamp to the same box and neither edge moves. */
    min-inline-size: 8em;
    text-align: end;
  }

  .nether-nsp__finder-head {
    flex-wrap: nowrap;
    gap: var(--space-12);
  }

  /* ONE CENTRED COLUMN ON DESKTOP (owner 2026-08-26: "it looks lame on
     desktop... padding is off").

     This section was laid out when the page carried a two-column evidence grid
     beside it. That grid is gone, so the finder was the only thing left and it
     inherited the full page rail: at 1440px the sliders, the chart and the
     Shop button were each 1340px wide. A 1340px slider is not a control, it is
     a horizon, and a 1340px pill button looks like a mistake.

     A calculator is a form. Forms get a measure. 36rem keeps the three chart
     columns comfortable without the weight and price columns drifting to
     opposite ends of the screen. */
  @media screen and (min-width: 750px) {
    .nether-nsp__finder {
      max-inline-size: 36rem;
      margin-inline: auto;
    }

    /* The full-bleed hairline is a phone device: it cancels the page gutter so
       the rule runs edge to edge. On a centred column there is no edge to run
       to, and the bleed just made the rule overhang its own content by the
       gutter on both sides. The column IS the measure here, so the rule
       matches it. */
    .nether-nsp__answer {
      margin-inline: 0;
      padding-inline: 0;
    }
  }
/* END_SECTION:nether-size-page */

/* START_SECTION:nether-stories (INDEX:42) */
.nether-stories {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-stories__inner {
    inline-size: 100%;
    max-inline-size: var(--media-width, var(--page-width, 1520px));
    margin-inline: auto;
    padding-inline: var(--nether-gutter);
  }

  /* Heading and the view-all link sit on ONE line, the link small and beside the
     heading rather than under it. That inline pairing is most of why the
     reference row reads quiet instead of like a promoted module. */
  .nether-stories__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-block-end: var(--space-lg);
  }

  /* Uppercase, matching the other home section headings (owner 2026-08-22:
     "fix What customers are saying and Latest stories"). */
  .nether-stories__heading {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.02em);
    font-weight: var(--type-heading-lg-weight);  /* 2026-09-12: defers to the type scale (bold) instead of pinning 500. The "finish pass" that set every section heading to medium flattened the page - see typography-tokens. nether-also-consider never had this override and was already correct. */
    color: var(--color-foreground-heading, var(--color-foreground));
  }

  .nether-stories__viewall {
    color: var(--color-foreground);
    opacity: 0.6;
    text-decoration: underline;
    text-underline-offset: 0.2em; /* em, not px: one offset for every text link */
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-stories__viewall:hover {
      opacity: 1;
    }
  }

  .nether-stories__rail-wrap {
    position: relative;
  }

  .nether-stories__rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(16px, 2vw, 28px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Let the rail bleed to the gutter edge so a partial card is visible at the
       right, which is the scroll affordance. */
    scroll-padding-inline-start: 0;
  }

  .nether-stories__rail::-webkit-scrollbar {
    display: none;
  }

  /* A partial next card is deliberate at every width: it is what tells a reader
     the row continues. */
  .nether-stories__item {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  @media screen and (min-width: 750px) {
    .nether-stories__item {
      flex-basis: 46%;
    }
  }

  @media screen and (min-width: 990px) {
    .nether-stories__item {
      flex-basis: 32%;
    }
  }

  .nether-stories__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .nether-stories__media {
    /* Positioning context for the hover reveal. */
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-media, 6px);
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
  }

  /* =========================================================
     THE HOVER REVEAL — the panel that covers the photograph.

     Built on the same no-timer architecture as snippets/nether-photo-credit
     (2026-08-22): CSS owns every millisecond, and `visibility` carries the
     delay. visibility is discretely animatable, so `visibility 0s linear
     <duration>` holds the panel in the accessibility tree and out of the
     pointer's way until the fade has finished, then flips it in one step. That
     replaces the setTimeout the naive version of this needs, and it cannot
     desynchronise from the transition because it IS the transition.

     Opacity AND transform, not just opacity: a panel that only fades reads like
     a bug on a photograph, because the photo is still visible through it at
     every intermediate frame. Rising 10px while it fades makes it read as a
     thing arriving.

     The fill is --color-background rather than white so the panel follows the
     dark scheme on the home page instead of flashing a white rectangle over a
     dark row.
     ========================================================= */
  .nether-stories__reveal {
    position: absolute;
    /* A CARD ON the photograph, not a fill OVER it (owner 2026-08-22: "broken
       blog", with a shot of a card whose whole image had gone black).

       inset: 0 made this an opaque rectangle the exact size of the frame. With
       a 326px tall image and a two-line excerpt, the result was two lines of
       text at the top and roughly 260px of dead black underneath — which does
       not read as a designed panel, it reads as an image that failed to load.
       That is the bug in the screenshot: nothing was broken, the panel was just
       far bigger than its contents.

       Insetting it leaves the photograph visible around all four edges, so the
       thing that appears is legibly a card sitting ON a picture. The reference
       does the same — its caption card covers part of the frame, never the
       whole of it. Height comes from the content now, so a short excerpt makes
       a short card and there is no void to explain.

       Pinned to the bottom because the card grows upward from a fixed edge,
       which keeps every card in the row starting from the same line — the
       property the "TOP, not bottom" note below was protecting. Text still
       starts at the top OF THE CARD; it is the card that moved, not the text. */
    inset: auto var(--space-md) var(--space-md) var(--space-md);
    z-index: 2;
    border-radius: var(--radius-sheet);
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
    display: flex;
    flex-direction: column;
    /* TOP, not bottom (owner 2026-08-22: "it's got to bring the text up a
       little higher ... even it's kind of coming up to the middle").

       flex-end pinned the excerpt to the bottom of the frame, so a short one
       floated somewhere around the middle of a 3:2 box with nothing above it.
       Reading starts at the top of the panel now regardless of length, which
       also means every card in the row starts its text on the same line. */
    justify-content: flex-start;
    gap: var(--space-sm);
    padding: var(--space-lg);
    /* INVERTED, not the page colour. --color-background is the page's own
       cream, so the panel had no edges: the photograph vanished and the excerpt
       read as loose text sitting on the section rather than as a card covering
       an image. Inverting borrows the hover language the trio button already
       uses, and it can never blend into the page because it is the opposite end
       of the same palette in both schemes. */
    /* rgb(--color-foreground-rgb), NOT var(--color-foreground).

       The plain token is #000000cf — it carries an ALPHA of 0.81. Used as a
       background that produced a smoked-glass panel with the photograph showing
       through, which looked deliberate and is not: it means the excerpt's
       contrast depends on whichever image happens to sit under it, so a light
       product shot and a dark trail shot give two different reads of the same
       text. The -rgb companion token is the channels without the alpha, which
       is why every other translucent fill in this theme is written
       rgb(var(--color-foreground-rgb) / n) rather than layering on the token. */
    /* WHITE (owner 2026-08-22: "remove that black card. It should be white").

       The note above argued for inverting because a cream panel at inset: 0
       "had no edges" and read as loose text on the section rather than a card.
       That was true of a full-bleed fill. It is not true now: this is an inset
       card with a radius and a shadow, so its edges are drawn rather than
       inferred, and the photograph is visible around all four sides.

       White also settles a split. The photo-credit card is the same gesture —
       a small card that appears over a photograph — and it is #ffffff/#111111
       (snippets/nether-photo-credit.liquid). Two panels doing one job in
       opposite palettes was the inconsistency; this ends it, and matches the
       Patagonia caption card the row is modelled on. */
    background-color: #ffffff;
    color: #111111;
    /* The card is one big <a>; nothing in here should intercept the click. */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--motion-rise, 10px));
    transition:
      opacity var(--motion-quick) var(--ease-ui),
      transform var(--motion-base) var(--ease-ui),
      visibility 0s linear var(--motion-base);
  }

  /* Dark twin, same values the photo-credit card uses so the two panels stay
     one object across themes. */
  html[data-theme='dark'] .nether-stories__reveal {
    background-color: #1b1b1e;
    color: #f5f5f5;
  }

  .nether-stories__reveal-excerpt {
    margin: 0;
    /* No opacity dimming: the panel is already inverted, so knocking the text
       back fights the contrast the inversion just bought. */
    /* Four lines, then ellipsis. The panel is the size of the photograph and
       cannot grow, so a long first paragraph would otherwise overflow the frame
       rather than being cut. */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (hover: hover) and (pointer: fine) {
    /* :focus-within as well as :hover, so a keyboard tab through the rail shows
       the same thing a mouse does. */
    .nether-stories__card:is(:hover, :focus-within) .nether-stories__reveal {
      opacity: 1;
      visibility: visible;
      transform: none;
      /* Zero delay on the way IN. The panel has to exist before it can fade,
         so the visibility flip leads here and trails on the way out. */
      transition:
        opacity var(--motion-quick) var(--ease-ui),
        transform var(--motion-base) var(--ease-ui),
        visibility 0s;
    }
  }

  .nether-stories__img {
    inline-size: 100%;
    block-size: 100%;
    /* Landscape, matching the reference. One ratio for every card keeps the row
       level no matter what shape the article image was uploaded at. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    transition: transform var(--motion-base) var(--ease-ui);
  }

  .nether-stories__img--empty {
    aspect-ratio: 3 / 2;
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-stories__card:hover .nether-stories__img {
      transform: scale(var(--hover-zoom));
    }
  }

  /* The tinted block under the photograph. --fill-subtle is the theme's ONE
     tinted fill, so this borrows the grey the size and pack tiles already use
     rather than introducing a card grey of its own. */
  .nether-stories__body {
    display: flex;
    flex-direction: column;
    /* Generous, because the padding IS the premium read on this card: the
       reference gives its text block roughly as much air as the photo has
       edge. */
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    /* A FLOOR, not a fixed height (owner 2026-08-22: the row "still looks like
       shit" against the Patagonia reference). Measured on their card, the text
       block is roughly twice the height of the photograph above it; ours was a
       thin strip under a 3:2 image, which is what made it read as a thumbnail
       with a caption rather than an editorial card. The floor gives the title
       room to run to two lines and puts real distance between it and the
       read-time pill, which is where the composition comes from. min rather
       than a set height so a long title still grows the card instead of
       overflowing it. */
    min-block-size: 200px;
    background-color: var(--fill-subtle);
    /* The photo and the block are one object: square where they meet, rounded
       on the outer corners only. */
    border-end-start-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
    /* Equal heights across the row regardless of title length, so the read-time
       pills line up along the bottom of the rail. */
    flex: 1;
  }

  html[data-theme='dark'] .nether-stories__body {
    background-color: var(--nether-dark-surface-2);
  }

  .nether-stories__title {
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
    /* Balanced so a three-word title does not leave one word stranded. */
    text-wrap: balance;
  }

  .nether-stories__byline {
    margin: 0;
    opacity: 0.55;
    font-weight: var(--font-weight-medium, 500);
  }

  /* The read-time pill. Pushed to the foot of the block by the auto margin, so
     it sits on the same line across every card no matter how long the title
     runs. */
  .nether-stories__readtime {
    margin-block-start: auto;
    align-self: flex-start;
    padding: 6px var(--space-md);
    border-radius: var(--radius-pill);
    background-color: var(--color-background);
    color: var(--ink-secondary);
  }

  html[data-theme='dark'] .nether-stories__readtime {
    background-color: var(--nether-dark-bg);
  }

  /* One circular arrow, right edge, vertically centred on the image band rather
     than the whole card (the old stock section centred on the full card, which
     put the arrow down beside the text). Desktop only: touch scrolls. */
  .nether-stories__next {
    display: none;
  }

  @media screen and (min-width: 750px) and (hover: hover) and (pointer: fine) {
    .nether-stories__next {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      /* 3:2 media, so its centre is a third of the card width down. */
      inset-block-start: calc((28% * 2 / 3) / 2);
      transform: translateY(-50%);
      inset-inline-end: calc(var(--space-md) * -1);
      inline-size: 44px;
      block-size: 44px;
      border-radius: 50%;
      border: 0;
      background: var(--color-background);
      color: var(--color-foreground);
      box-shadow: 0 2px 10px rgb(0 0 0 / 0.12);
      cursor: pointer;
      transition: opacity var(--motion-quick) var(--ease-ui);
    }

    .nether-stories__next svg {
      inline-size: 18px;
      block-size: 18px;
    }

    .nether-stories__next.is-end svg {
      transform: scaleX(-1);
    }

    .nether-stories__next:hover {
      opacity: 0.8;
    }
  }

  /* ===== MOBILE: FULL-BLEED RAIL ======================================
     (owner 2026-08-23: "our card is just too contained width wise... it
     doesn't look beautiful enough to finish off the bottom of the page",
     with the Patagonia stories rail as the reference.)

     Measured side by side: the reference card is about 83% of the screen with
     a ~16px gutter; ours was 69% sitting inside a 22px gutter, so it read as
     one boxed post rather than a row that continues. The post count was never
     the problem: post_count is 5 and four cards were rendering the whole time.

     Two changes. The inner drops its cap so the section owns the full width,
     and the RAIL bleeds through the gutter it would otherwise pay, so the
     first card starts at the screen edge and the next one is properly visible
     instead of a sliver. Same treatment the image trio already uses, so the
     two rails on this page now behave identically.

     scroll-padding keeps the first card snapping flush to that edge rather
     than to the bled margin. */
  @media screen and (max-width: 749px) {
    .nether-stories__inner {
      max-inline-size: none;
      margin-inline: 0;
    }

    .nether-stories__rail {
      margin-inline: calc(var(--nether-gutter) * -1);
      padding-inline: var(--nether-gutter);
      scroll-padding-inline-start: var(--nether-gutter);
    }

    .nether-stories__item {
      /* 84vw, measured against the reference rather than expressed as a
         percentage of the rail. A percentage resolves against the rail's
         CONTENT box, so it silently shrinks by whatever padding the rail is
         paying: 86% read as 76% of the screen here. A viewport unit is
         independent of that, so the card is the size it says it is. */
      flex: 0 0 84vw;
    }
  }
/* END_SECTION:nether-stories */

/* START_SECTION:nether-story (INDEX:43) */
.nether-story {
    position: relative;
    display: flex;
    min-block-size: var(--story-h-mobile, 80svh);
    overflow: clip;
    background-color: var(--color-background);
    color: var(--color-foreground);
    isolation: isolate;
  }

  @media screen and (min-width: 750px) {
    .nether-story {
      min-block-size: var(--story-h-desktop, 90svh);
    }
  }

  .nether-story__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* No-image fallback: a quiet dark stage with a low glow, same family as
       the PDP Details gradient, so the section still reads finished. */
    background:
      radial-gradient(120% 90% at 50% 110%, rgb(255 255 255 / 0.1) 0%, transparent 55%),
      linear-gradient(180deg, #161616 0%, #0c0c0c 100%);
  }

  .nether-story__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* The --desktop / --mobile display swap was deleted here 2026-08-02 with the
     two-<img> markup it served. <picture> chooses before fetching, so there is
     nothing left to hide — and hiding was the problem: display:none never
     stopped the second file downloading.

     The <picture> element itself needs no rules. It is display:contents by
     default in every engine that matters, so .nether-story__img above still
     positions against .nether-story__media exactly as before. */
  .nether-story picture {
    display: contents;
  }

  /* Drift (feel WO-13.2, Lane A slot 1 of 3): the media frame is oversized and
     drifts as the band ARRIVES, then holds still once centred. The old tune
     (120% frame, -4% to 4%, no range) spread 67px of travel across the whole
     1,573px crossing on a phone — about 4px per 100px scrolled, below
     perception. Now: 125% frame, -8% to 8%, ranged to the entry, which lands
     roughly 25px per 100px while the band enters (the Santa Cruz sensation).
     The animation lives on the WRAPPER, not the img, so the same element can
     carry data-motion-scroll and the token gate can cut the timeline. Cover
     stays safe at both keyframe extremes (12.5% of bleed vs 10% of travel),
     so the frame never shows an edge even if the animation resolves to its
     end state without running. Scroll-driven only: browsers without support
     (and reduced-motion users) get a static cover image. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .nether-story--parallax .nether-story__media {
        inset-block: -12.5%;
        animation: nether-story-drift linear both;
        animation-timeline: view();
        animation-range: var(--motion-range-entry);
      }

      @keyframes nether-story-drift {
        from {
          transform: translateY(-8%);
        }
        to {
          transform: translateY(8%);
        }
      }
    }
  }

  .nether-story__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.25) 0%, transparent 30%, transparent 55%, rgb(0 0 0 / 0.55) 100%),
      rgb(0 0 0 / var(--story-overlay, 0.3));
    pointer-events: none;
  }

  .nether-story__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1;
    inline-size: 100%;
    max-inline-size: var(--media-width, var(--page-width, 1520px));
    margin-inline: auto;
    /* One gutter (feel WO-14.9): every home band, the PDP buy area and the
       announcement panel share this left edge. Falls back to the max()
       convention until --nether-gutter is declared with the spacing tokens. */
    padding-inline: var(--nether-gutter);
    padding-block: clamp(48px, 8svh, 96px);
  }

  .nether-story__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-inline-size: 34ch;
    color: rgb(255 255 255 / 0.98);
  }

  .nether-story--h-left .nether-story__content {
    justify-content: flex-start;
  }

  .nether-story--h-center .nether-story__content {
    justify-content: center;
    text-align: center;
  }

  .nether-story--h-center .nether-story__text {
    align-items: center;
  }

  .nether-story--v-center .nether-story__content {
    align-items: center;
  }

  .nether-story--v-end .nether-story__content {
    align-items: flex-end;
  }

  /* The full banner matches the hero instead of the shared gutter. Both are
     full-bleed image bands on the same page, and the centred page-width column
     put the story's left edge about 145px inside the hero's on an ultrawide,
     so the two read as misaligned rather than stacked. Same padding-inline as
     .nether-hero__inner, deliberately, so they share one edge.

     Scoped away from --compact on purpose: nine secondary page headers use that
     variant and align to the announcement panel and the PDP buy area on the
     shared gutter (feel WO-14.9). That alignment stays. Desktop only, because
     below 750px the cap never binds and the gutter is already correct. */
  @media screen and (min-width: 750px) {
    .nether-story:not(.nether-story--compact) .nether-story__content {
      max-inline-size: none;
      margin-inline: 0;
      padding-inline: clamp(24px, 3vw, 48px);
    }

    /* 34ch measures against this container's body size, roughly 270px, which is
       narrower than the display heading needs and broke it into a four-line
       tower. Wide enough now that the line breaks land where the writing does. */
    .nether-story:not(.nether-story--compact) .nether-story__text {
      max-inline-size: 50ch;
    }
  }

  /* Compact page header (feel WO-19.6). Two changes only: less air, because the
     banner's clamp(48px, 8svh, 96px) eats a 30svh band, and a tighter gap,
     because 20px between a 12px eyebrow and a 24px title reads as two elements
     rather than one lockup. Everything else is the banner's, on purpose: the
     drift, the overlay, the no-image gradient stage and the position
     modifiers all stay, so nine pages open the way one page does. */
  .nether-story--compact .nether-story__content {
    padding-block: clamp(32px, 5svh, 56px);
  }

  .nether-story--compact .nether-story__text {
    gap: var(--space-sm);
  }

  /* .type-ui-caps pins its own colour to --ink-secondary (#707072), which wins
     over the white this block inherits and, once opacity: 0.72 lands on top,
     leaves the eyebrow barely readable over dark imagery. Take the colour back
     and let the opacity do the quieting. Unscoped as of the punch list (P-64):
     the contrast problem is the dark imagery, which the full banner has too, so
     scoping the fix to the compact variant only meant the full banner would
     ship the unreadable version the day an eyebrow came back. No template sets
     an eyebrow today, so this is dormant either way. */
  .nether-story__eyebrow {
    margin: 0;
    color: inherit;
    opacity: 0.72;
  }

  .nether-story__heading {
    margin: 0;
    text-wrap: balance;
  }

  .nether-story__body {
    margin: 0;
    opacity: 0.85;
    max-inline-size: 44ch;
  }

  .nether-story__body p {
    margin: 0;
  }

  .nether-story__actions {
    margin-block-start: var(--space-xs);
  }

  /* EDITORIAL — a text link with an arrow, not a pill (owner 2026-08-22:
     distinct CTA roles; see the register table in sections/nether-hero.liquid).

     This band is a brand statement over a photograph, not a product offer. A
     filled pill here made it the third identical hard ask in a single scroll
     and gave a line of copy the same weight as the add to cart. Dropping to a
     link keeps the invitation without competing with the primary above it.

     Two class names to clear Horizon's own .button, which is equal specificity
     and would otherwise win on source order — the same trick the hero uses.
     Every pill property is unset explicitly rather than left to chance: .button
     brings display, padding, min-height, fill and radius with it. */
  .nether-story .nether-story__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    /* ONE SOLID UNDERLINE, UNDER THE ARROW TOO (owner 2026-08-22: "it should be
       one solid underline with the arrow").

       It is a BORDER, not text-decoration. This control is an inline-flex row
       so the arrow can be transformed on hover, and text-decoration does not
       paint across a flex gap — the rule stopped at the end of the label and
       the arrow floated above open space, which is what the screenshot showed.
       A border belongs to the flex container itself, so it runs the full width
       of label plus gap plus arrow as one unbroken line.

       Asymmetric padding: the small bottom value is the underline's offset from
       the baseline, and the larger top value buys the height back so the whole
       control still clears a comfortable tap target. Splitting them evenly
       would push the rule away from the text and stop it reading as an
       underline at all. */
    padding-block: 14px 6px;
    /* AND NO INLINE PADDING (owner 2026-08-23: the underline "is a little long...
       it should be dynamically to the text itself").

       This element carries .button so it inherits the theme button settings,
       and --button-padding-inline is 24px a side. On a filled pill that is
       correct; on a control whose entire appearance is a rule under its own
       label it added 48px of empty line. Measured on the size page: 73px of
       text wearing a 151px underline.

       Only padding-block was being overridden here, which is why the height
       looked right and the width never did. */
    padding-inline: 0;
    border: none;
    border-block-end: 1px solid currentcolor;
    border-radius: 0;
    background: transparent;
    color: var(--color-foreground);
    font-size: var(--action-size);
    font-weight: var(--action-weight);
    letter-spacing: var(--action-tracking);
    text-decoration: none;
  }

  /* The arrow is generated, so the label setting stays clean text and no
     template has to remember to type one. */
  .nether-story .nether-story__button::after {
    content: '\2192';
    transition: transform var(--motion-quick) var(--ease-ui);
  }

  /* Pointer-only, per the interaction contract. The arrow travels rather than
     the colour changing: on a photograph a tint is unreliable, movement is
     not. --motion-rise is the theme's one travel distance. */
  @media (hover: hover) and (pointer: fine) {
    .nether-story .nether-story__button:hover::after {
      transform: translateX(var(--motion-rise));
    }
  }
/* END_SECTION:nether-story */

/* START_SECTION:nether-tencel-rows (INDEX:44) */
.nether-trows {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-trows__inner {
    inline-size: 100%;
    max-inline-size: var(--page-width, 1400px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 5vw, 64px);
  }

  .nether-trows__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-inline-size: 60ch;
  }

  .nether-trows__eyebrow {
    margin: 0;
    opacity: 0.6;
  }

  .nether-trows__heading {
    margin: 0;
    color: var(--color-foreground-heading, var(--color-foreground));
    text-wrap: balance;
  }

  .nether-trows__lede {
    font-size: var(--font-size-md);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / 0.8);
    max-inline-size: 52ch;
  }

  .nether-trows__lede p {
    margin: 0 0 0.9em;
  }

  .nether-trows__lede p:last-child {
    margin-block-end: 0;
  }

  .nether-trows__rows {
    display: flex;
    flex-direction: column;
  }

  .nether-trows__row {
    display: grid;
    gap: clamp(20px, 3vw, 48px);
    padding-block: clamp(28px, 4vw, 48px);
  }

  .nether-trows__row + .nether-trows__row {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }

  .nether-trows__media {
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
  }

  .nether-trows__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .nether-trows__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
  }

  .nether-trows__tag {
    margin: 0;
    opacity: 0.55;
  }

  .nether-trows__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight, -0.01em);
  }

  .nether-trows__line {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / 0.78);
    max-inline-size: 46ch;
  }

  @media screen and (min-width: 750px) {
    .nether-trows__row {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }

    .nether-trows__row:nth-child(even) .nether-trows__media {
      order: 2;
    }
  }

  .nether-trows__certs {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-block-start: clamp(8px, 1.5vw, 16px);
  }

  .nether-trows__certs-label {
    margin: 0;
    opacity: 0.55;
  }

  .nether-trows__certs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .nether-trows__cert {
    font-size: var(--font-size-xs);
    /* --tracking-wide (0.02em). 0.04em was exactly the retired wide tracking
       the token file dropped in the 08-20 pass; the scale now tops out at
       0.02em and this was one of the consumers still writing the old value. */
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    padding: 7px 14px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }

  .nether-trows__certs-note {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .nether-trows__cta {
    display: flex;
  }
/* END_SECTION:nether-tencel-rows */

/* START_SECTION:nether-timeline (INDEX:45) */
.nether-tl {
    inline-size: 100%;
    padding-block: var(--space-48);
    /* 16px, matching body copy on a phone. Not --nether-gutter: this section
       sits in the page flow under ordinary text, and a 22px rail put the
       process strip 6px inside the paragraphs above it before that was caught. */
    --tl-edge: 16px;
    overflow: clip;
  }

  .nether-tl__head {
    padding-inline: var(--tl-edge);
    margin-block-end: var(--space-24);
  }

  .nether-tl__kicker {
    margin: 0 0 var(--space-8);
    font-size: var(--font-size-3xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.55);
  }

  .nether-tl__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: rgb(0 0 0 / 0.9);
    text-wrap: balance;
  }

  .nether-tl__rail {
    display: flex;
    gap: var(--space-16);
    margin: 0;
    padding: 0 var(--tl-edge);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--tl-edge);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nether-tl__rail::-webkit-scrollbar { display: none; }
  .nether-tl__rail:focus { outline: none; }

  .nether-tl__rail:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.6);
    outline-offset: 4px;
  }

  .nether-tl__slide {
    flex: 0 0 auto;
    inline-size: 82vw;
    max-inline-size: 26rem;
    scroll-snap-align: center;
  }

  .nether-tl__fig { margin: 0; }

  .nether-tl__media {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    overflow: clip;
    background-color: #e8e4dd;
    border-radius: var(--radius-control, 6px);
  }

  .nether-tl__asset {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .nether-tl__todo {
    inline-size: 100%;
    block-size: 100%;
    display: grid;
    place-items: center;
    border: 1px dashed rgb(0 0 0 / 0.2);
    border-radius: var(--radius-control, 6px);
  }

  .nether-tl__todo span {
    font-size: var(--font-size-3xs);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.5);
  }

  .nether-tl__copy { padding-block-start: var(--space-16); }

  .nether-tl__year {
    margin: 0 0 var(--space-8);
    font-size: var(--font-size-3xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.5);
  }

  .nether-tl__h {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: rgb(0 0 0 / 0.9);
    text-wrap: balance;
  }

  .nether-tl__body {
    margin: var(--space-8) 0 0;
    font-size: var(--font-size-2xs);
    line-height: var(--leading-ui);
    color: rgb(0 0 0 / 0.62);
    text-wrap: pretty;
  }

  /* ---- the scrubber ---- */
  .nether-tl__scrub {
    margin-block-start: var(--space-24);
    padding-inline: var(--tl-edge);
  }

  .nether-tl__dots {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    block-size: 1px;
    background: rgb(0 0 0 / 0.14);
  }

  .nether-tl__dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--color-background, #f9f7f4);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.28);
    flex: 0 0 auto;
    transition: background-color 0.25s var(--ease-out-quad, ease), box-shadow 0.25s;
  }

  .nether-tl__dot.is-on {
    background: rgb(var(--color-foreground-rgb, 0 0 0));
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb, 0 0 0));
  }

  /* Each label is a fixed slot so the track can be translated by whole slots.
     Slots are narrower than the window on purpose: the neighbours stay
     partly visible, which is what tells you a milestone exists either side. */
  .nether-tl__labelwrap {
    margin-block-start: var(--space-12);
    overflow: clip;
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  }

  .nether-tl__labels {
    display: flex;
    transition: transform 0.35s var(--ease-out-quad, cubic-bezier(0.25, 0.46, 0.45, 0.94));
  }

  .nether-tl__label {
    flex: 0 0 60%;
    text-align: center;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.32);
    transition: color 0.25s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nether-tl__label.is-on { color: rgb(0 0 0 / 0.9); }

  /* The video lies on top of its still and is revealed only once it is
     genuinely playing, so a card never flashes an empty frame between the
     poster painting and the first video frame decoding. .nether-tl__media
     carries position:relative so these coordinates resolve against the frame. */
  .nether-tl__vid {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 240ms var(--ease-ui, ease);
  }

  .nether-tl__vid.is-playing { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .nether-tl__labels { transition: none; }
    /* Hiding the video is safe now: the still is a SIBLING, not a child of it.
       When this rule hid a video_tag, it hid that filter's fallback <img> too
       and the slide rendered empty. */
    .nether-tl__vid { display: none; }
  }

  html[data-theme='dark'] .nether-tl__kicker { color: rgb(255 255 255 / 0.55); }
  html[data-theme='dark'] .nether-tl__title,
  html[data-theme='dark'] .nether-tl__h { color: #ffffff; }
  html[data-theme='dark'] .nether-tl__year { color: rgb(255 255 255 / 0.5); }
  html[data-theme='dark'] .nether-tl__body { color: rgb(255 255 255 / 0.62); }
  html[data-theme='dark'] .nether-tl__label { color: rgb(255 255 255 / 0.32); }
  html[data-theme='dark'] .nether-tl__label.is-on { color: #ffffff; }
  html[data-theme='dark'] .nether-tl__dots { background: rgb(255 255 255 / 0.16); }
  html[data-theme='dark'] .nether-tl__dot { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
  html[data-theme='dark'] .nether-tl__media,
  html[data-theme='dark'] .nether-tl__todo { background-color: #2f2f36; }

  /* Placed last: media queries add no specificity, so an override written
     above its base rules loses to them. This build has found that three times. */
  @media screen and (min-width: 750px) {
    .nether-tl { --tl-edge: var(--nether-gutter); }
    .nether-tl__slide { inline-size: 32rem; }
    .nether-tl__head,
    .nether-tl__scrub { max-inline-size: 62rem; margin-inline: auto; }
    .nether-tl__body { font-size: var(--font-size-xs); }
  }
/* END_SECTION:nether-timeline */

/* START_SECTION:password-footer (INDEX:46) */
.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-foreground);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

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

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

/* START_SECTION:product-hotspots (INDEX:50) */
/* 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 {
    .quick-add {
      display: flex;
      justify-content: flex-end;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button.add-to-cart-button {
      width: calc(var(--button-size-md) - 4px);
      position: relative;
      transform: translateX(2px);
      justify-self: flex-end;
      height: fit-content;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      pointer-events: all;
      opacity: 1;
      overflow: hidden;
      outline: 2px solid transparent;

      @media (prefers-reduced-motion: no-preference) {
        transition: width var(--animation-speed) var(--ease-out-cubic),
          outline-color var(--animation-speed) var(--ease-out-cubic) var(--animation-speed-slow),
          transform var(--animation-speed) var(--ease-out-cubic);
      }

      &:is(:hover, :active) {
        outline-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
      }

      &:focus-visible {
        outline-color: currentcolor;
        transition-delay: 0s;
      }
    }

    .quick-add__button.add-to-cart-button[data-added='true'] {
      color: transparent;
    }
  }

  @media screen and (min-width: 750px) {
    .hotspot-dialog {
      .quick-add__button:is(:hover, :focus-visible) {
        width: max-content;
        transform: translateX(0);
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:51) */
.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);
    }
  }

  {%- comment -%} Nether 2026-09-12: --ease-spring, from --ease-out-quad at 0.3s.

     This bar is the right home for the spring and the drawer's sibling case: a
     floating surface that arrives in place, triggered by a gesture rather than
     dragged by one. It slides up 100% + 40px of its own height, so 2% of
     overshoot is a real few pixels past its resting edge, then settled.

     Duration moves with the curve. --motion-spring IS the settle time of that
     linear() — a spring's shape is only right at its own length, and 0.3s
     would clip the overshoot off before it happened, which is the one way to
     get the cost of a spring with none of the effect.

     opacity keeps no separate curve here because the shorthand longhands apply
     one function to all three properties; opacity cannot overshoot, so it just
     tracks the same normalised curve and lands clamped. Fine on a fade this
     short. --ease-out-quad is declared first as the linear() fallback.

     Everything else in this rule is stock and stays: transition-behavior:
     allow-discrete plus the @starting-style above are what let the bar animate
     as it enters and leaves the DOM rather than popping. Horizon 4.1.4 already
     shipped that — it did not need adding. {%- endcomment -%}
  @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;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:54) */
.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:reel (INDEX:55) */
/* The section IS the scroller: full-viewport, one slide per swipe, no chrome.
     Fixed + 100dvh so it fills the viewport regardless of ancestor padding and
     tracks the mobile browser bar showing/hiding. Page scroll is locked in
     layout/theme.liquid for the reel template. */
  .reel {
    position: fixed;
    inset: 0;
    height: 100dvh;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .reel::-webkit-scrollbar {
    display: none;
  }

  .reel__slide {
    position: relative;
    height: 100dvh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }

  .reel__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--reel-focal, center);
  }

  .reel__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  /* The care mark sits ABOVE the copy rather than behind it. The slide's text
     is anchored to the bottom, so the symbol is centred in the upper two thirds
     and the heading reads as its caption — the same relationship the care label
     photo on the previous slide already has with its own line.

     Sized in vmin, not a percentage of the slide: these are line drawings, and
     one scaled to slide width would be a wall of stroke on a phone and a
     postage stamp on a desktop. It also stays clear of the copy at the bottom
     rather than needing a media query per breakpoint. */
  .reel__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block-end: 22vh;
    color: inherit;
  }

  .reel__mark svg {
    inline-size: min(38vmin, 240px);
    block-size: auto;
    /* Not full strength. The symbol is a stand-in for photography, and at 100%
       white on a near-black ground it out-shouts the sentence it belongs to. */
    opacity: 0.82;
  }

  /* The two-up line-dry/dry-flat pair is twice as wide for the same glyph
     height, so it needs its own cap or each square lands half the size of the
     single marks on the slides either side of it. */
  .reel__mark svg[viewBox^='0 0 220'] {
    inline-size: min(72vmin, 440px);
  }

  /* THE MARKS DRAW THEMSELVES (owner 2026-09-07: "can you just animate these
     things, make the icons look nicer").

     A transition keyed to .is-active, not a @keyframes animation, because that
     is exactly the mechanism the copy reveal above already uses. One hook, one
     failure mode: if the observer in reel.js never fires, the marks behave the
     same way the headings already would, rather than inventing a second way for
     this page to end up blank.

     pathLength="100" on every shape is what lets ONE rule draw a rounded
     square, a circle and a pair of diagonals at the same speed. It renormalises
     each shape's geometry to 100 units, so a 272-unit perimeter and an 82-unit
     diagonal both take a full 100 of dash — without it the dasharray would have
     to be hand-tuned per shape and every symbol would draw at a different rate.

     Staggered so the container lands before its contents: the tub before the
     water, the square before the bar struck through it. That ordering is most
     of the difference between something drawing itself and four things
     appearing at once. */
  .reel__mark svg > * {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.7s var(--ease-out-cubic, var(--ease-ui));
  }

  .reel__slide.is-active .reel__mark svg > * {
    stroke-dashoffset: 0;
  }

  .reel__mark svg > :nth-child(2) {
    transition-delay: 0.18s;
  }

  .reel__mark svg > :nth-child(3) {
    transition-delay: 0.34s;
  }

  .reel__mark svg > :nth-child(4) {
    transition-delay: 0.5s;
  }

  /* The cold dot is a fill with no stroke, so there is no line to draw. It
     fades in on the beat the last stroke finishes instead. */
  .reel__mark svg > [fill='currentColor'] {
    opacity: 0;
    transition: opacity 0.35s var(--ease-ui) 0.5s;
  }

  .reel__slide.is-active .reel__mark svg > [fill='currentColor'] {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .reel__mark svg > * {
      stroke-dashoffset: 0;
      opacity: 1;
      transition: none;
    }
  }

  .reel__placeholder-svg {
    width: 60%;
    height: auto;
    opacity: 0.5;
  }

  /* Bottom wash for text legibility over bright product imagery. */
  .reel__wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgb(0 0 0 / 0.62) 0%,
      rgb(0 0 0 / 0.28) 26%,
      rgb(0 0 0 / 0) 58%
    );
  }

  /* Text block: bottom-left, cleared of the notch + home bar via safe-area. */
  .reel__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs, 8px);
    padding-inline: var(--padding-xl);
    padding-block-end: max(var(--padding-2xl), calc(env(safe-area-inset-bottom) + var(--padding-lg)));
    padding-block-start: var(--padding-lg);
    color: var(--color-foreground);
    text-wrap: pretty;
  }

  .reel__eyebrow {
    margin: 0;
    opacity: 0.82;
  }

  .reel__heading {
    margin: 0;
    color: var(--color-foreground);
  }

  /* THE OPENER HAS NOTHING ELSE TO LOOK AT (owner 2026-09-07, on the welcome
     reel: "it's the first and second images").

     Every other slide carries either a photograph or a care mark, so the
     heading is a caption to something. The thank-you slide has neither by
     design — it is a sentence on a dark ground — and at caption size that read
     as an empty screen with a few words parked in the corner rather than as an
     opening statement.

     Detected by absence rather than by a flag: a slide with no .reel__media is
     the only kind that has to carry itself on type alone, so it is also the
     only kind that should. If a video or poster is ever set on the thank-you
     slide, .reel__media comes back, this rule stops matching, and the heading
     returns to caption size without anyone having to remember to undo it.

     clamp() rather than a fixed size, because this is the one slide where the
     type IS the composition: it has to fill a 375px phone and a desktop pane
     without a media query for each. */
  .reel__slide:not(:has(.reel__media)) .reel__heading {
    font-size: clamp(2.25rem, 11vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    max-width: 12ch;
  }

  .reel__subtext {
    margin: 0;
    max-width: 34ch;
    opacity: 0.88;
  }

  .reel__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs, 8px);
    margin-block-start: var(--gap-sm, 12px);
  }

  .reel__cta {
    text-decoration: none;
  }

  /* Reveal on the in-view slide (JS toggles .is-active). */
  .reel__content {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease-out-cubic, var(--ease-ui)), transform 0.6s var(--ease-out-cubic, var(--ease-ui));
  }

  .reel__slide.is-active .reel__content {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .reel {
      scroll-behavior: auto;
    }
    .reel__content {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* Progress rail — fixed to the viewport top, one segment per slide. JS fills
     segments up to and including the active slide. */
  .reel__rail {
    position: fixed;
    top: calc(env(safe-area-inset-top) + var(--padding-sm));
    inset-inline: var(--padding-md);
    z-index: 10;
    display: flex;
    gap: var(--gap-2xs, 4px);
    pointer-events: none;
  }

  .reel__rail-seg {
    flex: 1;
    height: 2px;
    border-radius: var(--style-border-radius-pills, 999px);
    background: rgb(255 255 255 / 0.28);
    overflow: hidden;
  }

  .reel__rail-seg::after {
    content: '';
    display: block;
    height: 100%;
    width: 0;
    background: #ffffff;
    transition: width var(--motion-base) var(--ease-out-cubic, var(--ease-ui));
  }

  .reel__rail-seg.is-filled::after {
    width: 100%;
  }

  @media (prefers-reduced-motion: reduce) {
    .reel__rail-seg::after {
      transition: none;
    }
  }

  /* Mute toggle (video slides only). */
  .reel__mute {
    position: absolute;
    top: calc(env(safe-area-inset-top) + var(--padding-lg));
    inset-inline-end: var(--padding-md);
    z-index: 5;
    width: var(--minimum-touch-target, 44px);
    height: var(--minimum-touch-target, 44px);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.4);
    border-radius: 50%;
    background: rgb(0 0 0 / 0.32);
    color: #ffffff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
  }

  .reel__mute svg {
    width: 20px;
    height: 20px;
  }

  /* Default state is muted (autoplay requires it): show the muted icon. */
  .reel__mute .reel__mute-off {
    display: none;
  }
  .reel__mute.is-unmuted .reel__mute-on {
    display: none;
  }
  .reel__mute.is-unmuted .reel__mute-off {
    display: block;
  }

  .reel__slide--empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--padding-xl);
  }
  .reel__slide--empty .reel__content {
    opacity: 1;
    transform: none;
  }
/* END_SECTION:reel */

/* START_SECTION:slideshow (INDEX:60) */
.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:_blog-post-card (INDEX:63) */
.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--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .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;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

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

  /* CARD TITLE (2026-09-12). Measured at 390px: the post name rendered at
     20px/500 — the same treatment the home page section headings had before
     that day, and the same one the story cards had. All three came from the
     habit of giving a card title the section-heading value.

     18px/700 sits a clear step under the 40px page h1 and a step above the
     16px product-card name, so the three card types on the site now read as a
     scale instead of as one size.

     Targets the .text-block INSIDE the link, because that is where the visible
     type lives — the title is an unclassed editor text-block, the same pattern
     as the PDP title and the product-card name. Third time today; it is the
     rule on this theme rather than the exception. */
  .blog-post-card__title-link .text-block {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:64) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:65) */
.blog-post-card__content-text a {
    color: currentcolor;
  }

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:66) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .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:67) */
.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:68) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    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:70) */
.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:71) */
.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:72) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:73) */
.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 {
    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      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);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: 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;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:74) */
.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;
    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:77) */
.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:79) */
.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:83) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .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__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @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;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:84) */
.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:86) */
.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:89) */
.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:90) */
.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:91) */
.header-logo {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: 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;
    }
  }

  .header-logo__img {
    display: block;
    width: auto;
    height: var(--logo-height-mobile);
    object-fit: contain;

    @media screen and (min-width: 750px) {
      height: var(--logo-height);
    }
  }

  /* Default (light / solid header on interior pages): black wordmark */
  .header-logo__img--light {
    display: none;
  }

  /* Dark contexts: show the white wordmark, hide the black one. Triggers (any of):
       - explicit dark mode (toggle)
       - a transparent header over the dark hero (at the top, not yet scrolled)
       - a SOLID dark header (e.g. dark home after scroll) via data-header-appearance="dark"
     data-header-appearance is set by the header component in Phase 1 from its active
     color scheme + scroll state, so the logo always contrasts its background. */
  /* White wordmark when: dark mode anywhere, OR over the dark hero on the home
     (transparent header, not yet scrolled past the hero). Black otherwise
     (light mode over content, and light interior pages). */
  html[data-theme='dark'] .header-logo__img--dark,
  html:not([data-nether-past-hero='true']) #header-component[transparent] .header-logo__img--dark {
    display: none;
  }

  html[data-theme='dark'] .header-logo__img--light,
  html:not([data-nether-past-hero='true']) #header-component[transparent] .header-logo__img--light {
    display: block;
  }

  /* NOTE: keyed to data-theme, and that is still right - but not for the reason
     this note used to give. It said Nether's light/dark is "never the OS". As of
     2026-09-12 it is: layout/theme.liquid follows prefers-color-scheme for any
     shopper who has not used the toggle (owner's call - see the block comment
     there).

     Nothing here changes, because the boot script still writes data-theme as one
     of two literals before paint. The attribute cannot tell you whether the
     shopper chose or the phone did, and this rule does not need to know - it
     needs to know which way to paint the wordmark, which data-theme still
     answers. Do NOT add a prefers-color-scheme media query alongside these
     selectors: it would double the rule and the two copies would disagree the
     moment a shopper picks light on a dark phone.

     Default = black wordmark on the light interior header; white in the dark
     contexts above (dark theme, transparent-over-hero, solid dark). */
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:92) */
.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);
    }
  }

  /* Wraps a top-level link and its disclosure button. Positioned so the
     absolutely-positioned button can sit in the gap after the link without
     affecting the top-bar layout. */
  .menu-list__trigger {
    position: relative;
    display: flex;
    height: 100%;
  }

  .menu-list__disclosure {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% - var(--gap-xs));
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--padding-3xs);
    padding-block: var(--padding-sm);
    color: var(--menu-top-level-font-color);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    outline-offset: 0.1em;

    /* Hidden control must not intercept pointer events; hover-open is driven by
       the list item itself. */
    pointer-events: none;

    &:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .menu-list__disclosure-icon {
    display: block;
    width: var(--font-size--3xs);
    aspect-ratio: 10 / 6;
    fill: currentColor;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
    transform: rotate(180deg);
  }

  .menu-list__link-title {
    padding-inline: var(--gap-sm);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item[slot='more']:has(.menu-list__link[aria-expanded='true'])::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:is([slot='more'], [slot='overflow']):has([aria-expanded='true']) .menu-list__link {
    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 {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    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.background-matches-parent,
    .overflow-menu.background-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);

    /* Bridge the gap (row bottom padding + border) so the pointer reaches the
       submenu; collapses to 0 when the padding does. */
    --submenu-gap: calc(var(--padding-block-end, var(--header-padding)) + var(--border-bottom-width, 0px));
    --submenu-clip-top: calc(var(--header-height) - var(--submenu-gap));

    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: rect(var(--submenu-clip-top) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  /* Keep the submenu transparent (color-custom paints an opaque bg) so the
     bridged band shows the header row; the underlay paints the dropdown. */
  .menu-list__list-item > .menu-list__submenu {
    background-color: transparent;
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      --submenu-clip-top: calc(var(--top-row-height) - var(--submenu-gap));
    }
  }

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

    /* The trigger becomes the left-column grid item, laying the link and its
       disclosure button out inline */

    .menu-list__trigger {
      grid-area: left;
      grid-row: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--gap-2xs);
    }

    .menu-list__disclosure {
      position: static;
      flex-shrink: 0;
      transform: none;
    }

    /* Point the chevron toward the content that opens to the right. */
    .menu-list__disclosure-icon,
    .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
      transform: rotate(-90deg);
    }

    .menu-list__link {
      /* Bare leaf links (no children) have no `.menu-list__trigger` wrapper, so
         they need explicit left-column placement themselves. On parent items the
         link is inside the trigger and this is simply ignored. */
      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;
    }

    /* The disclosure button owns the expanded state; reveal the submenu when it
       is expanded (via the inline chevron, hover, or the More trigger). */
    &:has(.menu-list__disclosure[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;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:95) */
.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:99) */
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-card (INDEX:103) */
/* ONE CARD CONTRACT (feel WO-20.4).

     Three renderers put a product on a page in this theme and they had
     drifted apart. The contract is: a locked media slot at radius 0 over the
     one neutral fill, then the name, then the colour, then the price, with
     hierarchy carried by ink and weight rather than by a container.

     The ratio itself is a block setting (portrait, which resolves to 4:5 in
     card-gallery.liquid) and is set in the template. What lives here is the
     part a setting cannot express. Block stylesheets bundle globally, so
     these rules reach every product card the theme renders, including the
     ones built from blocks/product-card.liquid. */

  /* Reserve the slot. .product-media already carries the locked ratio
     (snippets/product-media.liquid), so painting the one tinted fill behind
     it means a card holds its exact shape while the photograph decodes, and
     still reads as deliberate on a product whose frames do not exist yet.
     --fill-subtle is the right token here rather than a scheme colour: cards
     sit on the page background, and the theme bridge already carries its
     dark twin. */
  product-card .product-media {
    background-color: var(--fill-subtle);
  }

  /* Take the glass off the photograph (feel WO-20.6). Quick add ships as a
     50px pill with a 2px border and blur(20px) saturate(180%) parked over the
     bottom right of every card image, on the device that matters most. The
     switch that removes it altogether is a theme setting and belongs to that
     pass. This is the fallback the work order asks for if the control stays:
     the theme's own control geometry, no blur, no border, no scale, hover
     answered by colour alone. Zero backdrop-filter on a card at any width. */
  product-card .quick-add__button {
    border-radius: var(--radius-control);
    border: 0;
    backdrop-filter: none;
  }

  product-card .quick-add__button .add-to-cart-text {
    border-radius: var(--radius-control);
  }

  product-card .quick-add__button:hover,
  product-card .quick-add__button:active {
    scale: 1;
  }
/* END_BLOCK:_product-card */

/* START_BLOCK:_product-details (INDEX:104) */
/* 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:109) */
.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:110) */
.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:111) */
.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:bundle-quantity-picker (INDEX:115) */
/* ===========================================
   BUNDLE PICKER - Premium Lululemon/Gymshark Style
   Uses radio inputs for proper :has(:checked) animations
   =========================================== */

.bundle-picker {
  margin-block: var(--spacing-4, 16px);
}

/* The .is-gated display:none rule, the --revealed entrance and its keyframes
   were deleted here 07-31 (feel WO-16, item 5). The pack rows never leave the
   layout now, so there is no gap to open and nothing to slide into it: the
   whole state change is the opacity in nether-pdp.liquid. Removing the block
   also removed a `both` fill-mode holding opacity 0 at the 0% frame, which is
   the pattern that leaves an element permanently invisible whenever its
   animation does not run. */

.bundle-picker__label {
  font-size: var(--font-size-sm); /* 13px */
  font-weight: var(--font-weight-semibold);
  letter-spacing: normal;
  margin-block-end: var(--spacing-3, 12px);
  color: var(--color-foreground);
}

/* Stacked full-width offer rows — deliberately NOT the size-tile look. The
   size picker is a grid of square swatch tiles with a solid selected fill;
   packs are quantity-break offers, so they read as radio rows with a badge. */
.bundle-picker__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bundle-picker__button {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  inline-size: 100%;
  padding: 14px 14px;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  border-radius: var(--radius-control);
  min-height: 58px;
  white-space: normal;
  background-color: transparent;
  color: rgb(var(--color-foreground-rgb));
  transition:
    border-color var(--motion-quick) var(--ease-ui),
    background-color var(--motion-quick) var(--ease-ui),
    box-shadow var(--motion-quick) var(--ease-ui),
    transform var(--motion-quick) var(--ease-ui);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Rows with a flag need a touch of top room so the tab never crowds */
.bundle-picker__options {
  padding-block-start: 6px;
}

/* Radio indicator — the signature of the row, so packs never read as sizes. */
.bundle-picker__button::before {
  content: '';
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--color-foreground-rgb) / 0.35);
  transition: border-color var(--motion-quick) var(--ease-ui), background-color var(--motion-quick) var(--ease-ui), box-shadow var(--motion-quick) var(--ease-ui);
}

/* Flat black, not --color-foreground.

   --color-foreground is #000000cf — 81% black — so the filled dot read grey
   next to the pure-black Add to Cart directly beneath it (user 07-27).
   --color-primary-button-background is the token that IS the flat black used
   for primary actions, so the two now stay in step, and it inverts correctly
   in dark mode (that token flips to white there, as does the dot). */
.bundle-picker__button:has(:checked)::before {
  border-color: var(--color-primary-button-background, #000);
  background-color: var(--color-primary-button-background, #000);
  box-shadow: inset 0 0 0 3.5px var(--color-background);
}

/* Hide radio input visually but keep accessible */
.bundle-picker__button input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Tap feedback — gentle; a full-width row at 0.95 looks like it collapses */
.bundle-picker__button:active {
  transform: scale(0.985);
}

/* Hover - only on hover-capable pointers to avoid sticky :hover on iOS */
@media (hover: hover) and (pointer: fine) {
  .bundle-picker__button:not(:has(:checked)):hover {
    border-color: rgb(var(--color-foreground-rgb) / 0.4);
  }
}

/* Focus state (accessibility).

   This used to kill the outline and substitute border-color + box-shadow. Both
   substitutes die further down this same stylesheet: the tile rule sets
   `border: 0`, so there is no border track left for a colour to paint, and the
   selected tile sets `box-shadow: none` at equal specificity and later in
   source, which wipes the ring in the exact state a keyboard user is most
   likely to be in (arrow keys move focus and check in one go). The ring only
   ever showed because nether-pdp.liquid paints one scoped to
   .product-information, so the block lost it anywhere else.

   An outline is drawn outside the box and needs no border, so nothing below can
   take it away. The PDP rule is more specific, so it still wins inside the buy
   column and stays what it should be: a colorway tint on top of this. */
.bundle-picker__button:has(:focus-visible) {
  outline: 2px solid var(--color-foreground);
  outline-offset: 2px;
}

/* -------------------------------------------------
   Pill fill - premium animated scale + fade
   EXACTLY matches size picker animation
   ------------------------------------------------- */
/* Colorway sweep: identical to the size picker — a tint of the selected colour
   wipes left-to-right on select. */
.bundle-picker__pill { display: none; }

/* Selected — outline emphasis on the grey fill. The label stays upright (no
   inverted fill; that treatment belongs to the size tiles). */
.bundle-picker__button:has(:checked) {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / 0.05);
  box-shadow: inset 0 0 0 1px var(--color-foreground);
}

/* -------------------------------------------------
   Text styling — label + per-pair left, price stack right
   ------------------------------------------------- */
.bundle-picker__text {
  pointer-events: none;
  z-index: 2;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.bundle-picker__labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bundle-picker__main {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight);
}

.bundle-picker__per {
  font-size: var(--font-size-xs);
  line-height: var(--leading-tight-ui);
  color: rgb(var(--color-foreground-rgb) / 0.6);
  white-space: nowrap;
}

/* Discounted packs (mobile): the discounted per-pair is the hero — full ink,
   sat opposite the greyed regular per-pair on the right. Desktop cards keep
   their own per-pair-only treatment via the min-width:750px block. */
@media screen and (max-width: 749px) {
  .bundle-picker__per--strong {
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    font-weight: var(--font-weight-semibold);
  }

}

/* "X% off" under the per-pair on discounted packs — small, quiet confirmation
   of the deal (the per-pair price is the hero). Desktop cards carry savings in
   their flags instead, so this is hidden there. */
.bundle-picker__save {
  margin-block-start: 1px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: rgb(var(--color-foreground-rgb) / 0.6);
}

/* ---- Colour pack builder (revealed on 2+ packs). All token-driven so it adapts
   with the dark/light theme bridge; swatch colours are the only fixed hues. ---- */
.bundle-picker__colors {
  margin-block-start: 16px;
  padding-block-start: 16px;
  border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
}

.bundle-picker__colors[hidden] {
  display: none;
}

.bundle-picker__colors-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-block-end: 12px;
}

.bundle-picker__colors-title {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug, 1.3);
  color: var(--color-foreground);
}

.bundle-picker__colors-count {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: rgb(var(--color-foreground-rgb) / 0.55);
  font-variant-numeric: tabular-nums;
}

.bundle-picker__colors-note {
  margin: -6px 0 14px;
  font-size: var(--font-size-xs);
  line-height: var(--leading-ui);
  color: rgb(var(--color-foreground-rgb) / 0.6);
  max-width: 44ch;
}

.bundle-picker__qty {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bundle-picker__qtyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  border-radius: 10px;
  min-height: 48px;
  transition: border-color var(--motion-quick) var(--ease-ui), box-shadow var(--motion-quick) var(--ease-ui);
}

/* A colour with 1+ in the pack reads as active — the row lights up like a control. */
.bundle-picker__qtyrow.is-active {
  border-color: var(--color-foreground);
  box-shadow: inset 0 0 0 1px var(--color-foreground);
}

.bundle-picker__qtyname {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
  /* It's a real button now (tap to preview the colour in the gallery) — strip chrome. */
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .bundle-picker__qtyname:hover .bundle-picker__qtydot {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px rgb(var(--color-foreground-rgb) / 0.35);
  }
}

/* Incomplete-mix nudge on the "X of N" counter (JS flashes "Pick N total"). */
.bundle-picker__colors-count--warn {
  color: #c0392b;
  font-weight: var(--font-weight-semibold);
}

html[data-theme='dark'] .bundle-picker__colors-count--warn {
  color: #ff8a80;
}

.bundle-picker__qtydot {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
  background-color: var(--dot, #888);
  transition: box-shadow var(--motion-quick) var(--ease-ui);
}

/* Patagonia ring on the active colour's swatch — the same selected-ring
   language as the PDP colorway dots (user 07-25). */
.bundle-picker__qtyrow.is-active .bundle-picker__qtydot {
  box-shadow:
    0 0 0 2px var(--color-background),
    0 0 0 3.5px rgb(var(--color-foreground-rgb, 0 0 0));
}

/* MeUndies slot track: mini brief silhouettes, one per pair, filling the
   middle of the row so the build is visible at a glance. */
.bundle-picker__slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.bundle-picker__slots:empty {
  display: none;
}

.bundle-picker__slot {
  display: inline-flex;
  inline-size: 17px;
  block-size: 13px;
  animation: bundle-slot-in 0.22s var(--ease-ui) backwards;
}

.bundle-picker__slot svg {
  inline-size: 100%;
  block-size: 100%;
  fill: var(--dot, #888);
}

/* Dark mode: Black/Navy/Purple silhouettes vanish on the dark rows — a faint
   light outline keeps every colorway readable (user 07-25). */
html[data-theme='dark'] .bundle-picker__slot svg path {
  stroke: rgb(255 255 255 / 0.55);
  stroke-width: 1;
}

@keyframes bundle-slot-in {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bundle-picker__slot {
    animation: none;
  }
}

.bundle-picker__stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.bundle-picker__step {
  /* iOS fires double-tap-to-zoom when two taps land close together — tapping
     "3 pairs" quickly zoomed the page (user 07-25). manipulation opts these
     controls out of the double-tap gesture while keeping scroll + pinch. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  inline-size: 30px;
  block-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.22);
  border-radius: 50%;
  background: transparent;
  color: var(--color-foreground);
  font-size: 17px;
  line-height: var(--leading-none);
  cursor: pointer;
  transition: background-color var(--motion-quick) var(--ease-ui), opacity var(--motion-quick) var(--ease-ui), transform var(--motion-instant) var(--ease-ui);
  -webkit-tap-highlight-color: transparent;
}

.bundle-picker__step:disabled {
  opacity: 0.28;
  cursor: default;
}

.bundle-picker__step:not(:disabled):active {
  transform: scale(0.9);
}

@media (hover: hover) {
  .bundle-picker__step:not(:disabled):hover {
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }
}

.bundle-picker__stepval {
  min-inline-size: 22px;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Desktop: roomier 2-up grid; mobile stays a tight single column. */
@media screen and (min-width: 750px) {
  .bundle-picker__qty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .bundle-picker__qtyrow {
    padding: 10px 12px 10px 14px;
    min-height: 56px;
  }
}

/* The __price / __total / __compare rules that stood here are gone with the
   markup that used them (07-30, see the note in the template above). __per and
   __save survive because their spans are still emitted. */

/* "Most Popular" / "Best Value" — a quiet hairline tag riding the row's top border.
   Restraint: an outlined chip on the page background, not a chunky solid pill. */
.bundle-picker__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 42px;
  inset-inline-end: auto;
  transform: translateY(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-background);
  color: rgb(var(--color-foreground-rgb) / 0.6);
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
  font-size: 0.625rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-micro-caps);
  text-transform: uppercase;
  line-height: var(--leading-tight-ui);
  white-space: nowrap;
  z-index: 3;
}

/* -------------------------------------------------
   Reduced motion: disable animations
   ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bundle-picker__pill {
    transition: none;
  }

  .bundle-picker__button:active {
    transform: none;
  }
}

/* ================================================================
   PACK TILES - the PATA treatment, one skin at every width.

   History, so this does not get re-litigated a fourth time: this started as
   stacked radio rows on mobile with a SKIMS price-stack card on desktop. Both
   are gone (user 07-27, pointing at the live PATA theme: "scrap the SKIMS look
   and go back to the Patagonia-style buttons"). One skin now, because two
   designs over one set of markup is what kept breaking.

   The PATA tile is deliberately thin: label over a quiet grey note, no price,
   no badge. That is what lets the tiles sit side by side on a phone — the
   SKIMS version carried a price stack and a solid chip pinned to the top edge,
   and at ~70px per tile the chips clipped. Price lives in the buy area right
   below, so the tile is not the only place to find it.

   Selection reads as white + dark outline on the grey block — the same
   treatment as the size tiles directly above, so the buy column is one system.
   The row-era rules (row flex, radio dot, pinned flag) are still above; these
   override them, so nothing was deleted and the markup is untouched.
   ================================================================ */
.bundle-picker__options {
  display: grid;
  /* Three, matching the live PATA theme. The 5-pack tile is retired — see the
     template, where its label is blanked rather than the settings deleted. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  /* Nothing overhangs the top edge any more, so no clearance is needed. */
  padding-block-start: 0;
}

/* THE SAME TREATMENT AS THE SIZE TILES — which changed on 2026-08-02, so this
   changed with it. The two controls sit 40px apart in the same column and the
   whole point of this block has always been that they read as one system.

   Phone: outlined, 6px. Desktop: still the filled Patagonia block, restored in
   the min-width:750px section at the foot of this file, because the size tiles
   kept their fill there too. Two skins, split at the same breakpoint, agreeing
   with their neighbour at both.

   This is the GLOBAL rule, deliberately: the note at the foot of this file
   records that a phone-specific override block used to exist here and had to be
   deleted, because a stale radius inside it silently beat the radius set here.
   The way that does not happen again is to keep one declaration per property and
   let the desktop block override, rather than reintroducing a phone block. */
.bundle-picker__button {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  /* Taller than the 40px size tiles on purpose: these carry two lines, a label
     and the saving. Matching their height exactly would crush the second line. */
  min-height: 62px;
  padding: 11px 6px;
  /* --radius-control, not a literal 6px. This said "6px, matching the size tiles",
     which stopped being true on 2026-08-20 when --radius-control moved 4 -> 10: the
     size tiles followed the token and these did not, so two rows of tiles on one page disagreed by 4px. */
  border-radius: var(--radius-control);
  /* border: 0 with an INSET SHADOW for the hairline, never a real border. A
     border reserves its own track, so the fill paints to the outer radius while
     the visible edge stops at the inner one and each corner shows a faint rim —
     found on 07-25, and the reason the size tiles carry the same note. */
  border: 0;
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.16);
}

@media (hover: hover) and (pointer: fine) {
  .bundle-picker__button:not(:has(:checked)):hover {
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    border-color: transparent;
  }
}

/* Selected = solid dark fill, the SAME language as the size tiles directly
   above (user 07-27). These two controls sit 40px apart, and when one said
   "chosen" with a fill and the other with a white outline, the outlined one
   read as disabled next to the filled one. One meaning, one look. */
.bundle-picker__button:has(:checked) {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
  box-shadow: none;
  color: var(--color-background);
}

/* Tiles read selection via the outline; the radio dot was a row affordance. */
.bundle-picker__button::before {
  display: none;
}

.bundle-picker__text {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.bundle-picker__labels {
  align-items: center;
  text-align: center;
  gap: 3px;
}

.bundle-picker__main {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* The tile carries the pack and its one reason to choose it, nothing else.
   Price, per-pair and "% off" all drop: the buy area under the tiles already
   states the price, and repeating it here is what made the SKIMS card too
   tall to sit three across on a phone. */
.bundle-picker__save,
.bundle-picker__per {
  display: none;
}

/* The flag becomes the second line: static, so it flows under the label in the
   tile's column, with every pinned value from the row-era rule unwound.
   Sentence case, no tracking — PATA's note is quiet text, not a badge. */
.bundle-picker__flag {
  position: static;
  inset: auto;
  transform: none;
  max-inline-size: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgb(var(--color-foreground-rgb) / 0.55);
  /* 10px, below the 11px --font-size-2xs floor: the longest note has to clear
     ~63px inside a ~95px tile with three across on a 390px phone. A fit
     constraint, not a type choice — hence the raw value. */
  font-size: 0.625rem;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  text-align: center;
  line-height: var(--leading-tight-ui);
}

/* Inverted tile: keep the note legible against the solid fill — same treatment
   the size tiles give their waist range. */
.bundle-picker__button:has(:checked) .bundle-picker__flag {
  color: rgb(var(--color-background-rgb) / 0.75);
}

/* Desktop has room to breathe; the content model does not change, only the
   metrics. The note steps up to the 11px token since fit stops binding. */
@media screen and (min-width: 750px) {
  .bundle-picker__button {
    gap: 3px;
    min-height: 72px;
    padding: 14px 10px;
    /* The filled Patagonia block is a DESKTOP treatment now. The size tiles kept
       their fill at this breakpoint and these have to agree with them, so the
       fill and the 8px radius are restored here rather than left global.
       box-shadow back to none so the hairline does not sit under the fill. */
    border-radius: var(--style-border-radius-control, 8px);
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
    box-shadow: none;
  }

  .bundle-picker__main {
    font-size: var(--font-size-base);
  }

  .bundle-picker__flag {
    font-size: var(--font-size-2xs);
  }
}

/* There is deliberately no phone override block here.

  There was one, from when the tiles were four across at ~70px each: it
  re-declared the whole tile at tighter metrics. Three across gives ~95px, so
  none of it was earning anything any more — and the stale radius inside it was
  silently beating the radius set above, which is the same-selector-in-two-
  places collision that has cost this file real time. If a phone tweak is
  needed again, add only the property that actually differs. */

/* Dark mode needs no overrides — every colour above is token-driven
   (--color-foreground-rgb / --cw-rgb), so it adapts with the theme bridge. */
/* END_BLOCK:bundle-quantity-picker */

/* 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);
    color: var(--handle-color, var(--color-foreground));
    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;
    }
  }

  /* SPECIFICITY FIRST, the trap in this block. base.css:1280 styles text fields
     as input:not([type='checkbox'], [type='radio']), which is (0,1,1) and beats
     a bare .contact-form__input (0,1,0). Its background-color and border-color
     therefore won here, and any restyle written at (0,1,0) would have been
     silently ignored while looking correct. .contact-form .contact-form__input
     is (0,2,0) and clears it.

     BORDER. --color-input-border resolves to the literally invalid rgb() in
     light mode, because settings.palette_input_border in settings_data.json is
     an unresolved liquid reference and color-palette.liquid:198 emits it
     verbatim. The border shorthand was then invalid at computed-value time and
     dropped whole, so desktop fields had no border at all. The dark bridge
     supplies a real value, so the same field grew a 69%-white outline the
     moment you flipped the toggle: two different objects, one per mode. A
     hairline keyed to the foreground inverts by construction and reads at the
     same weight in both.

     FILL, RADIUS AND PADDING are the 07-26 fix (the fields sat on the page's
     own bone background and you could not see where to tap), promoted out of
     the max-width:749px block in nether-chrome.liquid so desktop gets it too.
     Radius is --radius-control, not the --radius-card the mobile copy carried:
     the token table marks -card deprecated off overlays and names -control as
     the input radius, and 4px is what desktop already computed from
     --style-border-radius-inputs, so desktop geometry does not move. */
  .contact-form .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: rgb(var(--color-foreground-rgb) / 0.03);
    padding: 14px 16px;
    border-radius: var(--radius-control);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.16);
    transition: border-color var(--motion-quick) var(--ease-ui), background-color var(--motion-quick) var(--ease-ui);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form .contact-form__input:focus {
    background-color: rgb(var(--color-foreground-rgb) / 0.02);
    border-color: rgb(var(--color-foreground-rgb) / 0.45);
    outline: none;
  }

  /* AUTOFILL. color-scheme (nether-theme-bridge) settles which box the browser
     chooses; these declarations state it outright, because the UA paints the
     filled field through internal rules that outrank author background-color.
     An inset shadow is the only author-side way to repaint that box and
     -webkit-text-fill-color the only way to repaint its glyphs.

     TWO stacked shadows, not one. The field fill is a 3% alpha on the
     foreground, so a single translucent shadow would let the UA paint through.
     The list paints first-on-top: the 3% layer over an opaque
     --color-background reproduces exactly the composite of an unfilled field,
     in both modes, off tokens the bridge already flips.

     SPREAD IS 1000px, not a field height. An inset spread reaches only that far
     in from each edge, so a 100px spread would leave an uncovered band down the
     middle of the comment textarea, which is rows=10 and well over 200px tall.

     One selector per rule, NOT a comma list. A single unsupported selector
     invalidates a whole list at parse time, and :-webkit-autofill is unknown to
     Firefox while :autofill is unknown to older Safari, so listed together they
     would take each other down on the browsers that need them. */
  .contact-form .contact-form__input:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px rgb(var(--color-foreground-rgb) / 0.03), inset 0 0 0 1000px var(--color-background);
    -webkit-text-fill-color: var(--color-input-text);
    caret-color: var(--color-input-text);
  }

  .contact-form .contact-form__input:autofill {
    box-shadow: inset 0 0 0 1000px rgb(var(--color-foreground-rgb) / 0.03), inset 0 0 0 1000px var(--color-background);
    -webkit-text-fill-color: var(--color-input-text);
    caret-color: var(--color-input-text);
  }

  .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:disclosures (INDEX:124) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:125) */
.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 {
    color: var(--color, inherit);
    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);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .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 {
      /* An underline field cannot take a ring without looking broken, so the
         indicator is the rule thickening and taking the ink. This was
         outline: none with nothing in its place, which made it the only
         element on the site a keyboard user could focus invisibly. */
      outline: none;
      border-block-end: 2px solid var(--color-foreground);
      padding-block-end: 11px;
    }
  }

  .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__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .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 {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-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:featured-collection (INDEX:126) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:127) */
.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;
  }

  .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%;

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

  .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__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-subdued);
    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 - 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(--theme-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(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    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(--theme-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 .theme-drawer__title {
    --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;
    }
  }

  /* 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);

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

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:129) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:130) */
.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:132) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:133) */
.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:135) */
.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:136) */
.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:nether-bundle-builder (INDEX:137) */
/* Plain row between hairlines. A tinted card with a rounded border and a
     circled chevron was tried 07-27 and rejected — it made the block heavier
     without making it clearer, and the panel fought the buy area around it. */
  /* OPTION C (owner 2026-08-03). The panel moved ABOVE the buy button and became
     an opt-in line rather than a second offer.

     The complaint it answers: the pack tiles and this builder asked the same
     question twice, each with its own submit, so two add-to-cart buttons sat on
     screen at the moment the path should be narrowest. The block's own doc has
     always claimed it is "the second, opt-in path, with its own submit, so the
     two never fight" — that was simply not true while both submits were visible.

     The hairlines are gone with the reposition. They framed this as its own band
     when it sat below the button; sitting directly under the pack tiles it reads
     as part of that decision, and a rule between them would cut the group in
     half. */
  .nether-bb {
    margin-block-start: var(--margin-sm, 8px);
  }

  /* Closed, this is one quiet line, not an accordion header. The chevron and the
     bold title were right for a standalone band and are too loud for a link that
     sits between the pack tiles and the primary action. */
  .nether-bb:not([open]) .nether-bb__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium, 500);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgb(var(--color-foreground-rgb) / 0.35);
  }

  /* The subheading is a pitch ("save up to 10%, free shipping"). It belongs in
     the panel once someone has opted in, not on the line that offers it: the
     pack tiles directly above already carry the discount and the shipping. */
  .nether-bb:not([open]) .nether-bb__sub {
    display: none;
  }

  /* ONE BUTTON ON SCREEN. Open the mix panel and the single-variant action steps
     aside, because it would add the wrong thing: it submits the selected variant
     at the pack quantity, which is exactly what a mixed pack is not.

     :has() on the container rather than a JS class, so the swap happens in the
     same paint as the toggle and cannot lag behind it. The accelerated buttons
     go too, for the same reason and more urgently — they skip the cart entirely.

     Exempted in the theme editor (owner 2026-08-03: "add to cart text is
     glitching on shopify theme editor after unclicking the bundle builder").
     The editor opens this details on block select and closes it on deselect, so
     the storefront's deliberate swap fires as a flicker every time you click the
     block. Nothing is wrong with the rule; the editor is just driving [open] as
     a side effect of selection. Authoring wants both buttons visible anyway. */
  html:not([data-bb-editor]) .product-details:has(.nether-bb[open]) .buy-buttons-block,
  html:not([data-bb-editor]) .product-details:has(.nether-bb[open]) .accelerated-checkout,
  html:not([data-bb-editor]) .product-details:has(.nether-bb[open]) [class*='accelerated-checkout'] {
    display: none;
  }

  /* list-item, not flex: Safari <=15 makes a summary with any other display
     non-interactive. Layout lives on the inner span. */
  .nether-bb__summary {
    display: list-item;
    list-style: none;
    padding-block: var(--padding-md, 16px);
    cursor: pointer;
  }

  .nether-bb__summary::-webkit-details-marker {
    display: none;
  }

  .nether-bb__summary-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm, 12px);
  }

  .nether-bb__summary-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Contrast instead of a container.

     The row went unnoticed because its title was 14px/600 and its subtitle
     12px — near enough the same as the body text stacked around it, so nothing
     said "this is a thing you open". Rather than wrap it in a surface (tried,
     rejected — it just made the block heavier), the two lines are pulled apart:
     the title steps up to heading size and the subtitle drops further back.
     Same ink, more hierarchy. */
  .nether-bb__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold, 500);
    letter-spacing: var(--tracking-tight, -0.01em);
    color: var(--color-foreground);
  }

  .nether-bb__sub {
    /* Nether scale only in this file (single hyphen). --font-size-xs is 12px. */
    font-size: var(--font-size-xs);
    line-height: var(--leading-ui);
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .nether-bb__chev {
    flex: 0 0 auto;
    inline-size: 14px;
    block-size: 14px;
    transition: rotate var(--motion-exit) var(--ease-ui);
  }

  .nether-bb[open] .nether-bb__chev {
    rotate: 180deg;
  }

  .nether-bb__chev svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .nether-bb__body {
    padding-block-end: var(--padding-md, 16px);
  }

  .nether-bb__note {
    margin: 0 0 var(--margin-sm, 12px);
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
  }

  /* Clear the sticky header when the open builder scrolls itself into view. */
  .nether-bb {
    scroll-margin-block-start: 80px;
  }

  /* The transition belongs on the base selector, not on the state-gated one
     below. Declared inside html[data-nether-needs-size] it stopped matching the
     instant the attribute was removed, so the dim faded in and then snapped
     back to full opacity when a size was picked. Same split, and the same
     reason, as the transitions in snippets/nether-pdp.liquid. */
  .nether-bb {
    transition: opacity var(--motion-exit) var(--ease-ui);
  }

  /* Waiting its turn until a size is picked — same treatment as the pack tiles
     directly above, so the buy area reads as one sequence rather than two
     controls with different rules. The click handler still fires (it prompts
     for the size), so this dims without going pointer-events: none. */
  html[data-nether-needs-size] .nether-bb {
    opacity: 0.45;
  }

  html[data-nether-needs-size] .nether-bb__chev {
    opacity: 0.5;
  }

  /* Focus mode: while the builder is open the single-pack tiles it replaces
     step out of the way, so the multi-pack is the only thing being decided.
     Collapsed rather than display:none so it animates, and so nothing inside
     loses its state.

     max-block-size is set in PIXELS by the script, never in CSS. Transitioning
     max-height from its default `none` is not animatable, so a CSS-only version
     snaps shut with no motion (user 07-26: "it just looks abrupt"). The script
     measures the real height first and animates between two concrete numbers.

     The `transition` shorthand itself lives in snippets/nether-pdp.liquid, which
     already declares one on this exact selector — snippet CSS loads after block
     CSS, so a second declaration here was silently discarded. */
  /* Mobile only (user 07-26: "we only need that hiding stuff on mobile, there's
     lots of space for it" on desktop). Clearing the buy area to make room is a
     small-screen compromise; on the two-column desktop layout the builder and
     the pack tiles sit side by side happily, and hiding controls there would be
     taking something away for no reason. */
  @media screen and (max-width: 749px) {
    html[data-nether-bb-open] .product-details .bundle-picker,
    html[data-nether-bb-open] .product-details .product-form-buttons,
    html[data-nether-bb-open] .product-details .nether-ship-note {
      overflow: hidden;
      opacity: 0;
      margin-block: 0;
      pointer-events: none;
      /* Scope the reflow to this subtree. Animating a height reflows everything
         around it every frame, which was noticeable as lag on iPhone. */
      contain: layout paint;
    }

    /* The sticky bar is a third way to buy. It slides out with the rest so the
       builder is genuinely the only live control, and slides back on close.

       Base transition, gated properties: same split as .nether-bb above. With
       the transition inside the [data-nether-bb-open] rule the bar only ever
       animated out. Closing removed the attribute, the transition stopped
       matching, and the bar cut straight back into place. */
    .sticky-add-to-cart {
      transition: translate var(--motion-panel) var(--ease-ui), opacity var(--motion-exit) var(--ease-ui);
    }

    html[data-nether-bb-open] .sticky-add-to-cart {
      opacity: 0;
      translate: 0 100%;
      pointer-events: none;
    }
  }

  /* The builder rises into the space the collapse just freed. No fill-mode:
     if this never runs the body must sit at its natural position, not hold
     frame 0 and stay invisible. No per-file reduced-motion gate any more:
     the duration rides --motion-scale and the rise rides --motion-rise, so
     the tokens collapse it in one place. */
  html[data-nether-bb-open] .nether-bb__body {
    animation: nether-bb-rise var(--motion-panel) var(--ease-enter);
  }

  @keyframes nether-bb-rise {
    from {
      opacity: 0;
      translate: 0 var(--motion-rise);
    }
  }

  .nether-bb__rows {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs, 6px);
  }

  .nether-bb__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-sm, 12px);
    padding: 10px 12px;
    border: 1px solid var(--line-control);
    border-radius: var(--radius-control);
  }

  .nether-bb__row.is-active {
    border-color: var(--ink-secondary);
  }

  /* Silhouette pips: one per pair, filling in this row's colour as the pack is
     built. Sits on its own line under the stepper so adding a pair never
     reflows the controls. */
  .nether-bb__slots {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    min-block-size: 16px;
  }

  .nether-bb__slots:empty {
    display: none;
  }

  /* Empty slot: a hollow ghost showing there is room for another pair. */
  .nether-bb__pip {
    inline-size: 18px;
    block-size: 18px;
    border-radius: var(--radius-control);
    background: transparent;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.28);
    transition: background-color var(--motion-quick) var(--ease-ui), box-shadow var(--motion-quick) var(--ease-ui);
  }

  /* Filled: the colourway itself, plus a soft halo in the same colour so a dark
     chip still reads as a chosen thing on a light background. The halo is a
     second box-shadow layer rather than a filter, so it costs nothing to paint
     and never blurs the chip's own edge. --bb-dot-rgb comes from the shared
     resolver alongside --bb-dot. */
  .nether-bb__pip.is-filled {
    background-color: var(--bb-dot, #888);
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 0.18),
      0 0 0 3px rgb(var(--bb-dot-rgb, 136 136 136) / 0.18);
  }

  /* Overshoot retired (feel WO-2): the pop is now a plain settle, scale 0.9
     to 1 on --ease-ui at --motion-instant. Token durations carry the
     reduced-motion gate, so the old per-file media wrapper went with it. */
  .nether-bb__pip.is-just-filled {
    animation: nether-bb-pop var(--motion-instant) var(--ease-ui);
  }

  /* No fill-mode: if this never runs the pip must stay at its natural size,
     not hold frame 0 (that bug has bitten this codebase three times). */
  @keyframes nether-bb-pop {
    0% { transform: scale(0.9); }
    100% { transform: scale(1); }
  }

  .nether-bb__swatch {
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    background: var(--bb-dot, #888);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  }

  .nether-bb__name {
    flex: 1 1 auto;
    font-size: var(--font-size-sm);
  }

  .nether-bb__stepper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs, 8px);
  }

  .nether-bb__step {
    inline-size: 32px;
    block-size: 32px;
    border: 1px solid var(--line-control);
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    cursor: pointer;
    touch-action: manipulation;
  }

  .nether-bb__step[disabled] {
    opacity: 0.3;
    cursor: default;
  }

  .nether-bb__qty {
    min-inline-size: 20px;
    text-align: center;
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
  }

  .nether-bb__foot {
    margin-block-start: var(--margin-md, 16px);
  }

  .nether-bb__count {
    margin: 0 0 var(--margin-xs, 8px);
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
  }

  .nether-bb__add {
    inline-size: 100%;
    min-block-size: 48px;
    border: none;
    border-radius: var(--radius-pill);
    /* Full-strength black, not var(--color-foreground) (owner 2026-08-03: "after
       building a bundle the add to cart button still looks inactive").

       It was enabling correctly the whole time — measured disabled:false,
       opacity:1 with the pack filled. The problem was the colour: this token
       resolves to #000000cf, so an ENABLED button painted at 81% black and read
       as a dimmed copy of the solid-black primary right above it. Same rgb
       channel at full opacity, so it stays on the token and simply stops
       borrowing the alpha. */
    background: rgb(var(--color-foreground-rgb, 0 0 0));
    color: var(--color-background);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 500);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
  }

  .nether-bb__add[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  .nether-bb__msg {
    margin: var(--margin-xs, 8px) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-error, #c8102e);
    text-align: center;
  }

  .nether-bb__msg[hidden] {
    display: none;
  }

  /* No per-file reduced-motion block any more (feel WO-1): every duration
     above rides --motion-scale, so the chevron rotate and the sticky bar's
     slide both collapse to an instant snap through the one gate in
     typography-tokens.liquid. The bar still hides and shows. */
/* END_BLOCK:nether-bundle-builder */

/* START_BLOCK:nether-colorway (INDEX:138) */
/* When the dot swatch drives colour, hide the native variant fieldset for it
     so "Color" is not shown twice. Target the server-rendered data-option-id
     (ends in -color) so it survives Horizon's variant-change section morph;
     the JS-set attribute is a fallback for other button configs. !important is
     deliberate: it must beat the equal-width-buttons grid display rule. */
  /* Scoped to a container that actually holds the colorway block: block
     stylesheets bundle GLOBALLY, and the unscoped rule also hid Color inside
     the quick-add modal (where quick-add.js strips this block on mobile),
     leaving no colour control at all there. */
  .product-details:has(.nether-colorway) .variant-option[data-option-id$="-color"],
  .product-details:has(.nether-colorway) .variant-option[data-nether-cw-hidden] {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }

  .nether-colorway {
    /* The mark. Declared here rather than on the dot so the swatch row's gap and
       the dot's hit pad both read the same number and cannot drift apart.

       28px -> 24px (owner 2026-08-03). The dot no longer has to carry the whole
       "this is the colour choice" job on its own now that the unselected ones
       dim, so it can be quieter. The tap target does NOT shrink with it: the
       ::before pad is calc'd against --minimum-touch-target, so it grows by
       exactly the 4px the dot gave up and stays at 44px. */
    --nether-dot: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .nether-colorway__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .nether-colorway__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: normal;
    color: var(--color-foreground);
  }

  .nether-colorway__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  /* The single-colourway caption. Secondary ink, no label, no dot, no row: it
     is a statement, and the only thing that separates it from the chooser above
     is that it never pretends to be pressable. */
  .nether-colorway__single {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--ink-secondary);
  }

  /* Colour count hidden (user 07-26). The swatches sit directly below it and
     there are three of them — a "3 Colors" label on the far end restates what
     the row already shows, and pulled the eye away from the swatches. Kept in
     the markup for screen readers rather than deleted. */
  .nether-colorway__count {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .nether-colorway__swatches {
    display: flex;
    flex-wrap: wrap;
    /* Pitch, not decoration: dot + gap = --minimum-touch-target, so the 44px hit
       pads below tile edge to edge. At the old 10px the pads overlapped by 6px,
       the later dot in the DOM won that strip, and every interior dot was left
       with a 38px target. Applies down the wrapped axis too. */
    gap: calc(var(--minimum-touch-target, 44px) - var(--nether-dot, 28px));
  }

  /* 28px of mark, 44px of target. The dot's own box stays exactly 28px, because
     the selected ring, the focus outline and nether-pdp.liquid's colorway accent
     override are all sized against it; the target comes from a transparent
     ::before that bleeds half the growth past all four sides.

     overflow: hidden had to go for that pad to be tappable — a pseudo-element
     clipped out of its parent does not hit-test — so the two things it was
     clipping now hold themselves inside the dot. See __dot-img and the sold-out
     slash below. */
  /* ROUNDED RECTANGLES, NOT CIRCLES (owner 2026-09-09, on dbrand's mnml page:
     "the non circle swatches look kinda cool").

     It is not only a look. This swatch row has fought one problem since it was
     built: Midnight #1A1A1A, Abyss #2A304E and Storm #2D1B4E are three
     near-blacks about 1.15:1 apart, and the note below records that dimming the
     unselected ones was tried and reverted because a shopper could not tell
     what Abyss actually looked like. The fix available then was a bigger
     circle — 22px to 30px, and later back to 24px.

     A rectangle sidesteps the argument by giving more colour for the same
     vertical space. At 52x32 it carries roughly three times the fill of a 24px
     circle, so the three darks separate on area rather than on a difference
     the eye cannot resolve. Same reason a paint chip is a rectangle.

     The hit pad below still resolves to 44px on both axes, and min(0px, ...)
     is what keeps it honest: the box is already wider than the target, so the
     inline inset clamps to zero instead of shrinking the tappable area. */
  .nether-colorway__dot {
    position: relative;
    display: inline-block;
    inline-size: var(--nether-dot-w, 52px);
    block-size: var(--nether-dot-h, 32px);
    padding: 0;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-radius: var(--nether-dot-r, 9px);
    background-color: var(--dot, #888);
    /* FLAT COLOUR, NO SHEEN (owner 2026-09-10: "machine very much. It kinda
       changes the color a bit or, like, no other site seems to do this").

       A white gradient was laid over these on 09-09 to answer "just brighten up
       the swatches a bit". It washed the top of each swatch up to 22% toward
       white, so the swatch stopped matching the fabric — and the swatch IS the
       product colour (the note below), a preview rather than a decoration. It
       also re-opened a question already closed on 2026-08-12, when the pack
       builder's bubbles settled on flat colour and a hairline with no sheen
       because the three colours genuinely differ without one. Flat it is, in
       both places. */
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow var(--motion-instant) var(--ease-ui), transform var(--motion-instant) var(--ease-ui);
    -webkit-tap-highlight-color: transparent;
  }

  .nether-colorway__dot::before {
    content: '';
    position: absolute;
    inset-block: calc((var(--nether-dot-h, 32px) - var(--minimum-touch-target, 44px)) / 2);
    inset-inline: min(0px, calc((var(--nether-dot-w, 52px) - var(--minimum-touch-target, 44px)) / 2));
  }

  /* Circular in its own right now that the dot does not clip it. inset: 0 lays it
     on the padding box, so a 50% radius traces the exact curve overflow: hidden
     used to cut and the 1px border still shows around it. */
  .nether-colorway__dot-img {
    position: absolute;
    inset: 0;
    border-radius: var(--nether-dot-r, 9px);
    background-size: cover;
    background-position: center;
  }

  /* No local :active (feel WO-7). The press is the global touch rule in
     snippets/nether-chrome.liquid — scale(0.97) on every button-shaped
     control, pointer devices excluded because hover is already their
     answer. The old local rule ran at 0.92 on every input mode, so a
     mouse click compressed the dot as well as a thumb. */

  /* NO dimmed state on these, deliberately, and this was tried and reverted the
     same day. Dimming the unselected dots to 0.45 made every colour except the
     chosen one read as a washed-out version of itself, so a shopper could not
     see what Abyss or Storm actually looked like until they tapped it (owner
     2026-08-03: "those should always be visible... looks like you have to select
     a color to get its actual color").

     The dot IS the product colour. It is a preview, not a toggle, so selection
     has to be shown AROUND it rather than by degrading it. That is the ring
     below. If the selected state ever needs to read harder, make the ring
     heavier — do not touch the fill. */
  .nether-colorway__dot.is-selected {
    box-shadow:
      0 0 0 2px var(--color-background),
      0 0 0 3.5px var(--color-foreground);
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-colorway__dot:not(.is-selected):hover {
      box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px rgb(var(--color-foreground-rgb) / 0.4);
    }
  }

  .nether-colorway__dot[data-soldout='true'] {
    opacity: 0.45;
  }

  /* Self-contained: the slash spans the 26px padding box, so rotated 45 degrees
     its ends land on that circle's edge and its corners reach about 0.4px into
     the 1px border ring. It never crosses the outer edge of the dot, which is
     why dropping overflow: hidden costs it nothing. */
  .nether-colorway__dot[data-soldout='true']::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    block-size: 1px;
    background: rgb(var(--color-foreground-rgb) / 0.6);
    transform: rotate(-45deg);
  }
/* END_BLOCK:nether-colorway */

/* START_BLOCK:nether-made-with (INDEX:139) */
/* ---- The strip in the buy column ---- */
  /* Scaled back 07-26: the strip read too large on an iPhone next to the buy
     controls. Tighter block padding and gap, smaller mark. */
  .nether-mwb {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-block: 14px;
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* Full-strength and bold (owner 2026-08-03: "shouldn't be a lighter color. It
     should just be black and bold as well"). It used to sit at 0.55 as a quiet
     eyebrow, which worked when this block stood alone under the tabs. Now that
     it has been hoisted INTO the Designed For panel it sits directly beneath
     Trail Grip and Valley Pouch, and a faded label next to those two reads as a
     caption rather than the third item in the list. */
  .nether-mwb__eyebrow {
    margin: 0;
    opacity: 1;
    color: var(--color-foreground);
    font-weight: var(--font-weight-bold, 700);
  }

  /* The official TENCEL files carry heavy transparent padding — the artwork
     is only ~43% x 26% of the canvas (measured). The mark box crops to the
     CONTENT bounds and oversizes the image inside so the logo itself fills
     the box. Numbers are tuned to those files. */
  .nether-mwb__mark {
    position: relative;
    inline-size: clamp(124px, 34vw, 160px);
    aspect-ratio: 3.2 / 1;
    overflow: hidden;

    /* How far the ARTWORK is pushed right inside the crop box, so there is one
       number to turn instead of hunting a magic value inside a translate().

       This cannot be derived. The mark's BOX is already flush with the text:
       measured, .nether-mwb__mark, "Made with" and "Learn more" all start at the
       same x. What is off is the ink inside it, because the official TENCEL file
       carries transparent padding that no measurement in the browser can see
       (the image reports 0x0 until it decodes, and the crop hides the rest). So
       this is tuned by eye against a screenshot, twice now: +4px on 07-26 when
       the ink hung LEFT, and back to +1px on 2026-08-03 when the owner read the
       same correction as overshooting to the right. */
    --mwb-ink-nudge: 1px;
  }

  .nether-mwb__img {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 232%;
    max-inline-size: none;
    block-size: auto;
    /* --mwb-ink-nudge moves the ARTWORK, not the box, and the reasoning for the
       value lives on .nether-mwb__mark where it is declared. Centring maths
       stays in the translate so the crop is unchanged. */
    transform: translate(calc(-50% + var(--mwb-ink-nudge, 1px)), -44.7%);
    display: block;
  }

  .nether-mwb__img--light {
    mix-blend-mode: multiply;
  }

  .nether-mwb__img--dark {
    display: none;
  }

  html[data-theme='dark'] .nether-mwb__img--light {
    display: none;
  }

  html[data-theme='dark'] .nether-mwb__img--dark {
    display: block;
    mix-blend-mode: screen;
  }

  .nether-mwb__learn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* ---- The pop-up ---- */
  .nether-mwb__root {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 18px;
    visibility: hidden;
  }

  .nether-mwb__root.is-open {
    visibility: visible;
  }

  /* The one scrim: 0.4 black over a 5px blur was this modal's own recipe and
     read heavier than every other overlay on the PDP, so the page dimmed twice
     as hard for TENCEL as it does for the size guide or the quick-buy sheet.
     Token now, so all of them darken by the same amount. 2026-08-10. */
  .nether-mwb__overlay {
    position: absolute;
    inset: 0;
    background: var(--scrim, rgb(0 0 0 / 0.18));
    backdrop-filter: blur(var(--scrim-blur, 4px));
    -webkit-backdrop-filter: blur(var(--scrim-blur, 4px));
    opacity: 0;
    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  .nether-mwb__root.is-open .nether-mwb__overlay {
    opacity: 1;
  }

  .nether-mwb__modal {
    position: relative;
    inline-size: min(560px, 100%);
    max-block-size: min(86vh, 86dvh);
    /* Desktop: a proper editorial canvas, Stance-scale. */
    @media screen and (min-width: 990px) {
      inline-size: min(1040px, 94vw);
      max-block-size: 90vh;
    }
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-panel);
    background: var(--color-background, #f9f7f4);
    color: var(--color-foreground, #141414);
    box-shadow: var(--shadow-modal);
    opacity: 0;
    /* One travel, one zoom (feel WO-3), fade and move on ONE track.

       --motion-panel, not --motion-base (2026-08-10). This is a full-size
       centred sheet and every other one — the size guide, the quick-buy, the
       cart — opens on the panel step. On --motion-base it arrived noticeably
       quicker than they do, which reads as a different component rather than a
       faster one. Both halves stay on the same duration or the travel and the
       fade split again. */
    transform: translateY(var(--motion-rise)) scale(var(--motion-zoom));
    transition: opacity var(--motion-panel) var(--ease-enter), transform var(--motion-panel) var(--ease-enter);
  }

  .nether-mwb__root.is-open .nether-mwb__modal {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* Brand-dark header, always — the white TENCEL logo lives here. */
  .nether-mwb__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #141414;
    color: #ffffff;
    flex-shrink: 0;

    @media screen and (min-width: 990px) {
      padding: 18px 28px;
    }
  }

  /* Same padding-crop as the strip mark, sized for the dark header bar. */
  .nether-mwb__head-crop {
    position: relative;
    display: block;
    inline-size: clamp(130px, 34vw, 165px);
    aspect-ratio: 3.2 / 1;
    overflow: hidden;

    @media screen and (min-width: 990px) {
      inline-size: 190px;
    }
  }

  .nether-mwb__head-logo {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 232%;
    max-inline-size: none;
    block-size: auto;
    transform: translate(-50%, -44.7%);
    display: block;
  }

  .nether-mwb__head-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
  }

  .nether-mwb__close {
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    transition: background var(--motion-quick) var(--ease-ui);
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-mwb__close:hover {
      background: rgb(255 255 255 / 0.1);
    }
  }

  .nether-mwb__close svg {
    inline-size: 20px;
    block-size: 20px;
  }

  .nether-mwb__body {
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    @media screen and (min-width: 990px) {
      padding: 32px 44px 36px;
      gap: 24px;
    }
  }

  .nether-mwb__media {
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .nether-mwb__media-img {
    inline-size: 100%;
    block-size: auto;
    display: block;
  }

  .nether-mwb__intro {
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / 0.85);
    text-align: center;
    max-inline-size: 42ch;
    margin-inline: auto;

    @media screen and (min-width: 990px) {
      font-size: var(--font-size-base);
      max-inline-size: 48ch;
    }
  }

  .nether-mwb__intro p {
    margin: 0 0 0.8em;
  }

  .nether-mwb__intro p:last-child {
    margin-block-end: 0;
  }

  /* Editorial rows (Stance pattern): media one side, text the other,
     alternating, split by hairlines — no card boxes. */
  .nether-mwb__rows {
    display: flex;
    flex-direction: column;
  }

  .nether-mwb__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 20px;
  }

  .nether-mwb__row + .nether-mwb__row {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .nether-mwb__row-media {
    min-width: 0;
  }

  .nether-mwb__row-img {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-card);
    display: block;
  }

  .nether-mwb__row-icon {
    inline-size: 52px;
    block-size: 52px;
    object-fit: contain;
  }

  html[data-theme='dark'] .nether-mwb__row-icon {
    filter: invert(1);
  }

  .nether-mwb__row-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
  }

  .nether-mwb__row-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
  }

  .nether-mwb__row-line {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / 0.7);
    max-inline-size: 36ch;
  }

  @media screen and (min-width: 750px) {
    .nether-mwb__row {
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: clamp(24px, 4vw, 56px);
      padding-block: 26px;
    }

    /* Alternate sides row by row so it reads as a story, not a template. */
    .nether-mwb__row:nth-child(even) .nether-mwb__row-media {
      order: 2;
    }
  }

  /* Fiber certifications — quiet text chips, no licensed logos needed */
  .nether-mwb__certs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-block-start: 4px;
  }

  .nether-mwb__certs-label {
    margin: 0;
    opacity: 0.5;
  }

  .nether-mwb__certs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .nether-mwb__cert {
    padding: 6px 12px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    white-space: nowrap;
  }

  .nether-mwb__certs-note {
    margin: 0;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-foreground-rgb) / 0.55);
    text-align: center;
  }

  body.nether-mwb-lock {
    overflow: hidden;
  }
/* END_BLOCK:nether-made-with */

/* START_BLOCK:nether-pack-builder (INDEX:141) */
/* No margin on .nether-pb itself. The buy column is a gap-managed flex column,
     so a margin here adds to the gap and makes this block's seams the only ones
     bigger than every other. Spacing belongs to the column, not to the block. */
  .nether-pb__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-block-end: 10px;
  }

  /* Quiet on purpose. This is a prerequisite, not an error — the customer has
     not done anything wrong yet, they just have not got to the size row. It
     takes the same muted weight as the other supporting lines in this block
     rather than the --color-error red the pack row uses when Add is pressed
     with nothing chosen, which IS a correction. */

  .nether-pb__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 500);
  }

  .nether-pb__unit {
    font-size: var(--font-size-xs);
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
  }

  /* The SAME TILE as the size row directly above, deliberately.
     This was an iOS segmented control: a rounded track, a sliding thumb, and a
     separate 15px "ladder" row of savings underneath it. Two control idioms and
     two rows, sitting immediately below a row of square size tiles. Measured
     against SAXX's build-your-bundle page (owner 2026-08-12, "it looks a lot
     cleaner, I don't know why"), that mismatch was most of the answer: they use
     one control shape throughout and we were using four.
     The saving now lives on a second line INSIDE the tile, which is exactly how
     the size tiles already carry their measurement (S / 29-32"). One control
     language, one row instead of two, and no information lost. */
  .nether-pb__seg {
    display: grid;
    grid-template-columns: repeat(var(--pb-n, 3), 1fr);
    gap: 6px;
  }

  /* Pressing Add with no pack chosen marks the pack row, exactly the way
     pressing it with no size chosen marks the size row. Same red, same 1px,
     same 4px offset, same chip underneath, because it is the same sentence:
     here is the control you still have to touch.

     The gate itself is in the window-capture click handler; this is only the
     part the customer can see. Blocking the press without saying where to look
     is a dead button, which is the fault this whole widget keeps being fixed
     for. --color-error is the theme's one red and nothing else on a PDP spends
     it. */
  /* EVERYTHING PAINTS INSIDE THE ROW (fixed 2026-09-05).

     This was drawn entirely outside .nether-pb__seg — a 1px outline at
     +4px offset, and the message absolutely positioned 10px BELOW the row.
     Its ancestor `.nether-pb` carries `overflow: hidden`, and the seg is flush
     with it, so the clip cut the outline off on every side and cut the top off
     the message. The owner saw a stray red rule under the last pack tile with a
     line of red text floating beneath it, and called it broken, which it was.

     Measured, not guessed: `.nether-pb` computed overflow `hidden`, seg box
     331x272 sitting at the parent's own left edge, ::after inset-block-start
     282px — 10px past the bottom of the clip.

     outline-offset is negative so the ring draws inside the border box, and the
     message is an ordinary flex item at the end of the column rather than an
     absolutely positioned one. Nothing leaves the box, so nothing can be
     clipped, and the 30px margin reserved for the old absolute chip goes with
     it. */
  html[data-nether-pack-error] .nether-pb__seg {
    outline: 1px solid var(--color-error, #c8102e);
    outline-offset: -1px;
    border-radius: var(--radius-control, 10px);
  }

  html[data-nether-pack-error] .nether-pb__seg::after {
    content: 'Choose a pack size.';
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-error, #c8102e);
    margin-block-start: 8px;
  }

  .nether-pb__segbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    /* 56, up from 44 (owner 2026-08-22: "a little bigger, a little more
       roomy"). This reverses the 2026-08-12 "let's shrink the tabs" note that
       used to sit here and took them from 52 to the 44px minimum tap target.
       That reasoning still holds on its own terms — the option cards below do
       the explaining — but 44 plus 5px of padding is what produced the tight
       hairline look being replaced, and these now sit directly above size
       tiles that are 64px, so the two rows disagreeing was visible. */
    min-block-size: 50px;
    /* 4px inline, not 8. The tiles are ~78px wide at 375, so 8px a side left
       62px of content and "Free shipping" wrapped to two lines while "Save 5%"
       stayed on one — the selected tile then sat a line taller than its
       neighbours and broke the row (owner 2026-08-22: "the 2 pair button looses
       its consitancy"). 4px restores ~70px, which fits the longest label. The
       vertical padding carries the roominess; the horizontal padding was only
       ever costing width. */
    padding: 8px 4px;
    border: 0;
    /* --radius-control (10px), not a hardcoded 6 (2026-08-20). 6px is a
       Material-1 radius and it is also the house rule: common radii reference
       a token so the whole control set moves together. These tiles sit
       directly above the size tiles, which already take this token, and the
       two rows disagreeing by 4px was visible. */
    border-radius: var(--radius-control);
    /* GREY BLOCK, not a hairline outline (owner 2026-08-22, porting the look
       of the live PATA theme: "all we're porting is the grayish background and
       the slightly bigger button").

       The inset hairline that used to be here is what made these read as the
       "Skims-style" outlined tiles. The size tiles directly below already use
       exactly this fill (snippets/nether-pdp.liquid:675), so this is the two
       control rows finally agreeing rather than a new grey being invented.

       No border and no inset ring on purpose: a filled tile carries its own
       edge, and the ring plus a fill reads as two boxes. Selection is still the
       solid dark fill, focus still draws its own outline. */
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
    /* The dim lives in the colour, not in opacity. Opacity composites the whole
       element including the focus-visible ring drawn over it, so a keyboard user
       tabbing across the pill landed on a 55%-strength outline (2026-08-10).
       Not a straight swap of the number: --color-foreground is #000000cf, so
       opacity 0.55 over it was an effective 0.45 alpha and this is a true 0.55.
       Unselected labels sit a shade darker than they did, which the selected
       state at 0.81 still clears comfortably. */
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    /* 500, matching the size tiles. Weight no longer changes between states:
       the fill carries selection now that there is no thumb to do it. */
    font-weight: var(--font-weight-semibold, 500);
    letter-spacing: var(--tracking-normal);
    cursor: pointer;
    /* Motion tokens, not 0.18s literals. These predate the token layer and were
       the only easing on the page still declaring its own curve. */
    transition:
      background-color var(--motion-quick) var(--ease-ui),
      color var(--motion-quick) var(--ease-ui),
      box-shadow var(--motion-quick) var(--ease-ui);
  }

  /* Material 3 state layers. An UNSELECTED tile tints toward the ink on hover
     and a little further on press; a SELECTED tile is already a solid ink slab,
     so it lightens instead. Tint rather than lift: no shadow, no scale.

     Pointer gated, or a phone tap latches the hover tint and the tile reads as
     selected next to the one that actually is. */
  @media (hover: hover) and (pointer: fine) {
    .nether-pb__segbtn:not([aria-checked='true']):hover {
      background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.05);
    }
  }

  .nether-pb__segbtn:not([aria-checked='true']):active {
    background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.09);
  }

  .nether-pb__segbtn[aria-checked='true']:active {
    background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.86);
  }

  /* Weight stays constant between states: bolding on select makes the label
     grow a pixel and the whole pill breathe. Selection is carried by the thumb
     and by contrast alone. That contrast is now full-strength foreground against
     the dimmed foreground above; it was opacity 1 against 0.55, which read the
     same but faded the focus ring with it (2026-08-10). */
  /* Bright white in light mode, deliberately, matching the selected size tile
     above (owner 2026-08-10: "the size plus the measurement should go to bright
     white"). NOT var(--color-background), which is the warm #f9f7f4 and reads
     off-white against a black fill. */
  .nether-pb__segbtn[aria-checked='true'] {
    /* var(--color-foreground), not the bare rgb triplet (owner 2026-08-26: "a
       charcoal size selector and then flat black on the pack selector"). The
       token carries 0.81 alpha, so the size tiles above render charcoal while
       this dropped the alpha and rendered pure black — two different blacks in
       one column. Same token now, same charcoal. */
    /* Flat black, matching the size chips and both buy buttons. Briefly
       --color-foreground on 2026-08-26; see the long note in nether-pdp.liquid
       for why that came back. */
    background: rgb(var(--color-foreground-rgb, 0 0 0));
    box-shadow: none;
    color: #ffffff;
  }

  /* Dark mode inverts the fill, so the label has to invert with it.
     --color-foreground-rgb flips to 255 255 255, so the tile became a white slab
     carrying white text: no label at all, and it read as aggressively
     pre-selected because it was the only filled object on the screen (owner
     2026-08-12, on live). */
  html[data-theme='dark'] .nether-pb__segbtn[aria-checked='true'] {
    color: var(--color-background);
  }

  /* The saving, on the tile it belongs to rather than in a row of its own.
     Never bold and never coloured: it is a supporting fact, and the tile's fill
     is already carrying all the emphasis this control needs. */
  .nether-pb__segsave {
    font-size: var(--font-size-3xs, 10px);
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0.62;
    font-variant-numeric: tabular-nums;
  }

  .nether-pb__segbtn[aria-checked='true'] .nether-pb__segsave {
    opacity: 0.78;
  }

  .nether-pb__options {
    display: grid;
    gap: 6px;
    margin-block-start: 16px;
  }

  .nether-pb__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    inline-size: 1px;
    block-size: 1px;
  }

  /* 18px, up from 14. With the band now sized to its own content the declared
     gap is finally the real one, and 14 measured true is tighter than 14 looked
     when it was being eaten by the overflow. 18 gives the swatches room to read
     as a group before the sentence starts. */
  .nether-pb__opt {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 14px;
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.12);
    border-radius: var(--radius-card);
    cursor: pointer;
    /* Tokens, and a state layer rather than a border-colour swap on press
       (Material 3). The 0.18s literals predate the motion tokens. */
    transition:
      border-color var(--motion-quick) var(--ease-ui),
      background-color var(--motion-quick) var(--ease-ui);
  }

  /* Material 3 state layer: press tints the surface instead of moving it. No
     shadow and no scale, per the iOS/Material rule — a card that lifts on tap
     is the dated pattern this is replacing. */
  .nether-pb__opt:active {
    background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

  @media (hover: hover) {
    .nether-pb__opt:hover {
      border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.35);
    }
  }

  /* Thickens from the inside so selecting never reflows the row by a pixel;
     the faint wash separates chosen from merely hovered. */
  .nether-pb__radio:checked + .nether-pb__opt {
    border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.85);
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb, 0 0 0) / 0.85);
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.025);
  }

  .nether-pb__radio:focus-visible + .nether-pb__opt {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* The band. One gradient, not N chips: adjacent colours blend across the
     seams, and the JS spaces the stops so each colour holds flat through its
     middle and only the joins soften. */
  /* A countable row of bubbles, one per pair. Overlapped so a 5-pack still
     fits the slot, left-to-right so the first pair reads first. */
  .nether-pb__band {
    display: flex;
    align-items: center;
    flex: none;
    min-inline-size: 56px;
    block-size: 40px;
  }

  /* The colourway swatch, reused. Same 1px hairline ring and same flat fill as
     .nether-colorway__dot in nether-colorway.liquid, deliberately: these are the
     same three colours and they should be the same object wherever they appear.
     Smaller here because up to five sit in one slot. */
  .nether-pb__dot {
    /* 30, not 22 (owner 2026-08-12: "the swatches and the text a little bit
       bigger and easier to see"). These are three near-blacks, so a 22px circle
       carrying a 1.15:1 difference was asking the eye to do work it cannot do.
       Bigger circle, more of the colour, easier to count. */
    inline-size: 34px;
    block-size: 24px;
    flex: none;
    border-radius: 6px;
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.18);
    /* Overlap, with a ring in the card's own colour so each bubble stays a
       separate object where it laps the one before it. Without the ring the row
       reads as one lumpy blob at these sizes. */
    box-shadow: 0 0 0 2px var(--color-background);
    margin-inline-start: -10px;
  }

  .nether-pb__dot:first-child {
    margin-inline-start: 0;
  }

  /* An unfilled slot. Dashed and unfilled so it reads as something still to
     choose rather than a colour that happens to be pale. */
  .nether-pb__dot[data-empty] {
    background: none;
    border: 1px dashed rgb(var(--color-foreground-rgb, 0 0 0) / 0.32);
  }

  html[data-theme='dark'] .nether-pb__dot {
    border-color: rgb(var(--color-foreground-rgb, 255 255 255) / 0.32);
  }

  .nether-pb__opt-body {
    flex: 1;
    min-inline-size: 0;
  }

  .nether-pb__opt-name {
    display: block;
    /* Up a step with the bubbles. At 13px the card name was the same size as
       the tile labels above it, so the cards read as a footnote to the tiles
       rather than as the choice they actually are. */
    font-size: var(--font-size-md, 1rem);
  }

  .nether-pb__radio:checked + .nether-pb__opt .nether-pb__opt-name {
    font-weight: var(--font-weight-semibold, 500);
  }

  .nether-pb__opt-sub {
    display: block;
    font-size: var(--font-size-xs);
    opacity: 0.6;
    margin-block-start: 2px;
  }

  .nether-pb__build {
    margin-block-start: 10px;
    padding: 14px;
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.12);
    border-radius: var(--radius-card);
  }

  .nether-pb__build[hidden] {
    display: none;
  }

  /* Gridded to the chosen pack size from first render, so filling never reflows. */
  /* Capped, not stretched (owner 2026-08-10: "the cards themselves are huge.
     They don't need to be nearly that big"). 1fr made three slots each eat a
     third of the column, so a 3-pack drew three ~100px tiles for what is really
     a tally. minmax(0, 62px) with the row packed left keeps them the size of a
     thumbnail, and five still fit across a phone with room to spare. */
  /* Round, like the option cards' bubbles and like the colourway swatches above
     (owner 2026-08-12, referencing SAXX's "Selected Products 3 / 3" row). These
     were 62px rounded squares at a 1:1.12 ratio holding a garment icon, which
     made them a third object shape in a panel that now has only one.
     Both places colour appears in this builder are the same bubble now. */
  .nether-pb__slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }

  .nether-pb__slot {
    inline-size: 44px;
    block-size: 44px;
    flex: none;
    border-radius: 50%;
    border: 1px dashed rgb(var(--color-foreground-rgb, 0 0 0) / 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .nether-pb__slot[data-filled] {
    border-style: solid;
    border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.18);
  }

  .nether-pb__icon {
    inline-size: 74%;
    display: block;
  }

  .nether-pb__icon .pb-body {
    fill: none;
    stroke: rgb(var(--color-foreground-rgb, 0 0 0) / 0.28);
    stroke-width: 3.5;
    stroke-linejoin: round;
  }

  .nether-pb__icon .pb-band {
    fill: none;
  }

  .nether-pb__slot[data-filled] .pb-body {
    fill: var(--pb-dot, #888);
    stroke: rgb(var(--color-foreground-rgb, 0 0 0) / 0.2);
    stroke-width: 1.5;
  }

  /* The waistband as a LIGHT band, not a black one. It was #14141a, which is
     invisible on Midnight (#1A1A1A) and nearly so on the other two — the filled
     garment read as one dark blob (owner 2026-08-10: "the colors should look a
     little better too... it just looks a little bit weird"). A white wash reads
     on all three near-blacks and still looks like the real satin band catching
     light, which is exactly how it photographs. */
  .nether-pb__slot[data-filled] .pb-band {
    fill: rgb(255 255 255 / 0.28);
  }

  /* Same reason: the body needs an edge or a near-black garment dissolves into
     the slot. A hairline of its own colour at higher contrast draws the outline
     without turning it into a sticker. */
  .nether-pb__slot[data-filled] .pb-body {
    stroke: rgb(255 255 255 / 0.22);
    stroke-width: 2;
  }

  /* The pouch seam: a stitch line, present in both states. Outlined while the
     slot is empty, and a slightly lighter line over the fill once taken, so the
     panel reads on all three near-black colourways. */
  .nether-pb__icon .pb-seam {
    fill: none;
    stroke: rgb(var(--color-foreground-rgb, 0 0 0) / 0.28);
    stroke-width: 2.5;
  }

  .nether-pb__slot[data-filled] .pb-seam {
    stroke: rgb(255 255 255 / 0.22);
    stroke-width: 2;
  }

  /* Dark mode, measured not guessed: on rgb(22,22,25) Midnight contrasts 1.16:1
     and Storm 1.15:1, against the 3:1 non-text graphics need. A filled garment
     disappears. The plate gives the colour something to sit on, the way a
     product shot uses a light backdrop. */
  html[data-theme='dark'] .nether-pb__slot[data-filled] {
    background: rgb(var(--color-foreground-rgb, 255 255 255) / 0.1);
    border-color: rgb(var(--color-foreground-rgb, 255 255 255) / 0.4);
  }

  html[data-theme='dark'] .nether-pb__slot[data-filled] .pb-body {
    stroke: rgb(var(--color-foreground-rgb, 255 255 255) / 0.5);
    stroke-width: 2;
  }

  html[data-theme='dark'] .nether-pb__slot[data-filled] .pb-band {
    fill: #0b0b0f;
  }

  .nether-pb__x {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-end: -7px;
    inline-size: 22px;
    block-size: 22px;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.2);
    background: var(--color-background);
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    line-height: var(--leading-none);
    cursor: pointer;
    padding: 0;
    z-index: 1;
  }

  /* 22px visible, 44px to a thumb. */
  .nether-pb__x::after {
    content: '';
    position: absolute;
    inset: -11px;
  }

  /* Mobile first: full-width rows, because at 375px three across gives each name
     ~95px and wraps it. */
  .nether-pb__picker {
    display: grid;
    gap: 6px;
    /* 16px, not 12px: the composition line that used to sit between the slot row
       and this picker is gone, and its own 10px top margin went with it. Without
       this the slots butt into the first colour button. Restores the seam without
       reintroducing the duplicated text. */
    margin-block-start: 16px;
  }

  /* A ROW, not a button. It used to be the arm control: tap it, then confirm
     below. The +/- pair is the control now, so the row itself is inert and only
     the two buttons inside it are pressable. No cursor:pointer on the row, for
     the same reason: nothing happens if you press the name. */
  .nether-pb__pick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    min-block-size: 52px;
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.12);
    border-radius: var(--radius-card);
    background: transparent;
    color: var(--color-foreground);
    font-size: var(--font-size-md, 1rem);
    text-align: start;
    transition: border-color var(--motion-quick) var(--ease-ui);
  }

  /* A colour that is IN the pack states it by weight, not by a tick. The count
     already says how many; this just makes an occupied row findable in a glance
     down the list. */
  .nether-pb__pick[data-has] {
    border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.4);
  }

  .nether-pb__pick[data-unavailable] {
    opacity: 0.4;
  }

  .nether-pb__pick-name {
    flex: 1;
    min-inline-size: 0;
  }

  /* The stepper. Same shape as the cart's quantity control, so the one gesture
     the customer already knows from the drawer works here too. */
  .nether-pb__step {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
  }

  .nether-pb__stepbtn {
    inline-size: var(--minimum-touch-target, 44px);
    block-size: var(--minimum-touch-target, 44px);
    /* Pull the growth back so the row keeps its height and only the hit area
       is finger-sized. Same technique as the cart stepper. */
    margin-block: calc((var(--minimum-touch-target, 44px) - 30px) / -2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-foreground);
    font-size: var(--font-size-md, 1rem);
    line-height: var(--leading-none);
    cursor: pointer;
    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  .nether-pb__stepbtn[disabled] {
    opacity: 0.25;
    cursor: default;
  }

  .nether-pb__stepnum {
    min-inline-size: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold, 500);
  }

  /* Same hover the pack cards above get. Checked is excluded on purpose: this
     selector would otherwise outrank the 0.85 selected border and thin it back
     to 0.35 under the cursor. The cards avoid that for free, because there the
     checked selector is the heavier one. */
  @media (hover: hover) and (pointer: fine) {
    .nether-pb__pick:not([disabled]):not([aria-checked='true']):hover {
      border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.35);
    }
  }

  .nether-pb__pick[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .nether-pb__pick-dot {
    inline-size: 34px;
    block-size: 22px;
    border-radius: 6px;
    flex: none;
    background-color: var(--pb-dot, #888);
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb, 0 0 0) / 0.25);
  }

  html[data-theme='dark'] .nether-pb__pick-dot {
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb, 255 255 255) / 0.45);
  }

  .nether-pb__hint {
    margin: 12px 0 0;
    font-size: var(--font-size-xs);
    opacity: 0.7;
    min-block-size: 1.2em;
  }

  .nether-pb__add {
    inline-size: 100%;
    margin-block-start: 10px;
    padding-block: 13px;
    border-radius: var(--radius-pill);
    /* Outlined against the filled Add to cart below. Two filled pills of equal
       weight hides which one actually buys. */
    border: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.6);
    background: transparent;
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    cursor: pointer;
  }

  /* One disabled dim in this column, matching .nether-pb__pick. Was 0.35, which
     sat a step below the picker right above it and read as two different kinds
     of unavailable (2026-08-10). */
  .nether-pb__add[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* Desktop has room the phone does not. */
  @media screen and (min-width: 750px) {
    .nether-pb__picker {
      grid-template-columns: 1fr;
    }

    .nether-pb__pick {
      flex-direction: row;
      gap: 12px;
      padding: 12px 8px;
      text-align: center;
    }

    .nether-pb__pick-dot {
      inline-size: 32px;
      block-size: 20px;
    }

    /* AUTO, not a hard 54px (owner 2026-08-20: "the swatch circles leave a
       little bit more space in between where the sentence starts... especially
       on desktop").

       The measurement, because the cause was not the gap: three 30px dots at
       margin-inline-start:-8px, with the first reset to 0, occupy
       30 + 22 + 22 = 74px. Pinning the band to 54px did not shrink them; it
       just made the box 20px narrower than its own content. The card's
       gap:14px is measured from that box edge, so the real distance from the
       last circle to the first word was 14 - 20 = -6px. The dots were lapping
       INTO the text.

       Sizing to content makes the declared gap the true gap. Mobile never had
       this because its rule is min-inline-size, which content is free to
       exceed. */
    .nether-pb__band {
      inline-size: auto;
      block-size: 54px;
    }
  }

  /* Express checkout steps aside: it skips the cart with one selected variant,
     which is not what a built pack is. */
  .product-details:has([data-nether-pack]) .accelerated-checkout,
  .product-details:has([data-nether-pack]) [class*='accelerated-checkout'] {
    display: none;
  }

  /* ===================================================================
     THE PACK LADDER (2026-08-26)

     Four tiles across became four rows down. The tiles were ~78px wide at
     375, which is why the old label had to be "Save 5%": it was the longest
     true thing that fit. The layout was choosing the copy. A full-width row
     carries three facts instead of one.
     =================================================================== */
  .nether-pb__seg {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .nether-pb__segbtn {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 2px 12px;
    min-block-size: 62px;
    padding: 12px 16px;
    text-align: start;
  }

  .nether-pb__segname {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-base);
  }

  .nether-pb__segflag {
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-size: var(--font-size-3xs, 10px);
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: var(--tracking-micro-caps, 0.08em);
    text-transform: uppercase;
  }

  /* On the selected row the fill is --color-foreground and the text is the
     page ground, so a tinted pill would vanish into it. An outline in
     currentColor works in both themes without a second rule. */
  .nether-pb__segbtn[aria-checked='true'] .nether-pb__segflag {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
    opacity: 0.72;
  }

  .nether-pb__segunit {
    justify-self: end;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium, 500);
    font-variant-numeric: tabular-nums;
  }

  .nether-pb__segper {
    margin-inline-start: 4px;
    font-size: var(--font-size-2xs, 11px);
    font-weight: 400;
    opacity: 0.62;
  }

  /* Down a step and quieter (owner 2026-08-26: "the total can be a little
     smaller... they're the right size, they're just a little busy"). The row
     carries four things; the two that are reference rather than decision — the
     total and the saving — step back so the pack name and the per-pair price
     are what the eye lands on. */
  .nether-pb__segsub {
    grid-column: 1 / -1;
    font-size: var(--font-size-2xs, 11px);
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
  }

  /* ===================================================================
     ONE SELECTION LANGUAGE (owner 2026-08-26: "too many highlighted
     colours... we got the grey pills, which I want to keep, and those get
     highlighted in black. Once we get to the bundle step it's a white box
     with a black outline. Should be more cohesive.")

     Measured down the PDP, the customer walked past three different
     vocabularies for the same idea:

       size pills   rgba(fg/.06) fill  ->  solid black, white text
       pack ladder  rgba(fg/.06) fill  ->  solid black, white text
       colour cards TRANSPARENT + 1px hairline -> near-white + black outline

     The first two already agree. The cards were the outlier, and the white
     box was the part that read as a different component altogether.

     WHY THE CARDS DO NOT FLOOD BLACK LIKE THE OTHER TWO. The swatches sit on
     this surface, and the note on .nether-pb__dot records that all three
     colourways are near-blacks about 1.15:1 apart — the reason those circles
     were taken from 22px to 30px in the first place. A black fill does not
     dim one swatch, it erases the whole row, and re-breaking a legibility fix
     to win a styling argument is a bad trade.

     So the cards take the same PALETTE without the flood: the identical grey
     surface in both states, and selection marked by a 2px black ring instead
     of a colour swap. Grey and black only, no white box, and the swatches
     keep a light ground to sit on. The border stays in the box at 1px
     transparent so nothing shifts when the ring appears. */
  .nether-pb__opt {
    border-color: transparent;
    background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

  .nether-pb__radio:checked + .nether-pb__opt {
    border-color: transparent;
    background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
    /* Flat black, like every other selected thing on this page (2026-08-26).
       This ring was var(--color-foreground) — the 0.81 token — which left the
       colour cards ringed in charcoal while the size chips, the pack rows and
       both buy buttons had gone flat black. That is what made the difference
       read as confusing rather than deliberate: the cards differ from the rows
       in SHAPE, which is on purpose, but they were also differing in COLOUR,
       which was not.

       The shape difference stays. A ring instead of a fill is what keeps the
       swatches legible — the three colourways are near-blacks about 1.15:1
       apart, and flooding this card would erase the row it exists to show. So:
       same black everywhere, and the ring vs fill now carries a real meaning,
       which is that these two rows are answering different questions. */
    /* 3px, plus a lift (owner 2026-09-06: "once you get to the last option you
       can't really even tell that it's selected... the border just needs to be
       stronger... without inverting it, because the problem was inverting the
       swatches").

       The ring was carrying the selected state ALONE — same grey fill in both
       states, so a 2px outline was the only difference on the card, and it sits
       directly under a pack row that is a solid black slab. Next to that it
       read as unselected.

       What is NOT changing is the fill: the note above records why these cards
       cannot flood, and it still holds — three near-black colourways about
       1.15:1 apart need a light ground or the swatch row this card exists to
       show disappears. So the emphasis goes into the two channels that do not
       touch the swatch ground: a thicker ring, and the same short-throw shadow
       the selected pack row already uses, which lifts the card off the stack
       instead of recolouring it. Same gesture as the row above, so the two
       selected things on this page now agree. */
    box-shadow:
      inset 0 0 0 2px rgb(var(--color-foreground-rgb, 0 0 0)),
      0 3px 14px rgb(var(--color-foreground-rgb, 0 0 0) / 0.16);

    /* LIFTED TO WHITE (owner 2026-09-06: "try lifting it to white so it feels
       more like a finished step, and then dark mode up to get inverted on
       this"). Briefly a 14% tonal step earlier the same day; white was the
       stronger read once it sat next to the black pack row.

       This overrides the 2026-08-26 note above, which held that the cards keep
       "the identical grey surface in both states" and let a ring carry
       selection alone. That was right while the ring competed with nothing; it
       stopped being right once the ladder above went to a solid black slab,
       against which a hairline outline reads as unselected.

       WHITE IS THE ONE FILL THAT DOES NOT BREAK THE SWATCHES. The long-standing
       constraint is that this card cannot flood BLACK, because Midnight, Abyss
       and Storm are near-blacks about 1.15:1 apart and a dark ground erases the
       row the card exists to show. White moves the other way: it is the highest
       contrast ground those three colourways ever get. So the rule that forbade
       one flood positively recommends this one.

       A literal, not --color-background: the page ground is the warm #f9f7f4,
       and matching it would make the card vanish into the page instead of
       lifting off it. The shadow is what turns a lighter box into a raised one. */
    background-color: #ffffff;
  }

  /* The bubbles overlap and each carries a 2px ring in the CARD's colour so the
     row stays countable. That ring is painted in the page ground, which on a
     white card reads as a cream halo around every swatch. */
  .nether-pb__radio:checked + .nether-pb__opt .nether-pb__dot {
    box-shadow: 0 0 0 2px #ffffff;
  }

  /* THE TICK. Reserved on EVERY card and only revealed on the selected one —
     if it were added on selection the body would lose 42px and the whole row
     would reflow under the thumb.

     Disc and tick both survive the theme flip without a second rule. The disc
     takes currentColor, which is the card's TEXT colour: near-black on the grey
     card in light mode, and still dark in dark mode, because the dark rule
     below repaints the selected card white and sets its text to the page
     ground. So the disc is dark in both — which is why the tick can be a fixed
     white and stay correct. */
  .nether-pb__opt::after {
    content: '';
    flex: 0 0 auto;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background-color: currentColor;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l4 4L15.5 6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
    opacity: 0;
    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  .nether-pb__radio:checked + .nether-pb__opt::after {
    opacity: 1;
  }

  /* The build drawer is the same white-box-with-an-outline, one step further
     in. It is a container rather than a choice, so it takes the shared grey
     surface and no ring. */
  .nether-pb__build {
    border-color: transparent;
    background-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.06);
  }

  /* THE FLAG INVERTS ON THE SELECTED ROW (owner 2026-08-26: "the most popular
     tag should get inverted, like the opposite of what's selected, so it stands
     out").

     It was an outlined pill in currentColor, which on a charcoal row meant a
     thin light outline on dark — legible, but the quietest thing in the row,
     and this badge exists to be loud. Filling it with the page ground and
     taking the row's fill as its text colour makes it a hard positive/negative
     flip against whatever it sits on.

     Both tokens, so it inverts again in dark mode without a second rule: there
     the row is white with dark text, and the badge becomes dark with light. */
  .nether-pb__segbtn[aria-checked='true'] .nether-pb__segflag {
    background-color: var(--color-background);
    color: var(--color-foreground);
    box-shadow: none;
    opacity: 1;
  }

  /* A SHEEN ON THE SELECTED ROW (owner: "a little subtle sheen around the
     selected one, just something super small").

     Two layers, both keyed to --color-foreground-rgb so they survive the theme
     flip: a hairline that tightens the edge, and a soft short-throw shadow that
     lifts the row off the stack. In light mode that reads as a dark lift; in
     dark mode the token flips to 255 255 255 and the same rule reads as a faint
     halo, which is the dark-mode equivalent of the same gesture rather than a
     shadow nobody can see.

     Kept under 0.14 on purpose. The fill already says which row is selected —
     this only has to stop the row sitting flat in the column. */
  .nether-pb__segbtn[aria-checked='true'] {
    box-shadow:
      0 0 0 1px rgb(var(--color-foreground-rgb, 0 0 0) / 0.10),
      0 2px 12px rgb(var(--color-foreground-rgb, 0 0 0) / 0.13);
  }

  /* ===================================================================
     THE COLOUR CARD FILLS IN DARK MODE ONLY (owner 2026-08-26: "just flip it
     in dark mode, and then we'll just leave it as a box in light mode").

     The two themes genuinely want different answers here, because the fill
     colour is not the same colour:

       LIGHT  a fill is BLACK, and the three colourways are near-blacks about
              1.15:1 apart. Filling erases the swatch row the card exists to
              show, which is why the ring was chosen in the first place.
       DARK   a fill is WHITE. Near-black swatches read better on it than on
              anything else on the page — and the ring was the weakest signal
              in the theme, which is what prompted this ('hard to tell in dark
              mode').

     So the same instruction produces opposite treatments, and that is correct
     rather than inconsistent: both themes are answering "make the chosen card
     obvious without hiding the colours", and the constraint moves when the
     palette inverts. Light keeps the 2px black ring defined above.
     =================================================================== */
  /* SAME GESTURE, INVERTED GROUND (owner 2026-09-06: "dark mode up to get
     inverted on this").

     Both themes now lift the chosen card to the SAME white and raise it on the
     same shadow — the card does not change identity when the theme flips, only
     what it is lifting away from. Two things differ, and both are forced:

     - The literal #ffffff replaces --color-foreground-rgb here. That token is
       white-ish in dark mode, so the old rule happened to land near white by
       accident; pinning it means light and dark are provably the same colour
       rather than coincidentally close.
     - No inset ring. A white card on a near-black page is already the highest
       contrast object on screen, and outlining it in its own text colour just
       thickens the edge. The ring exists in light mode to separate white from
       cream, a problem dark mode does not have.

     The shadow is deeper here because a soft black shadow on a dark ground has
     far less to work with than the same shadow on cream. */
  html[data-theme='dark'] .nether-pb__radio:checked + .nether-pb__opt {
    background-color: #ffffff;
    color: var(--color-background);
    box-shadow: 0 4px 18px rgb(0 0 0 / 0.55);
    border-color: transparent;
  }

  /* The subtitle rides the inverted text colour rather than its own token, or
     it stays 55% black on a white card and vanishes. */
  html[data-theme='dark'] .nether-pb__radio:checked + .nether-pb__opt .nether-pb__opt-sub {
    color: inherit;
  }


  /* A REAL PLATE, NOT A HINT (owner 2026-08-26: "we have to invert the swatches
     in the bundle thing, or give them the white background as well... where the
     boxer brief silhouette is, you can't really see it right now").

     The plate above had the right idea and the wrong number. At 10% white over
     rgb(22 22 25) it lands near #2c2c2f, and Midnight at #1A1A1A sits on that
     at roughly 1.4:1 — still nowhere near the 3:1 a non-text graphic needs, so
     the garment stayed a shape you had to hunt for.

     What actually works is already proven one theme over: in LIGHT mode these
     slots have no plate at all, because the cream page ground IS the backdrop,
     and a near-black garment on cream is about 17:1. So dark mode stops
     inventing a dark-on-dark treatment and borrows that backdrop wholesale.

     The literal is deliberate and is not a token slip: this plate must stay
     light in BOTH themes, so keying it to --color-background (which flips to
     #1e1e22) would put it straight back where it started. It is a product-shot
     backdrop, and those do not invert.

     With the plate light, the garment's own light-mode treatment is correct
     again — white satin band, white hairline edge — so the three dark-mode
     overrides that fought the old dark plate are put back. */
  html[data-theme='dark'] .nether-pb__slot[data-filled] {
    background: #f9f7f4;
    border-color: rgb(0 0 0 / 0.18);
  }

  html[data-theme='dark'] .nether-pb__slot[data-filled] .pb-body {
    stroke: rgb(255 255 255 / 0.22);
    stroke-width: 2;
  }

  html[data-theme='dark'] .nether-pb__slot[data-filled] .pb-band {
    fill: rgb(255 255 255 / 0.28);
  }

  html[data-theme='dark'] .nether-pb__slot[data-filled] .pb-seam {
    stroke: rgb(255 255 255 / 0.22);
  }

  /* THE REMOVE BADGE WAS BEING CLIPPED (owner 2026-08-26: "why did the X
     break?").

     It did not break today; it was always clipped, and today's cream plate is
     just the first background that made the wedge visible. .nether-pb__slot
     carries overflow:hidden while .nether-pb__x is positioned at -7px on both
     axes — deliberately proud of the circle, the way a remove badge sits on a
     corner. Those two cannot both be honoured: the badge was being cut to
     whatever fraction of it fell inside the 44px circle, in BOTH themes. On a
     dark plate that fragment was dark-on-dark and read as nothing.

     overflow:hidden is not doing any work here. The plate is painted as a
     background and border-radius already clips a background to the circle; the
     only child is .nether-pb__icon at 74% width, centred, which cannot reach
     the edge. So the clip goes and the badge sits where it was designed to. */
  .nether-pb__slot {
    overflow: visible;
  }

  /* The badge sits mostly OUTSIDE the plate, on the drawer behind it, so it
     keeps taking the page tokens rather than the plate's fixed cream — dark
     chip with a light glyph in dark mode, and the reverse in light. The border
     is what separates it from the plate on the small overlap. */
  .nether-pb__x {
    background: var(--color-background);
    color: var(--color-foreground);
    border-color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.28);
  }

  /* EMPTY SLOTS FILL IN DARK MODE (owner 2026-08-26: "the half-filled circles
     look awkward... the Olympic rings should just be a swatch, filled out").

     An empty dot is drawn as a transparent interior with a dashed hairline,
     and it also carries the 2px separator ring in --color-background so
     overlapping bubbles stay countable. In dark mode that separator is DARK,
     so on the selected card — which is white — each empty slot rendered as a
     dark O with nothing inside it, and three of them overlapping read as
     Olympic rings rather than as pairs still to choose.

     Filling them solves it without losing the meaning: a soft neutral disc
     still reads as "not chosen yet" against the real colourways beside it,
     because the colourways are saturated and these are not. The dashed border
     goes solid at the same time — dashes on a filled disc are two signals for
     one idea.

     Two rules because the card flips: an unselected card is dark and wants a
     light disc, the selected card is white and wants a dark one. Light mode is
     untouched, where the dashed outline still reads correctly on grey. */
  html[data-theme='dark'] .nether-pb__opt .nether-pb__dot[data-empty] {
    background-color: rgb(255 255 255 / 0.13);
    border-style: solid;
    border-color: rgb(255 255 255 / 0.2);
  }

  html[data-theme='dark'] .nether-pb__radio:checked + .nether-pb__opt .nether-pb__dot[data-empty] {
    background-color: rgb(0 0 0 / 0.1);
    border-color: rgb(0 0 0 / 0.16);
  }
/* END_BLOCK:nether-pack-builder */

/* START_BLOCK:nether-pdp-tabs (INDEX:142) */
/* This block is its own section now (templates/product*.json ->
     nether_pdp_tabs_section, section_width: full-width), so it owns two things
     it used to inherit from the buy column: its width and its gutters.

     inline-size is load-bearing, not tidiness. The section content wrapper is
     .layout-panel-flex--column, whose align-items resolves from the section's
     horizontal_alignment_flex_direction_column = flex-start, and a flex-start
     column item is sized shrink-to-fit. Measured on the multicolor template
     before this rule existed: Designed for held 1340px because the video's
     max-content forced it, but Description collapsed the whole band, tab strip
     included, to 669px. The band has to declare its width or it changes width
     per tab.

     22px is the buy column's gutter, kept as a literal for the same reason it
     is a literal in nether-pdp.liquid: --page-margin is 16px on mobile and 16px
     is what put content into the bezel (07-26, measured against Gymshark at
     402px). It used to arrive from
     .product-details > .group-block > .group-block-content > *, which no longer
     matches this block, so it has to be restated here or the band sits 6px
     wider than the trust cards directly above it. */
  .nether-pdp-tabs {
    inline-size: 100%;
    margin-block-start: var(--space-md);
    padding-inline: 22px;
  }

  /* Desktop: type keeps a gutter, imagery bleeds.

     padding-inline-start is --page-margin, so the tab strip and the copy sit on
     the same left edge as the pullquote and design-details bands below (both
     land on 40px at 1440). padding-inline-end is 0, so the media frame ends on
     1420 — the edge the buy column's box ends on, and the same edge the gallery
     bleeds from on the left. That pair is the owner's "full size, just like the
     gallery and the buy area": gallery-left to buy-right, with a gutter only
     where there is type.

     padding-block replaces the old margin. --space-xl was right while this was
     the last block inside the buy column and the chapter it opened was a
     chapter of that column. As its own band it needs the site's section rhythm
     or it reads as an orphan under the product grid. --section-gap is the token
     nether-pullquote and nether-design-details use, so the seam below the band
     matches every other seam on the page. The host section's own padding-block
     is 0 in the template for the same reason: one owner for the rhythm. */
  @media screen and (min-width: 750px) {
    .nether-pdp-tabs {
      margin-block-start: 0;
      padding-block: var(--section-gap);
      padding-inline-start: var(--page-margin);
      padding-inline-end: 0;
    }
  }

  /* Scroll reveal (class only applied when JS + motion allowed, so no-JS and
     reduced-motion render visible immediately) */
  .nether-pdp-tabs.will-reveal {
    opacity: 0;
    transform: translateY(var(--motion-rise));
    /* Both properties on ONE track (feel WO-3): the old 0.6s split let the
       fade and the travel finish at different times. */
    transition: opacity var(--motion-base) var(--ease-enter), transform var(--motion-base) var(--ease-enter);
  }

  .nether-pdp-tabs.will-reveal.is-revealed {
    opacity: 1;
    transform: none;
  }

  .nether-pdp-tabs__strip {
    display: flex;
    gap: clamp(20px, 4vw, 32px);
    /* No full-width divider under the strip (user 07-25, Gymshark reference):
       only the active tab carries its underline. */
  }

  .nether-pdp-tabs__tab {
    position: relative;
    /* Both of these are for the hit extension below, not for painting: the tab
       has to be positioned for the ::after to hang off it, and it has to sit
       above __panels or the half of the extension that hangs under the strip is
       hit-tested as panel. z-index has to go HERE rather than on the ::after
       because the opacity: 0.45 further down makes each inactive tab its own
       stacking context, which traps any z-index set inside it — measured as the
       two inactive tabs keeping 38px while the active one (opacity: 1, no
       stacking context) got the full 44. 2026-08-10. */
    z-index: 1;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    padding-block-end: var(--space-sm);
    margin-block-end: -1px;
    cursor: pointer;
    color: var(--color-foreground);
    opacity: 0.45;
    border-block-end: 2px solid transparent;
    transition: opacity var(--motion-quick) var(--ease-ui), border-color var(--motion-quick) var(--ease-ui);
  }

  /* A step DOWN from the content, which is the whole job of a tab label.

     The markup gives these type-body-md, the same 16px the row titles use and
     a step ABOVE the 13px body they sit over. Navigation was competing with
     the prose it navigates, and at three labels across it also left the strip
     with nothing to breathe into.

     That body was described here as 15px until 2026-08-13. It reads
     --font-size-sm, which is 13px below 1920px and 15px above it, so the note
     was quietly quoting the ultrawide value as if it were the only one.

     Written at (0,2,0) deliberately. type-body-md is a lone class at (0,1,0)
     and so is .nether-pdp-tabs__tab, so a same-specificity rule would be
     decided by whichever stylesheet compiled last, which is not a thing to
     rely on.

     Safe to change the size here: the 44px tap target below is computed from
     1lh rather than a hardcoded height, precisely so it survives the type
     scale moving. It re-solves itself at the new size. */
  .nether-pdp-tabs .nether-pdp-tabs__tab {
    font-size: var(--font-size-sm);
    letter-spacing: var(--tracking-normal);
  }

  /* Desktop only, one rung: --font-size-sm -> --font-size-base (13px -> 16px).

     --font-size-sm was calibrated when the strip was 414px wide inside the buy
     column, where three labels across a narrow column needed to stay quiet. The
     band is 1380px now and the same 13px reads undersized against it (owner
     2026-08-17). The ladder has nothing between sm and base, so base is the one
     step; --font-size-md (18px) is the next rung and is too much for a label
     that must stay a step below the content it navigates.

     This lands the desktop tab back on the 16px its own type-body-md class
     declares, so the step-down that this rule exists to create now happens only
     where it was measured to be needed.

     750px, not a new breakpoint: the same query the band uses for its gutters,
     so the strip changes size in the same move it changes width. Below it the
     strip is byte-for-byte what it was.

     Nothing else needs to move with it. The 44px tap target is derived from 1lh
     (see ::after below), so it re-solves at the new line box on its own; the 2px
     underline and the 8px padding-block-end holding it off the label are optical
     constants, not proportional to the type. */
  @media screen and (min-width: 750px) {
    .nether-pdp-tabs .nether-pdp-tabs__tab {
      font-size: var(--font-size-base);
    }
  }

  /* The three triggers measure 32px tall at 375px — one line of type plus the
     underline gap — under the 44px minimum. The extra cannot go on as padding
     the way the size-guide link takes it (--sg-link-pad below): padding-block-end
     IS the gap holding the underline off the label, so growing it drags the
     underline down, and putting it all on the start edge pushes the focus ring
     up into the trust cards. A transparent ::after grows only the tappable area,
     evenly on both edges, and leaves the painted box and the underline exactly
     where they were. The height is read back out of the tokens instead of being
     written as 32px so it still lands on 44 if the type scale moves.

     The sum is the PADDING box, so the 2px underline is not in it. An absolute
     child resolves its insets against the padding box, so counting the border
     here left the target 2px short at 42 — close enough to look right and still
     wrong. The ~7px it now hangs below the strip covers the panel's own
     padding-block-start, which holds nothing tappable. 2026-08-10. */
  .nether-pdp-tabs__tab::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block: calc((1lh + var(--space-sm) - var(--minimum-touch-target, 44px)) / 2);
  }

  .nether-pdp-tabs__tab.is-active {
    opacity: 1;
    border-block-end-color: var(--color-foreground);
  }

  /* Inactive tabs only. Was a bare :hover, which is (0,2,0) like .is-active
     above it and later in source, so pointing at the tab you were already
     reading faded it from 1 to 0.8 and it read as disabled. */
  @media (hover: hover) and (pointer: fine) {
    .nether-pdp-tabs__tab:not(.is-active):hover {
      opacity: 0.8;
    }
  }

  /* The wrapper takes the height of the OPEN panel and animates between them,
     so the page below rises under the two short tabs instead of sitting on a
     block of dead space (owner 2026-08-03).

     block-size, not min-block-size. A min can only ever grow the box, which is
     exactly why the group used to stay locked at the tallest panel: switching to
     a shorter one changed nothing. An outright height can shrink, and the
     transition is what keeps that from being the hard jump the min was
     protecting against.

     overflow: clip because during the transition the outgoing content is briefly
     taller than the box it is leaving. Without it the copy spills over whatever
     follows for the length of the animation.

     The site-wide reduced-motion rule in nether-chrome.liquid already collapses
     this transition to 0.01ms, so it snaps rather than animating there. That is
     correct: the height still tracks the panel, it just does not travel.

     position: relative is kept and still load-bearing. It makes this the
     containing block for the absolutely positioned slide-in panels, so an
     incoming panel is laid out at the width the reader actually sees rather than
     resolving against something further up the tree. */
  .nether-pdp-tabs__panels {
    position: relative;
    block-size: var(--ntabs-panel-height, auto);
    overflow: clip;
    transition: block-size var(--motion-base) var(--ease-ui);
  }

  .nether-pdp-tabs__panel {
    padding-block-start: var(--space-lg);
  }

  /* Tab swap rides the tokens now, so the old per-file reduced-motion wrapper
     is gone: --motion-scale collapses the duration and --motion-rise
     collapses the travel through the one gate in typography-tokens.liquid.
     No fill-mode, so a panel that never animates just sits visible. */
  .nether-pdp-tabs__panel.is-sliding-right {
    animation: nether-ntabs-in-right var(--motion-base) var(--ease-enter);
  }

  .nether-pdp-tabs__panel.is-sliding-left {
    animation: nether-ntabs-in-left var(--motion-base) var(--ease-enter);
  }

  @keyframes nether-ntabs-in-right {
    from {
      opacity: 0;
      transform: translateX(var(--motion-rise));
    }
  }

  @keyframes nether-ntabs-in-left {
    from {
      opacity: 0;
      transform: translateX(calc(-1 * var(--motion-rise)));
    }
  }

  .nether-pdp-tabs__lede {
    margin: 0 0 var(--space-lg);
    opacity: 0.85;
  }

  .nether-pdp-tabs__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  /* The made-with lockup after hoistMadeWith() drops it in here. It lands as the
     last child of the copy column, directly under the feature rows, so it takes
     the same step the rows use between themselves: it reads as one more item in
     that list, not as a new section that needs its own separation. The rule that
     spaces it where it USED to live (below the whole tab group) does not apply
     once it is inside, so this is the only spacing it gets. */
  .nether-pdp-tabs__designed-copy .nether-mwb {
    margin-block-start: var(--space-lg);
  }

  .nether-pdp-tabs__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .nether-pdp-tabs__icon {
    flex: 0 0 auto;
    inline-size: 28px;
    block-size: 28px;
    color: var(--color-foreground);
  }

  .nether-pdp-tabs__icon svg {
    inline-size: 100%;
    block-size: 100%;
  }

  .nether-pdp-tabs__row-title {
    margin: 0 0 2px;
    font-weight: var(--type-ui-caps-weight);
  }

  .nether-pdp-tabs__row-text {
    margin: 0;
    opacity: 0.7;
  }

  .nether-pdp-tabs__rte > :first-child {
    margin-block-start: 0;
  }

  /* The band is up to 1380px wide and running text must not be. 36rem is 576px,
     which at --type-body-md (16px) in Manrope is ~66ch, inside the 60-70ch band.
     Unqualified because 576px is wider than any phone, so mobile is untouched.

     The spec list needs it as much as the prose: its hairline is as wide as its
     box, and a 1380px rule under "Cold wash, hang dry" reads as a mistake. */
  .nether-pdp-tabs__rte,
  .nether-pdp-tabs__features {
    max-inline-size: var(--narrow-content-width);
  }

  /* Same measure for the Designed for copy. Inert at 1440 (the 0.85fr track
     already lands on 563px) and the guard for the no-media case, where the copy
     would otherwise run the band's full width unopposed. */
  .nether-pdp-tabs__designed-copy {
    max-inline-size: var(--narrow-content-width);
  }

  /* Designed For: copy + media spot. Mobile stacks (image under the rows);
     desktop runs copy left / image right. */
  .nether-pdp-tabs__designed--has-media {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);

    @media screen and (min-width: 750px) {
      display: grid;
      /* The media leads on desktop (owner 2026-08-16, Gymshark reference: the
         panel runs left to right at full size with a video filling the right
         half). Copy takes the smaller column and the media the larger one.
         At the band's 1380px content width that is 563px of copy against 761px
         of media — 563 is within a pixel of --narrow-content-width, so the
         measure cap below never has to fight the track. */
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: clamp(24px, 4vw, 56px);
      /* START. This is the second alignment ruling on the same day and the
         reasoning behind each still holds, so here is the whole chain.

         `stretch` was solving a 414px column, where the copy ran TALLER than
         the frame and pulling the frame up to meet it was the fix. Once the
         band went full width the polarity inverted: the copy measures ~308px
         and a 4:5 frame measures ~952px, so stretch handed the frame a height
         it did not ask for and the media's own ratio stopped governing.

         `center` fixed the frame but moved the problem into the copy: centring
         308px of text against a 952px frame parks it 322px down the panel, so
         the first feature row sat far below the tab strip that produced it and
         the top of the band read as empty (owner 2026-08-17, measured at 321.9px
         between the frame's top edge and the first row's).

         start puts the copy's first line level with the top of the frame. The
         frame is untouched by this: its height comes from aspect-ratio against
         its own track width, never from the row, so it still fills the row and
         still sets the row's height. Only the short item moves. */
      align-items: start;
    }
  }

  /* Reserved geometry (feel WO-19, item 4). The ratio and the fill are declared
     on the SLOT, so the frame holds its shape with or without an asset. 4:5
     matches the gallery and the card contract; the fill is the same neutral the
     Features cards already use, so an empty slot reads as a frame waiting for a
     photograph rather than a broken image. */
  .nether-pdp-tabs__designed-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  /* No desktop override on the frame: the 4:5 above is the frame at every
     width. `aspect-ratio: auto; block-size: 100%; min-block-size: 32rem` was
     written for a 206px-wide column, where handing the frame the row's height
     was the only way to give the media presence. In a 761px column it hands the
     frame whatever the copy column happens to measure, so the frame's own ratio
     stops governing and the wired 9:16 asset gets covered into a box it was
     never framed for.

     Sizing the frame by its WIDTH also makes the panel height deterministic at
     first paint. --ntabs-panel-height is a pixel value written by
     sizeToActive() and the panel wrapper is overflow: clip, so a height that
     depends on when a video's metadata lands is a height that can be measured
     short and then clip its own content. A declared ratio cannot be.

     4:5 keeps three frames on one contract: the product gallery, the Features
     cards, and this one. */

  /* An EMPTY slot renders nowhere, at any width.

     It was desktop-only, on the reasoning that the reserved frame lets someone
     judge the two-column composition before photography lands. That is a fair
     argument while a section is being built and the wrong one now: the page is
     meant to read finished, and a flat grey 4:5 box beside the copy reads as a
     broken image, not as intent. --has-media is now driven off the asset, so
     the column layout and this frame both appear together the moment a picture
     is set. */
  .nether-pdp-tabs__designed-media--empty {
    display: none;
  }

  /* Each colourway pane fills the frame. `hidden` does the hiding, so an
     unstyled pane can never leak in before the script runs. */
  .nether-pdp-tabs__cw-video {
    inline-size: 100%;
    block-size: 100%;
  }

  .nether-pdp-tabs__cw-video[hidden] {
    display: none;
  }

  .nether-pdp-tabs__designed-media img,
  .nether-pdp-tabs__designed-media video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    /* Squared off to match the Features cards — one edge treatment across
       the whole tab set. */
    border-radius: 0;
  }

  /* Description tab: headed logistics groups (Gymshark's SIZE & FIT pattern) */
  .nether-pdp-tabs__group-heading {
    margin: var(--space-xl) 0 var(--space-sm);
    font-size: var(--type-body-sm-size, 0.8125rem);
    font-weight: var(--type-ui-caps-weight);
    letter-spacing: var(--type-ui-caps-tracking);
    text-transform: uppercase;
  }

  .nether-pdp-tabs__sg-link {
    /* padding: 0 left a ~18px tap target on one 13px line. Pad out to the
       theme minimum and pull the same amount back out of the block margins so
       the link still sits 8px under the fit copy. Same technique as the
       free-ship tooltip button (nether-cart-freeship.liquid:325). */
    --sg-link-pad: calc((var(--minimum-touch-target, 44px) - 1lh) / 2);
    margin-block: calc(var(--space-sm) - var(--sg-link-pad)) calc(var(--sg-link-pad) * -1);
    padding: var(--sg-link-pad) 0;
    border: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    color: var(--color-foreground);
    font-size: var(--type-body-sm-size, 0.8125rem);
    /* 600 to match every other trigger on the strip; was 500 and read lighter
       than the copy it sits under. */
    font-weight: var(--font-weight-semibold, 500);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* Features: swipeable image cards (Gymshark 3-up; ~1.3 visible on mobile) */
  .nether-pdp-tabs__cards {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nether-pdp-tabs__cards::-webkit-scrollbar {
    display: none;
  }

  /* Desktop: a static three-up grid, LEFT-ALIGNED under the gallery.

     The band runs padding-inline-end: 0 so its content box reaches 1420, which
     is right for the Designed For media (it is meant to bleed) and wrong for
     these. Left unopposed the three cards each measured ~450px and the row read
     as a banner strip rather than as three supporting frames. Gymshark's stop
     about three quarters across with air to their right, which is what keeps
     them subordinate to the gallery above.

     Capping the ROW (not the card) is what left-aligns them: the grid still
     divides evenly, it just divides a narrower box. Overflow returns to visible
     because there is nothing left to scroll, and a scroll container with no
     overflow still swallows scroll-chaining on trackpads. */
  @media screen and (min-width: 750px) {
    .nether-pdp-tabs__cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-inline-size: min(100%, 1040px);
      overflow-x: visible;
      scroll-snap-type: none;
    }
  }

  /* Mobile cards run nearly full-bleed with just a sliver of the next one
     showing, matching Gymshark. The old 72% left a tall portrait card floating
     mid-column, which read as a narrow strip rather than a break in the page. */
  .nether-pdp-tabs__card {
    flex: 0 0 88%;
    margin: 0;
    scroll-snap-align: start;

    @media screen and (min-width: 750px) {
      flex-basis: calc((100% - 2 * var(--space-md)) / 3);
    }
  }

  /* Square and sharp-cornered: the hard edge is what separates the imagery
     from the tab strip above it. */
  .nether-pdp-tabs__card-media {
    aspect-ratio: 1 / 1;
    border-radius: 0;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .nether-pdp-tabs__card-media img,
  .nether-pdp-tabs__card-media video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .nether-pdp-tabs__card-copy {
    display: block;
    padding-block-start: var(--space-sm);
  }

  /* Caption pair, Gymshark's hierarchy: the LABEL is the quiet line and the
     SENTENCE is the loud one. That inverts the usual title/body relationship on
     purpose — the label only names the feature, the sentence is the claim, and
     the sentence is what a scanning eye should land on.

     Ours had it the other way round (title at caps weight, text at 0.7 alpha),
     so the reading order fought the layout: the word the reader least needed
     was the boldest thing under the photograph (owner 2026-08-19, "the text
     gets bolded as well"). */
  .nether-pdp-tabs__card-title {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular, 400);
    letter-spacing: var(--tracking-wide, 0.02em);
    text-transform: uppercase;
    opacity: 0.6;
  }

  /* --font-weight-bold (700), not -semibold. The semibold token resolves to 500
     because Manrope's 600 is not served (see typography-tokens.liquid), and 500
     under a 400 label is not a weight difference a reader registers. 700 is a
     real face, so this is a true bold rather than a synthesised one. */
  .nether-pdp-tabs__card-text {
    display: block;
    margin-block-start: 4px;
    font-weight: var(--font-weight-bold, 700);
  }

  /* Spec list: composition and care, one per line. Renders with or without the
     cards above it. */
  .nether-pdp-tabs__features {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Only when it follows the cards, otherwise the panel's own top padding is
     already the gap. */
  .nether-pdp-tabs__cards + .nether-pdp-tabs__features {
    margin-block-start: var(--space-lg);
  }

  /* Hairline is the alpha rule, never --color-border: on this scheme that token
     resolves to #000000cf, an 81% black bar between every spec line. Roam hides
     it today only because features_list is empty, so it would have shipped the
     first time an editor typed a spec in. 2026-08-10. */
  .nether-pdp-tabs__feature {
    padding-block: var(--space-sm);
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .nether-pdp-tabs__feature:last-child {
    border-block-end: 0;
  }
/* END_BLOCK:nether-pdp-tabs */

/* START_BLOCK:nether-size-guide (INDEX:144) */
/* Trigger pill (moved into the Size legend). */
  .variant-option--buttons legend.nether-sg__legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .nether-sg {
    display: flex;
    justify-content: flex-end;
    margin-block: 2px 4px;
  }

  .nether-sg__open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Was padding:0 — a 16px-tall tap target crammed against the size row
       (user 07-26). Inline padding is negative-margined back out so the label
       stays optically flush with the tiles above it while the hit area grows. */
    padding: 8px 10px;
    margin-inline-end: -10px;
    margin-block-start: 2px;
    border: 0;
    background: transparent;
    color: rgb(var(--color-foreground-rgb) / 0.7);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    cursor: pointer;
    transition: color var(--motion-quick) var(--ease-ui);
  }
  @media (hover: hover) and (pointer: fine) {
    .nether-sg__open:hover { color: var(--color-foreground); }
  }
  .nether-sg__open svg { inline-size: 14px; block-size: 14px; }

  /* Root + overlay */
  .nether-sg__root {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    background: transparent; /* never paint the full-viewport root — only overlay + panel paint */
  }
  .nether-sg__root.is-open { visibility: visible; }

  .nether-sg__overlay {
    position: absolute;
    inset: 0;
    /* Tokenised 2026-08-02. These were the values every other sheet was
       measured against, so the token took them rather than the reverse. */
    background: var(--scrim, rgb(0 0 0 / 0.18));
    backdrop-filter: blur(var(--scrim-blur, 4px));
    -webkit-backdrop-filter: blur(var(--scrim-blur, 4px));
    opacity: 0;
    transition: opacity var(--motion-quick) var(--ease-ui);
  }
  .nether-sg__root.is-open .nether-sg__overlay { opacity: 1; }

  /* Panel — side drawer desktop, bottom sheet mobile */
  .nether-sg__panel {
    position: absolute;
    background: var(--color-background);
    color: var(--color-foreground);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    .nether-sg__panel {
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: 420px;
      max-inline-size: 92vw;
      transform: translateX(100%);
      transition: transform var(--motion-panel) var(--ease-enter);
      border-inline-start: 1px solid var(--hairline);
      box-shadow: var(--shadow-drawer);
    }
    .nether-sg__root.is-open .nether-sg__panel { transform: translateX(0); }
  }

  @media screen and (max-width: 749px) {
    .nether-sg__panel {
      inset-inline: 0;
      inset-block-end: 0;
      max-block-size: 86vh;
      border-radius: 18px 18px 0 0;
      transform: translateY(100%);
      transition: transform var(--motion-panel) var(--ease-enter);
      box-shadow: var(--shadow-drawer);
    }
    .nether-sg__root.is-open .nether-sg__panel { transform: translateY(0); }
  }

  .nether-sg__grab {
    display: none;
  }
  @media screen and (max-width: 749px) {
    .nether-sg__grab {
      display: block;
      inline-size: 34px;
      block-size: 4px;
      border-radius: var(--radius-pill);
      background: rgb(var(--color-foreground-rgb) / 0.18);
      margin: 10px auto 0;
      flex-shrink: 0;
    }
  }

  .nether-sg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-block-end: 1px solid var(--hairline);
    flex-shrink: 0;
  }
  .nether-sg__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
  }
  .nether-sg__close {
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    transition: background var(--motion-quick) var(--ease-ui);
  }
  @media (hover: hover) and (pointer: fine) {
    .nether-sg__close:hover { background: rgb(var(--color-foreground-rgb) / 0.06); }
  }
  .nether-sg__close svg { inline-size: 20px; block-size: 20px; }

  .nether-sg__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
  }
  .nether-sg__image {
    inline-size: 100%;
    height: auto;
    border-radius: 8px;
    margin-block-end: 18px;
  }

  /* ---- Calculator ---- */
  /* Our display rules outrank the UA [hidden] rule, so re-assert it. */
  .nether-sg__panel [hidden] { display: none !important; }

  .nether-sg__modes,
  .nether-sg__units {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px;
    border-radius: 10px;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    margin-block-end: 16px;
  }
  .nether-sg__units { margin-block-end: 18px; }

  /* Sliders */
  .nether-sg__sliders {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-block-end: 20px;
  }
  .nether-sg__slider-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-block-end: 12px;
  }
  .nether-sg__slider-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }
  .nether-sg__slider-val {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
  }
  .nether-sg__range {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
    block-size: 6px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--nether-colorway, var(--color-foreground)) 0 var(--pct, 50%), rgb(var(--color-foreground-rgb) / 0.15) var(--pct, 50%) 100%);
    cursor: pointer;
  }
  /* Kept local (feel WO-6): the 28px thumb overflows the 6px track box by
     ~11px, so the global 2px offset would strike the ring straight through
     it. Width follows the global ring token; only the offset differs. */
  .nether-sg__range:focus-visible { outline: var(--focus-ring-width) solid var(--color-foreground); outline-offset: 6px; }
  .nether-sg__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 28px;
    block-size: 28px;
    margin-block-start: -11px;
    border-radius: 50%;
    background: var(--color-background);
    border: 2px solid var(--nether-colorway, var(--color-foreground));
    cursor: grab;
    transition: transform var(--motion-instant) var(--ease-ui);
  }
  /* Grow, not compress: a drag handle enlarging under the finger is a control
     changing state, the one place scale is honest (feel WO-7 carve-out). */
  .nether-sg__range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
  .nether-sg__range::-moz-range-thumb {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    background: var(--color-background);
    border: 2px solid var(--nether-colorway, var(--color-foreground));
    cursor: grab;
  }
  .nether-sg__range::-moz-range-track { background: transparent; }

  /* DARK MODE: THE FILL STOPS USING THE COLOURWAY (owner 2026-08-23: "can't
     see the sliders" in dark mode).

     The filled half of the track is painted with --nether-colorway, the actual
     product colour. That is a nice touch on a light sheet, but the colourway
     can be any colour the product comes in, and Midnight is near-black. On the
     dark sheet the filled half therefore disappeared entirely while the
     unfilled half (foreground at 0.15) stayed visible, so the control read as
     a half-length grey bar with no fill.

     A progress affordance has to be legible against its own ground, so in dark
     it falls back to the foreground and the unfilled side is lifted 0.15 ->
     0.22 to hold its own separation. The thumb ring goes the same way, for the
     same reason: a black ring on a dark surface is not a ring.

     Light mode is untouched, so the colourway tint stays where it works. */
  html[data-theme='dark'] .nether-sg__range {
    background: linear-gradient(
      to right,
      var(--color-foreground) 0 var(--pct, 50%),
      rgb(var(--color-foreground-rgb) / 0.22) var(--pct, 50%) 100%
    );
  }

  html[data-theme='dark'] .nether-sg__range::-webkit-slider-thumb {
    border-color: var(--color-foreground);
  }

  html[data-theme='dark'] .nether-sg__range::-moz-range-thumb {
    border-color: var(--color-foreground);
  }

  .nether-sg__mode,
  .nether-sg__unit {
    padding: 9px 8px;
    border: 0;
    /* Was a raw 7px, a radius used nowhere else in the theme. Same token as the
       size and pack tiles, because when this fills with ink it IS one of them. */
    border-radius: var(--style-border-radius-control, 8px);
    background: transparent;
    color: rgb(var(--color-foreground-rgb) / 0.65);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--motion-instant) var(--ease-ui), color var(--motion-instant) var(--ease-ui);
  }
  /* Selected = solid ink fill, the one selection language the theme settled on
     (user 07-27, bundle-quantity-picker.liquid:1208-1217). This was a raised
     white chip on a 0 1px 4px shadow, the only instance of that treatment
     anywhere, so the same act of choosing looked different here than it did
     twenty pixels away in the buy column. */
  .nether-sg__mode.is-active,
  .nether-sg__unit.is-active {
    background: var(--color-foreground);
    color: var(--color-background);
  }

  .nether-sg__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-block-end: 14px;
  }
  .nether-sg__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .nether-sg__field-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }
  .nether-sg__field-label em {
    font-style: normal;
    font-weight: var(--font-weight-regular);
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }
  .nether-sg__inputs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .nether-sg__inputs input {
    inline-size: 62px;
    padding: 10px;
    border: 1px solid var(--line-control);
    border-radius: 8px;
    background: var(--color-background);
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .nether-sg__inputs input::-webkit-outer-spin-button,
  .nether-sg__inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  /* No outline suppression (feel WO-6): the global ring paints on
     :focus-visible; the border swap stays as an extra cue on any focus. */
  .nether-sg__inputs input:focus { border-color: var(--color-foreground); }
  .nether-sg__inputs i {
    font-style: normal;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .nether-sg__go,
  .nether-sg__select {
    inline-size: 100%;
    padding: 14px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--nether-colorway, var(--color-foreground));
    color: var(--nether-colorway-label, var(--color-background));
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-normal);
    cursor: pointer;
  }
  /* No local press rule (feel WO-7): both are <button>s, so the global touch
     press in nether-chrome.liquid covers them; pointer devices get no press. */

  .nether-sg__result { margin-block-start: 16px; }
  .nether-sg__result-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 18px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--nether-colorway, var(--color-foreground)) 10%, var(--color-background));
    border: 1px solid color-mix(in srgb, var(--nether-colorway, var(--color-foreground)) 28%, transparent);
    margin-block-end: 12px;
  }
  .nether-sg__result-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro-caps);
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }
  .nether-sg__result-size {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
  }
  .nether-sg__result-waist {
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }
  .nether-sg__result-note {
    margin: 8px 0 0;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-foreground-rgb) / 0.55);
    text-align: center;
  }
  /* The theme red, not this component's own #c0392b — one red across the PDP.
     The local html[data-theme='dark'] override that used to sit here is gone
     with it: nether-theme-bridge.liquid:214 now flips --color-error to #ff8a80
     in dark, which is the exact value this file was overriding to (the bridge
     took its dark red FROM here). Keeping the override would have re-stated the
     token and quietly outlived any future change to it. 2026-08-10. */
  .nether-sg__error {
    margin: 10px 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-error, #c8102e);
  }

  .nether-sg__gift-q {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 10px;
  }
  .nether-sg__gift-yn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-block-end: 18px;
  }
  .nether-sg__gift-yn-btn,
  .nether-sg__gift-pill {
    padding: 14px 4px;
    /* border: 0, NOT a transparent 1.5px border. A transparent border still
       occupies its track and the background paints under it to the outer
       radius, which leaves a faint rim at each corner. That is the artefact
       already removed from the PDP size tiles twice (nether-pdp.liquid:489-496),
       and it is worse here at 1.5px across nine buttons, worst of all in dark. */
    border: 0;
    border-radius: 8px;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--motion-instant) var(--ease-ui), color var(--motion-instant) var(--ease-ui);
  }
  /* Hover was a border-colour bump; with no border to colour it has to be the
     fill, which is what the pack tiles do too. */
  @media (hover: hover) and (pointer: fine) {
    .nether-sg__gift-yn-btn:hover,
    .nether-sg__gift-pill:hover { background: rgb(var(--color-foreground-rgb) / 0.1); }
  }
  /* Selected = solid ink fill. Was `border-color: var(--color-foreground)` on a
     transparent background, i.e. the white-outline language abandoned on 07-27
     because an outlined control reads as disabled beside a filled one. Later in
     source than the hover rule at equal specificity, so hovering a chosen pill
     keeps the fill. */
  .nether-sg__gift-yn-btn.is-active,
  .nether-sg__gift-pill.is-active { background: var(--color-foreground); color: var(--color-background); }
  .nether-sg__gift-pills {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
  [data-sg-gift-yes] .nether-sg__result {
    margin-block-start: 16px;
  }
  .nether-sg__select--gift-m {
    margin-block-start: 4px;
  }
  .nether-sg__gift-est {
    display: block;
    margin: 14px auto 0;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(var(--color-foreground-rgb) / 0.7);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--motion-quick) var(--ease-ui);
  }
  @media (hover: hover) and (pointer: fine) {
    .nether-sg__gift-est:hover { color: var(--color-foreground); }
  }
  .nether-sg__gift-tip {
    margin: 0 0 12px;
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  .nether-sg__divider {
    block-size: 1px;
    background: var(--hairline);
    margin-block: 20px;
  }
  .nether-sg__ref-label {
    margin: 0 0 10px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro-caps);
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .nether-sg__table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block-end: 16px;
    font-size: var(--font-size-sm);
  }
  .nether-sg__table th,
  .nether-sg__table td {
    text-align: left;
    padding: 11px 12px;
    border-block-end: 1px solid var(--hairline);
  }
  .nether-sg__table th {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro-caps);
    font-size: var(--font-size-xs);
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }
  .nether-sg__table tbody tr {
    cursor: pointer;
    transition: background var(--motion-quick) var(--ease-ui);
  }
  @media (hover: hover) and (pointer: fine) {
    .nether-sg__table tbody tr:hover { background: rgb(var(--color-foreground-rgb) / 0.04); }
  }
  /* The chart is a reference table — every size shows normally. Stock status
     lives on the size tiles, not here. */

  .nether-sg__note {
    font-size: var(--font-size-xs);
    color: rgb(var(--color-foreground-rgb) / 0.6);
    line-height: var(--leading-relaxed);
    margin: 0 0 8px;
  }

  .nether-sg__acc {
    border-block-start: 1px solid var(--hairline);
  }
  .nether-sg__acc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 2px;
    cursor: pointer;
    list-style: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
  }
  .nether-sg__acc summary::-webkit-details-marker { display: none; }
  .nether-sg__chev {
    inline-size: 16px;
    block-size: 16px;
    flex-shrink: 0;
    transition: transform var(--motion-exit) var(--ease-ui);
  }
  .nether-sg__acc[open] .nether-sg__chev { transform: rotate(180deg); }
  .nether-sg__acc-body {
    padding: 0 2px 16px;
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / 0.8);
  }
  .nether-sg__acc-body ul { margin: 0; padding-inline-start: 18px; }
  .nether-sg__acc-body li { margin-block-end: 6px; }

  body.nether-sg-lock { overflow: hidden; }
/* END_BLOCK:nether-size-guide */

/* START_BLOCK:nether-spec-line (INDEX:145) */
.nether-specline {
    margin-block-start: var(--margin-xs);
  }

  .nether-specline__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--gap-xs, 10px);
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.62));
  }

  /* Middot separators drawn between items rather than typed into the copy, so
     the merchant edits plain comma-separated text and never a delimiter. */
  .nether-specline__item + .nether-specline__item::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-inline-end: var(--gap-xs, 10px);
    border-radius: var(--radius-pill, 999px);
    background-color: currentcolor;
    vertical-align: middle;
    opacity: 0.55;
  }
/* END_BLOCK:nether-spec-line */

/* START_BLOCK:page-content (INDEX:146) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:147) */
.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:148) */
.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:149) */
.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:152) */
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-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:154) */
.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);
  }

  /* Silent means gone, not blank. The host is a flex item of the buy column, so
     an empty-but-present element still spends a full row gap (28px in the Nether
     product template). See the note at the top of this file for why the flag has
     to be emptiness rather than an attribute. */
  product-inventory:empty {
    display: none;
  }

  .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:155) */
.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:158) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .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:160) */
.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:161) */
/* 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 0 auto;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:162) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:trust-promise-cards (INDEX:164) */
/* TWO DIRECTIONS TRIED AND REJECTED ON 2026-09-05 — do not re-try either.

   1. A filled segmented bar: two halves sharing one tonal fill at
      foreground/0.04, icon over label, divider between. Built to the owner's
      own description ("similar to the size buttons in colour but lighter, they
      bleed together with a small divider"). He saw it and said "it looked
      lame". He was right, and this file already knew why — see the 2026-08-20
      note below: "the trust box losing its fill, that looks nicer". A fill is
      what this site spends on an ACTION. Information gets type and rules.

   2. A two-column, no-chrome version with the sub-copy switched back on
      (card_N_text out of display:none) and a hairline above. It read better in
      isolation but crowded the PDP: it sits directly above the How it
      works / Description / Features tab row, and two stacked multi-line blocks
      collided there. Owner: "they kind of break the PDP section and make it
      look really weird... should just be that text with the hyperlink under
      it, which looked a little cleaner."

   So the answer is what is below and has been since 2026-08-20: two rows, icon
   plus an underlined label, no fill, no box, description text hidden. It is
   quiet on purpose — it sits under the buy button and must not compete with
   it or with the tabs beneath.

   ===== TRUST PROMISE CARDS — iOS grouped-list, SKIMS minimal =====
   Compact rows: icon · title · chevron. Description text hidden.
   Soft grouped container, hairline dividers only between rows. */
/* No isolation:isolate and no overflow:hidden here — either one creates
   a new stacking/clipping context that caps the drawer's z-index against
   the sticky ATC. The drawer must escape to the viewport layer. */
.tpc-wrap {
  display: flex;
  flex-direction: column;
  /* One box, three buttons (owner 2026-08-16): rows sit flush inside a single
     bordered container, divided by hairlines. */
  gap: 0;
  /* No margin of its own (2026-08-10). This sits in a gapped column, so a
     14px/6px margin stacked on top of the parent's gap rather than replacing
     it: 42px of air above the group and 36px below, where every other seam on
     the page is 28px desktop / 22px mobile. The gap owns both edges now. */
  margin: 0;
  /* NO BOX (owner 2026-08-20: "the trust box losing its fill, that looks
     nicer"). Border, fill and radius all removed.

     This lands back on the 2026-08-12 no-fill grouped list, and the 08-16 note
     below explains why that was reversed once. What is different now is that
     the dividers are gone too and the set is two rows rather than three, so the
     job the box was doing — making a loose stack read as one unit — is a job
     that no longer needs doing. A border and a fill around two adjacent lines
     states their relationship twice.

     This came out of the quiet-buy experiment, which tested outline-only tiles,
     a plain badge and this. The owner kept ONLY this one. The rest is reverted
     and the experiment scaffolding is deleted.

     PRIOR NOTE (2026-08-16), retained because it explains the reversal it was
     part of: "The single box: one faint bordered, rounded, lightly-filled
     container that holds all three rows, reversing the 2026-08-12 no-fill
     grouped list." */
  border: 0;
  background: transparent;

  /* The rows sat inset from the box edge. With no box they align to the buy
     column's own left edge, with the price and the size row above them. */
  padding-inline: 0;
}

/* Rules ABOVE the first row and BELOW the last, which is what closes an
   accordion into a group. Without them the between-row dividers read as three
   loose lines: the set has no start and no end. The reference closes both ends
   and that is most of why it reads as one component.

   On the ROWS, not as a border on the wrap. The wrap carries 22px of side
   padding, so a border on it spans 0 to 402 while the rows span 22 to 380: the
   closing rules would have overhung the between-row ones by 22px at each end,
   which is a worse tell than having no closing rules at all. Measured, not
   guessed. Hanging them off the first and last row puts all four rules on the
   same two x-positions. */
/* LAST-OF-TYPE, and the two rejected alternatives are worth recording because
   each looked right and measured wrong.

   :last-child matches nothing here. An overlay div follows the three buttons,
   so the last child is not a row and the closing rule silently never rendered.

   Moving it to .tpc-wrap::after with left:0/right:0 then spanned the full 402
   rather than the rows' 22 to 380. Absolute insets resolve against the PADDING
   box, and the padding box INCLUDES the padding, so left:0 sits at the border
   edge, not at the content edge. The wrap's 22px padding buys nothing there.

   :last-of-type counts only among siblings of the same element type, so it
   finds the third BUTTON and ignores the overlay div entirely. The rule then
   spans the row, which is the span every other rule here uses. */
/* The group's top/bottom closing hairlines are gone: each row is now a
   self-contained bordered button, so the set no longer needs framing rules to
   read as one unit (owner 2026-08-16). */

/* Round only the first and last item's outer edges so the group
   keeps its iOS grouped-list look without overflow:hidden on the wrap. */
/* The first/last rows no longer round anything. These matched the wrapper's
   radius so the end rows met the box cleanly; with the box gone there is no
   corner for them to meet, and rounding a row that has no fill and no border
   rounds nothing visible. Removed 2026-08-20. */

.tpc-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  /* No side padding, so the label starts exactly where the rule starts. With
     the dividers now running edge to edge, a 14px inset left the type floating
     off the line that is supposed to be containing it. Classic accordions align
     the two (owner 2026-08-12, SAXX reference).
     Taller rows: 52px was sized for a filled card where the tint did the
     separating. Rules separate them now, and rules need air either side or the
     group reads as a table. */
  /* Small, quiet segment inside the box (owner 2026-08-16: "small and nice to
     click if needed, otherwise outta the way"). No own border/fill -- the box
     frames the set and hairlines divide the rows. */
  padding: 12px 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  width: 100%;
  transition: background var(--motion-quick) var(--ease-ui);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

/* Hairline divider between rows (not at the top of the first one).

   FULL WIDTH (owner 2026-08-12). It was inset to left:48px / right:14px so it
   started under the label rather than the icon, which is the right call inside
   a filled card: the indent implies the tint is the edge. With the card's grey
   removed there is no edge any more, so a short rule just reads as a line that
   did not finish. Edge to edge now does the containing that the fill used to. */
/* Dividers REMOVED (owner 2026-08-19, Gymshark reference: "a cleaner-looking
   box").

   Three rules inside a bordered box is two framing systems doing one job. The
   border already says these three belong together; the hairlines then subdivide
   what was just grouped, which is what made the component read as a table
   dropped into the column rather than as one quiet card. The reference frames
   and does not subdivide. Row spacing separates them now.

   Selector kept with no divider so the :last-of-type / ::after archaeology
   above stays attached to the code it explains. */
.tpc-item + .tpc-item::before {
  content: none;
}

/* Pointer-gated (2026-08-10). Ungated, a phone tap latches :hover and the row
   keeps its grey fill until something else is tapped — the drawer opens over a
   row that still looks pressed. */
@media (hover: hover) and (pointer: fine) {
  .tpc-item:hover {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.05);
  }
}

/* Press is the fill alone (2026-08-10). It also ran transform: scale(0.995),
   which is the split the page rule forbids — hover changes colour, press
   changes scale, never both on one control — and half a percent is invisible
   next to the theme's 0.97 press anyway. */
.tpc-item:active {
  background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.08);
  transition-duration: var(--motion-instant);
}

/* Compact on mobile (owner 2026-08-16: the bordered buttons read huge on a
   phone). Tighter gap, padding and label, held at the 44px tap-target floor. */
@media screen and (max-width: 749px) {
  .tpc-item {
    padding: 11px 0;
    min-height: 44px;
  }
  .tpc-title {
    font-size: var(--font-size-sm, 0.8125rem);
  }
}

/* No glyphs (owner 2026-08-12, SAXX reference). A classic accordion is a
   label and a chevron, and the reference carries no icons at all.

   The measurable reason, not just the reference: the icon plus its gap pushed
   the label 60px in from the wrap edge while the dividers now run from 0. Type
   floating 60px off the rule that is supposed to be containing it is the exact
   mismatch that made the group read as unfinished. Removing the glyph puts the
   label on the rule.

   display:none rather than deleting the markup, so the shield / truck / refresh
   set is one line away if it is ever wanted back. The gap collapses on its own
   because a display:none flex child does not take a gap. */
/* Glyphs are BACK (owner 2026-08-19, Gymshark reference). The 2026-08-12 note
   below is kept because its reasoning was sound for the layout it described,
   and the layout is what changed, not the reasoning.

   That note removed the icons because the dividers ran edge to edge from 0
   while the icon pushed the label 60px in, so the type floated off the rule
   meant to contain it. The dividers are gone now, so there is no rule for the
   label to sit off: the box's own border is the only edge, and against a border
   an icon column reads as structure rather than as an indent. The reference
   carries all three glyphs for the same reason.

   PRIOR NOTE (2026-08-12, SAXX reference), retained: "A classic accordion is a
   label and a chevron, and the reference carries no icons at all." True of that
   reference. This is a different one. */
.tpc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 18px;
  /* Slightly quieter than the label. The glyph names the row; the words carry
     it, and at equal strength the two competed. */
  color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.7);
}

/* 16px at stroke 2.2, not 18px at 1.8 (owner 2026-08-20: the icon "wasn't a
   good job").

   The mismatch was OPTICAL WEIGHT, not alignment — measured, the icon and label
   centres agreed to the pixel. The label is 13px at weight 700 and the glyph
   was an 18px outline drawn at 1.8, so a hairline mark sat beside bold type and
   the pair read as two different icon families.

   Two changes, both toward the text: down to 16px so the glyph stops being 38%
   larger than the word it labels, and up to 2.2 stroke so its ink matches a
   700 weight. stroke-width is a presentation attribute, so CSS overrides the
   value baked into ptb-icon's markup without touching the shared snippet. */
.tpc-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.tpc-body {
  flex: 1;
  min-width: 0;
}

.tpc-title {
  margin: 0;
  /* 16px, a real heading step (owner 2026-08-12, SAXX reference). These are
     accordion headings, not captions, and at 13px they were the same size as
     the supporting text under them, so the row had no internal hierarchy and
     the group read as a list of small print rather than three things you can
     open. 16 is the next step on the Nether scale and matches the tab row
     titles, which do the same job elsewhere on this page. */
  /* Small and quiet (owner 2026-08-16): dropped from bold 16px to a medium 13px
     label so the rows recede into supporting controls rather than shouting like
     the buy button above them. */
  /* BOLD again at the same 13px (owner 2026-08-19): "the bold just helps it sit
     separately from the page". The 08-16 note was solving LOUDNESS by dropping
     both size and weight together, and only the size needed to come down. At
     13px the weight is not competing with the buy button; it is what separates
     the box from the page it sits on.

     --font-weight-bold (700), not -semibold: the semibold token resolves to 500
     because Manrope's 600 is not served, and 500 is the weight this line
     already had. */
  font-size: var(--font-size-sm, 0.8125rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: normal;
  line-height: var(--leading-tight-ui, 1.25);
  color: var(--color-foreground, #111);
  text-transform: none;
  /* The TEXT is the affordance (owner 2026-08-19: "the customer could click the
     text itself, and that would pull up the sheet"). With the chevron gone the
     row had no visible sign it opened anything, and a bare bold line in a box
     reads as a statement, not a control. The underline is the reference's own
     signal and it is the one convention a reader never has to learn.
     text-underline-offset matches the size-guide link on this same page. */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Description text — hidden per SKIMS-minimal direction */
.tpc-text {
  display: none;
}

/* Chevrons REMOVED (owner 2026-08-19, Gymshark reference). The underlined label
   carries the affordance now, and a chevron beside an underline is the same
   promise made twice — it was also the strongest reason the group read as a
   settings list rather than as a trust card.

   display:none rather than deleting: the rotate-to-point-at-the-sheet logic
   below took two rounds to get right (down on mobile, right on desktop) and is
   worth keeping intact if the glyph is ever wanted back. */
.tpc-chevron {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Full ink, not 0.35 (owner 2026-08-12: "black out the chevron so it doesn't
     look half used"). At a third strength beside a full-strength label it read
     as a disabled control rather than a quiet one, and these rows are all
     tappable. --color-foreground is already 81% black, so solid here is not
     harsh, and it inverts to white in dark mode without a second rule. */
  color: var(--color-foreground);
  transition: transform var(--motion-quick) var(--ease-ui), color var(--motion-quick) var(--ease-ui);
  /* Points to where the sheet comes from (owner 2026-08-16): DOWN on mobile,
     where the sheet slides up from the bottom, and RIGHT on desktop (override
     below), where it slides in from the right edge. Rotated rather than swapping
     the SVG so there is one path to maintain across all three rows. The base is
     the mobile value; the desktop media query resets it to 0. */
  transform: rotate(90deg);
}

@media screen and (min-width: 750px) {
  .tpc-chevron {
    transform: rotate(0deg);
  }
}

.tpc-chevron svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}

/* Gated with the row fill above (2026-08-10) — gating one and not the other
   would leave the chevron darkened and nudged after a tap. */
@media (hover: hover) and (pointer: fine) {
  .tpc-item:hover .tpc-chevron {
    color: rgb(var(--color-foreground-rgb, 0 0 0) / 0.6);
  }
}
/* Hover nudge follows the arrow: DOWN on mobile (rotate 90), RIGHT on desktop
   (rotate 0). translateX after a rotate moves along the rotated axis. */
@media (hover: hover) and (pointer: fine) and (max-width: 749px) {
  .tpc-item:hover .tpc-chevron {
    transform: rotate(90deg) translateX(2px);
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 750px) {
  .tpc-item:hover .tpc-chevron {
    transform: rotate(0deg) translateX(2px);
  }
}

/* ===== OVERLAY ===== */
/* Overlay: lightly shades + subtly blurs the page content behind.
   Kept subtle so the sheet in front reads as the bright, focused object. */
/* One scrim, one blur, from the tokens. This was 0.15 while the size-guide and
   waitlist sheets used 0.18 — close enough that nobody would spot it side by
   side, and far enough that opening two sheets in sequence darkened the page by
   different amounts. */
.tpc-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim, rgb(0 0 0 / 0.18));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-panel) var(--ease-enter),
    visibility var(--motion-panel) var(--ease-enter);
  z-index: 9998;
  backdrop-filter: blur(var(--scrim-blur, 4px));
  -webkit-backdrop-filter: blur(var(--scrim-blur, 4px));
}
.tpc-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ===== DRAWER =====
   Explicit solid white (not the theme var) so no overlay tint bleeds
   through. backdrop-filter: none kills any inherited blur on iOS. */
.tpc-drawer {
  position: fixed;
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.tpc-drawer.is-open {
  visibility: visible;
}

/* Desktop: a rail docked to the right edge (owner 2026-08-13: "Should be like
   a nice sheet from the right-hand side").

   This reverses the 2026-08-02 decision to centre it, and the reason that one
   was made still has to be answered rather than ignored. The rail was dropped
   because three short paragraphs left two thirds of a 900px column empty:
   "it's just slammed to the top, and it's not filling up the whole thing".

   Height was never the real problem, anchoring was. The old rail had weight at
   the top and nothing at the bottom, so the emptiness had no floor. The CTA now
   sits on the bottom edge (margin-block-start: auto, below), which is how the
   cart drawer already handles the same shape. Content at both ends reads as a
   panel; content at one end reads as an accident.

   Tokens rather than literals here, so this sheet moves and casts a shadow like
   every other panel in the theme: --motion-panel / --ease-enter / --shadow-drawer
   / --hairline are the same four the size guide and waitlist sheets use. */
@media screen and (min-width: 750px) {
  .tpc-drawer {
    inset-block: 0;
    inset-inline-end: 0;
    /* Explicitly released. The centred sheet set inline-start, and leaving it
       at 50% would pin both edges and stretch the panel across the viewport. */
    inset-inline-start: auto;
    inline-size: 460px;
    max-inline-size: 92vw;
    border-radius: 0;
    border-inline-start: 1px solid var(--hairline);
    box-shadow: var(--shadow-drawer);
    /* Slides from the edge it is docked to. A docked panel that scales in from
       nowhere reads as a modal wearing a drawer's clothes. */
    transform: translateX(100%);
    transition:
      transform var(--motion-panel) var(--ease-enter),
      visibility var(--motion-panel);
  }
  .tpc-drawer.is-open {
    transform: translateX(0);
  }

  /* The bottom anchor. .tpc-drawer__body is already the flex: 1 scroller, so
     the active section stretches to fill it and the CTA takes the slack above
     itself, landing on the bottom edge no matter how short the copy is. */
  .tpc-drawer__body {
    display: flex;
    flex-direction: column;
  }
  .tpc-drawer .tpc-drawer__section.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  /* The extra class name on these two is measured, not stylistic.

     Both of their base rules sit ~200 lines BELOW this block: the section is
     set back to display: block, and the CTA back to margin-top: 16px. Equal
     specificity, later in the file, so both won and the anchor silently did
     nothing — the sheet still had 489px of void under the button, the exact
     fault this rail was rebuilt to avoid.

     The section one is the subtle half. Losing display: flex meant the CTA was
     never a flex item, and an auto top margin on a BLOCK box resolves to zero
     rather than absorbing free space. So the anchor could not have worked even
     once the CTA rule outranked its base on its own.

     A media query adds no specificity, so outranking them is the only fix. */
  .tpc-drawer .tpc-drawer__cta {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 48px;
    margin-block-start: auto;
    /* Pill, same as the mobile sheet (owner 2026-08-23). This was
       --style-border-radius-control, the 4px input radius, and because this
       selector outranks the base rule it was quietly winning there too — so
       raising the base to a pill alone did not change the desktop drawer. */
    border-radius: var(--radius-pill, 999px);
  }
}

@media screen and (min-width: 750px) and (prefers-reduced-motion: reduce) {
  /* No slide, so the panel is already home and only fades. Overriding the
     transform outright (rather than leaving translateX(100%)) is what keeps it
     on screen at all once the transition is gone. */
  .tpc-drawer {
    transform: translateX(0);
    opacity: 0;
    transition: opacity var(--motion-quick) var(--ease-ui), visibility var(--motion-quick);
  }
  .tpc-drawer.is-open {
    opacity: 1;
  }
}

/* Mobile: bottom sheet */
@media screen and (max-width: 749px) {
  .tpc-drawer {
    left: 0;
    right: 0;
    bottom: 0;
    /* COMES UP FURTHER (owner 2026-08-23: "mobile trust sheet can come up a
       bit further").

       max-height was the only size rule here, so the sheet was drawn by its own
       content: this panel is two short paragraphs, which landed it at roughly a
       third of the screen and read as a notification rather than as a sheet you
       had opened. A min-block-size gives it a floor to rise to; the cap still
       stops a long promise from swallowing the page behind it.

       svh, not vh: on a phone vh is the LARGEST viewport, so a sheet measured
       in vh can extend under the browser toolbar. svh is the smallest, which is
       the one actually on screen when the sheet opens. */
    /* 58svh -> 46svh (owner 2026-08-23: "might be a bad judgment call on my
       end, with having it scroll up a little further than it needs to").

       58 was set when the button sat directly under the last paragraph, so the
       extra height became dead space BELOW the button and the sheet looked
       padded out. The button is pinned to the bottom now, so the slack falls
       between the copy and the action, where it reads as breathing room — which
       means less of it is needed to stop this looking like a notification. */
    min-block-size: 46svh;
    max-block-size: 85svh;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    transform: translateY(100%);
    /* Same two tokens as the desktop half above (2026-08-10). This end was
       still on a hand-written 0.3s and a third easing curve, so the same sheet
       travelled at two different speeds depending on the breakpoint. */
    transition:
      transform var(--motion-panel) var(--ease-enter),
      visibility var(--motion-panel);
    /* The token, not a hand-written shadow. This one was the last hardcoded
       drawer shadow in the theme, and it was a third value again: 0.12 at 24px
       against the token's 0.15 at 20px. The size-guide and waitlist sheets, and
       the desktop half of this one, all take --shadow-drawer. */
    box-shadow: var(--shadow-drawer);
  }
  .tpc-drawer.is-open {
    transform: translateY(0);
  }
}

/* Drag handle (mobile only) */
.tpc-drawer__handle {
  display: none;
}
@media screen and (max-width: 749px) {
  .tpc-drawer__handle {
    display: block;
    width: 32px;
    height: 4px;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.15);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
}

/* Header */
.tpc-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.08);
  flex-shrink: 0;
}
@media screen and (max-width: 749px) {
  .tpc-drawer__header {
    padding: 14px 18px 16px;
  }
}

.tpc-drawer__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tpc-drawer__header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.05);
  flex-shrink: 0;
  color: var(--color-foreground, #111);
}

.tpc-drawer__header-icon svg {
  width: 20px;
  height: 20px;
}

.tpc-drawer__title {
  font-family: var(--font-heading-family, inherit);
  /* Scale token + the semibold token (2026-08-10), matching the size-guide
     drawer title. 600 is not a served face here, so it was silently rendering
     as 700 and this heading sat a step heavier than its sibling sheet's. */
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold, 500);
  margin: 0;
  line-height: var(--leading-tight-ui);
  text-transform: none;
  letter-spacing: normal;
}

.tpc-drawer__close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-foreground, #111);
  flex-shrink: 0;
  transition: background var(--motion-quick) var(--ease-ui);
}
/* Pointer-gated (2026-08-10): on a phone the close button was left holding its
   grey circle after the tap that dismissed the sheet, so it flashed back into
   view already highlighted the next time the sheet opened. */
@media (hover: hover) and (pointer: fine) {
  .tpc-drawer__close:hover {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.05);
  }
}

/* Body */
.tpc-drawer__body {
  padding: 22px 20px 28px;
  overflow-y: auto;
  flex: 1;
}
@media screen and (max-width: 749px) {
  .tpc-drawer__body {
    padding: 18px 18px 32px;
  }
}

.tpc-drawer__section {
  display: none;
}
.tpc-drawer__section.is-active {
  display: block;
}

/* Scale token, and one leading for both (2026-08-10). Paragraphs ran 1.65 and
   list items 1.6, which is close enough to look like a mistake rather than a
   decision when a paragraph sits directly above a list. */
.tpc-drawer__body p {
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
  margin: 0 0 14px;
  color: var(--color-foreground, #111);
}
.tpc-drawer__body p:last-child {
  margin-bottom: 0;
}

.tpc-drawer__body ul {
  margin: 0 0 14px;
  padding-left: 18px;
}
.tpc-drawer__body li {
  font-size: var(--font-size-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: 6px;
  color: var(--color-foreground, #111);
}
.tpc-drawer__body strong {
  /* 650 is not a served face (2026-08-10) — it rounded up to 700 anyway, so the
     token just says out loud what the browser was already doing. */
  font-weight: var(--font-weight-bold, 700);
}

.tpc-drawer__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 12px 20px;
  background: var(--color-foreground, #111);
  color: var(--color-background, #fff);
  border: none;
  /* PILL, both breakpoints (owner 2026-08-23). This was --radius-control, the
     6px used for inputs and tiles, which made the sheet's only button the one
     rounded rectangle among a site of pills. The mobile rule below is the same
     value; they are stated twice only because the mobile rule already exists
     to make the button full width. */
  border-radius: var(--radius-pill, 999px);
  /* Scale + weight tokens (2026-08-10). 13px was the sm token's value written
     out, and 600 is not a served face so it was rendering as bold. */
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold, 500);
  text-decoration: none;
  transition: opacity var(--motion-quick) var(--ease-ui);
}

/* MOBILE: left-aligned on a real gutter, with the CTA as a full-width button.

   The centring is gone (owner 2026-08-13: "I asked to center everything. I
   don't really like it anymore... It should just be like proper gutters and
   left-aligned"). It was added on 2026-08-02 and the half of it that was right
   is kept: the CTA is still full width and still 48px, matching the buy button
   this sheet was opened from, so a customer meets the same control twice rather
   than two dialects of it.

   What the centring cost: every paragraph got a ragged left edge, so the eye
   had to hunt for the start of each line instead of returning to a fixed
   margin, and the bullet lists needed an inline-block escape hatch to stay
   readable at all. That escape hatch is deleted with the rule that forced it.

   The gutter goes to 20px to match the desktop half, so the same sheet has one
   inset rather than a phone dialect of it. */
@media screen and (max-width: 749px) {
  .tpc-drawer__body {
    padding-inline: 20px;
  }

  .tpc-drawer__cta {
    display: flex;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 48px;
    padding-inline: var(--padding-lg);
    /* PILL (owner 2026-08-23: "the buttons should be pills in the slid up trust
       sheet"). This carried --style-border-radius-control, which is the input
       radius (4px) — so the sheet's main button was the only rounded-rectangle
       button on a site where every other button is a pill. */
    border-radius: var(--radius-pill, 999px);
    font-size: var(--font-size-sm);

    /* PINNED TO THE BOTTOM OF THE SHEET, not floated under the last paragraph
       ("placed at the bottom not moved up with the text"). margin-top: auto
       inside the sheet's flex column pushes it to the end, so whatever slack
       the sheet has sits between the copy and the button rather than below the
       button — which is what made it read as text with a control stuck to it
       rather than a sheet with an action. */
    margin-block-start: auto;
  }

  /* The columns the auto margin pushes against. .tpc-drawer is already a flex
     column, but the CTA lives two levels down — body > section > cta — so both
     levels have to pass the height through or the margin has nothing to
     resolve against and the button does not move. */
  .tpc-drawer__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-block-size: 0;
    padding-block-end: 20px;
  }

  /* .is-active, matching the specificity of the rule that sets display:block
     at :794 — a bare .tpc-drawer__section here loses to it and the section
     stays a BLOCK box. That matters more than it looks: an auto top margin on
     a block box resolves to zero rather than absorbing free space, so the CTA
     could never be pushed down no matter what the margin said. Measured in that
     state: section display block, height 159 (content), cta margin-top 0.

     The inactive sections keep display:none from :792 and claim nothing. */
  .tpc-drawer__section.is-active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-block-size: 0;
  }
}
/* Pointer-gated (2026-08-10): on a phone this is the sheet's main button, and
   ungated it stayed dimmed at 0.85 after the tap that navigated away from it. */
@media (hover: hover) and (pointer: fine) {
  .tpc-drawer__cta:hover {
    opacity: 0.85;
  }
}

/* Body scroll lock */
body.tpc-drawer-open {
  overflow: hidden;
}

/* ===== DARK MODE ===== */
/* Dark mode has nothing left to re-tint: the box carried the only surface, and
   the box is gone. The rows take their colour from --color-foreground, which
   already flips. Kept as an empty-intent comment rather than a stale rule. */
html[data-theme='dark'] .tpc-item + .tpc-item::before {
  background: rgba(255, 255, 255, 0.12);
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme='dark'] .tpc-item:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}
html[data-theme='dark'] .tpc-item:active {
  background: rgba(255, 255, 255, 0.09);
}
html[data-theme='dark'] .tpc-icon { color: #ffffff; }
html[data-theme='dark'] .tpc-title { color: #ffffff; }
html[data-theme='dark'] .tpc-chevron { color: rgba(255, 255, 255, 0.3); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme='dark'] .tpc-item:hover .tpc-chevron { color: rgba(255, 255, 255, 0.55); }
}

html[data-theme='dark'] .tpc-overlay { background: rgba(0, 0, 0, 0.25); }
/* The theme's dark surface token, not a fourth grey (2026-08-10). #1a1a1a was
   darker than every other dark panel, so this sheet read as a hole punched in
   the page next to the drawer and header. */
html[data-theme='dark'] .tpc-drawer {
  background: var(--nether-dark-surface, #1e1e22);
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme='dark'] .tpc-drawer__header {
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme='dark'] .tpc-drawer__handle {
  background: rgba(255, 255, 255, 0.2);
}
html[data-theme='dark'] .tpc-drawer__header-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
html[data-theme='dark'] .tpc-drawer__title { color: #ffffff; }
html[data-theme='dark'] .tpc-drawer__close { color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  html[data-theme='dark'] .tpc-drawer__close:hover {
    background: rgba(255, 255, 255, 0.06);
  }
}
html[data-theme='dark'] .tpc-drawer__body p,
html[data-theme='dark'] .tpc-drawer__body li { color: rgba(255, 255, 255, 0.85); }
html[data-theme='dark'] .tpc-drawer__cta {
  background: #ffffff;
  color: #111111;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .tpc-wrap { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.14); }
  html:not([data-theme='light']) .tpc-item + .tpc-item::before { background: rgba(255, 255, 255, 0.12); }
  @media (hover: hover) and (pointer: fine) {
    html:not([data-theme='light']) .tpc-item:hover { background: rgba(255, 255, 255, 0.06); }
  }
  html:not([data-theme='light']) .tpc-icon { color: #ffffff; }
  html:not([data-theme='light']) .tpc-title { color: #ffffff; }
  html:not([data-theme='light']) .tpc-chevron { color: rgba(255, 255, 255, 0.3); }
  html:not([data-theme='light']) .tpc-drawer { background: var(--nether-dark-surface, #1e1e22); }
  html:not([data-theme='light']) .tpc-drawer__header { border-color: rgba(255, 255, 255, 0.1); }
  html:not([data-theme='light']) .tpc-drawer__header-icon { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
  html:not([data-theme='light']) .tpc-drawer__title { color: #ffffff; }
  html:not([data-theme='light']) .tpc-drawer__close { color: #ffffff; }
  html:not([data-theme='light']) .tpc-drawer__body p,
  html:not([data-theme='light']) .tpc-drawer__body li { color: rgba(255, 255, 255, 0.85); }
  html:not([data-theme='light']) .tpc-drawer__cta { background: #ffffff; color: #111111; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tpc-item,
  .tpc-chevron,
  .tpc-overlay,
  .tpc-drawer,
  .tpc-drawer__close {
    transition-duration: 0.01ms !important;
  }
}
/* END_BLOCK:trust-promise-cards */

/* START_BLOCK:video (INDEX:166) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:167) */
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:accordion-styles (INDEX:168) */
.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);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:add-to-cart-button-styles (INDEX:169) */
/* Add to cart button */
  .button[id^='BuyButtons-ProductSubmitButton-'] {
    position: relative;
    overflow: hidden;
  }

  .add-to-cart-button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;

    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .add-to-cart-button[data-added='true'] {
    color: transparent;

    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart__added {
      color: var(--button-color);
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }

    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }
/* END_SNIPPET:add-to-cart-button-styles */

/* START_SNIPPET:background-media (INDEX:171) */
.background-image-container {
    overflow: hidden;
    position: absolute;
    inset: 0;
    opacity: var(--image-opacity);
  }

  .background-image-container img,
  .background-image-container svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .background-image-fit img,
  .background-image-fit svg {
    object-fit: contain;
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:172) */
.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:173) */
.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:buy-buttons-styles (INDEX:178) */
.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-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);
  }

  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .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%;
    color: var(--color, var(--color-foreground));
  }

  .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);
    padding-inline: var(--theme-drawer-padding);
    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__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, var(--color-foreground));
    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: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .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;
  }

  .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:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:179) */
.card-gallery {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  @container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .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: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @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:card-hover-effect-styles (INDEX:180) */
.product-card:hover,
  .collection-card:hover,
  .predictive-search-results__card:hover {
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:card-hover-effect-styles */

/* START_SNIPPET:cart-bubble (INDEX:181) */
.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(--cart-bubble-text, var(--cart-bubble-text-fallback));
    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(--cart-bubble-background, var(--cart-bubble-background-fallback));
    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;
  }
  /* Nether: inside the header the bubble used to hardcode --color-foreground,
     which made it follow the header's ink and ease with it down the home hero.
     That also made it unstylable: an #id selector beats anything the header can
     set, so --cart-bubble-background was dead on this element and every attempt
     to recolour the badge silently painted black anyway (2026-08-10).

     Now it reads the bubble's own variable and falls back to the old foreground,
     so the default behaviour is unchanged and nether-chrome.liquid can drive the
     colour. The transition stays for the hero ease; with a fixed badge colour it
     simply has nothing to animate. */
  #header-component .cart-bubble__background {
    background-color: var(--cart-bubble-background, var(--color-foreground));
    transition: background-color var(--motion-panel, var(--motion-panel)) var(--ease-ui, ease);
  }

  /* Nether: the same trap the background rule above fell into, one property
     over. These #id rules hardcoded `color`, so --cart-bubble-text was set on
     the icon (nether-chrome.liquid:246) and then silently ignored, because
     (1,1,0) beats the .cart-bubble rule that actually reads the variable.

     In light mode --color-background is the warm off-white and the numeral
     looked right by luck. In dark mode it flips to near-black, so the count
     went dark-on-red and read as grey. The badge is a fixed red in both
     schemes, so its numeral must be a fixed white in both too.

     Each rule keeps its old value as the var fallback, so anything that does
     not set --cart-bubble-text behaves exactly as before. */
  #header-component .cart-bubble {
    color: var(--cart-bubble-text, var(--color-background));
    transition: color var(--motion-panel) var(--ease-out-cubic, ease);
  }

  /* Home glass header: nether-chrome forces the foreground WHITE while the
     scheme background stays off-white, so background-token ink vanished on the
     white bubble. Explicit dark ink; correct in dark mode too (bubble is white
     there as well). */
  #header-component[transparent] .cart-bubble {
    color: var(--cart-bubble-text, #141414);
  }

  /* Past-hero LIGHT header: the badge bg follows --color-foreground, which
     nether-chrome flips to DARK (#111) once the bar expands over content. The
     dark over-hero ink above would then be dark-on-dark (invisible blob). Use a
     light number on the dark badge. Over the hero (not past-hero) the badge is
     white and keeps the dark ink above; dark mode keeps the white-badge/dark-ink
     pairing too, so both are unscoped by this rule. */
  html[data-nether-past-hero='true'][data-theme='light'] #header-component[transparent] .cart-bubble {
    color: var(--cart-bubble-text, #f9f7f4);
  }

  /* Cart drawer heading chip: quiet OUTLINE, count in ink (user) - the old solid
     chip went black-on-black because _cart-title's .cart-bubble__text rule paints
     the count var(--color-foreground) directly, beating the chip's inherited light
     color. Outline + explicit per-mode ink sidesteps the whole token tangle (the
     drawer inherits the header's forced foreground, so tokens are unreliable here). */
  /* Scoped to .cart-title (the "Cart (n)" heading INSIDE the drawer) - NOT the
     whole .cart-drawer component, which also contains the header icon; scoping
     wider leaked the outline onto the header bubble over the hero (ghost circle). */
  #header-component .cart-title .cart-bubble__background {
    background-color: transparent;
    border: 1.5px solid rgb(20 20 20 / 0.45);
  }

  #header-component .cart-title .cart-bubble,
  #header-component .cart-title .cart-bubble__text {
    color: #141414;
  }

  html[data-theme='dark'] #header-component .cart-title .cart-bubble__background {
    border-color: rgb(255 255 255 / 0.5);
  }

  html[data-theme='dark'] #header-component .cart-title .cart-bubble,
  html[data-theme='dark'] #header-component .cart-title .cart-bubble__text {
    color: #ffffff;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:182) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:183) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  /* The cart error line. Sits directly under the header, above the list, in the
     one non-brand colour the theme owns so it cannot be mistaken for another
     quiet grey status line. */
  .cart-drawer__error {
    margin: 0;
    padding-inline: var(--cart-drawer-padding);
    padding-block: var(--padding-xs) var(--padding-sm);
    font-size: var(--font-size--xs);
    line-height: 1.45;
    color: var(--color-error);
  }

  .cart-drawer__error[hidden] {
    display: 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);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-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 rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:184) */
.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),
    html:active-view-transition-type(fill-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:185) */
.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-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    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-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .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.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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 > * + *,
  .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-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .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;
  }

  /* The thumbnail fills its container by POSITION, not by ratio arithmetic.
     This used to be `aspect-ratio: inherit` + `height: auto`, which asked the
     engine to (a) inherit a non-inherited property and (b) resolve the image's
     box against a parent whose own height comes from `aspect-ratio`. Chromium
     treats that parent height as definite and lands on the right box; WebKit has
     not reliably done so, and the image carries a THIRD ratio of its own from the
     width/height attributes image_tag emits (250x250 here, 250x375 for the 2:3
     product shots). Three competing ratios, resolved differently per engine.

     Absolute inset:0 inside the already-relative container removes the whole
     question: the box is the container's box, and object-fit alone decides how
     the picture sits in it. Same result as before in Chromium. */
  .cart-items__media-image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }

  /* The .cart-items__empty-button rule that sat here is gone with the markup:
     the empty branch above now renders nether-cart-empty, which brings its own
     .nether-empty__btn. */

  /* ---- Unavailable line ----

     Everything above dims and the row states its problem in one line, with the
     two ways out on the same line. Deliberately not --color-error: an item that
     sold out is a fact about stock, not a failure of the customer's, and the
     drawer already spends that colour on requests the server actually rejected
     (cart-drawer.liquid .cart-drawer__error). */
  .cart-items__table-row--unavailable .cart-items__media-container {
    opacity: 0.5;
  }

  /* Quantity is not a thing you can change on stock that does not exist, and in
     the drawer the minus IS the remove control (the trash is display:none in
     nether-cart-styles.liquid). Hidden rather than unrendered so the row's
     quantity-selector and the cartItemRows refs stay exactly as
     component-cart-items.js indexes them; Remove below carries the exit. */
  .cart-items__table-row--unavailable .cart-items__quantity {
    display: none;
  }

  .cart-items__unavailable {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-2xs) var(--gap-sm);
    min-height: var(--minimum-touch-target, 44px);
    margin-block-start: var(--margin-xs);
    border-block-start: 1px solid var(--hairline);
    font-size: var(--font-size-xs);
  }

  .cart-items__unavailable-note {
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-foreground);
  }

  .cart-items__unavailable-actions {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    margin-inline-start: auto;
  }

  /* Text actions that still take a finger: the control is a full touch target
     tall and the strip above is sized to match, so the target is real without
     any negative-margin overhang reaching into the neighbouring rows. `font:
     inherit` is what stops the <button> falling back to UA Arial next to the
     <a>. margin: 0 is explicit because `.cart-items__table * { margin: 0 }` near
     the top of this stylesheet would otherwise be the only thing setting it. */
  .cart-items__unavailable-action {
    display: inline-flex;
    align-items: center;
    min-height: var(--minimum-touch-target, 44px);
    padding: 0 var(--padding-2xs);
    margin: 0;
    border: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--motion-quick) var(--ease-ui);
  }

  .cart-items__unavailable-action:hover,
  .cart-items__unavailable-action:focus-visible {
    color: var(--color-foreground);
  }

  /* 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-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__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-button-block-size: var(--height-buy-buttons);
    --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) {
      /* .nether-empty__btn, not the stock .cart-items__empty-button: the drawer
         has rendered nether-cart-empty since that state was built, so the old
         selector had nothing to match and the checkout pill had no partner to
         morph into. Pairing it with the real button is what the stock rule was
         for — one name on the outgoing pill, the same name on the incoming one. */
      .nether-empty__btn,
      .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:186) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .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-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 rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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-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:cart-typography-styles (INDEX:187) */
.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);
  }
/* END_SNIPPET:cart-typography-styles */

/* START_SNIPPET:chat-drawer (INDEX:188) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:checkbox-styles (INDEX:189) */
.checkbox {
    --checkbox-path-opacity: 0;
    --checkbox-cursor: pointer;

    position: relative;
    display: flex;
    align-items: center;

    &.checkbox--disabled {
      --checkbox-cursor: not-allowed;
    }
  }

  .checkbox:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  .checkbox__input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;

    /* Outline is on the SVG instead, to allow it to have border-radius */
    &:focus-visible {
      outline: none;
    }
  }

  .checkbox__label {
    position: relative;
    display: inline-flex;
    cursor: var(--checkbox-cursor);
    line-height: var(--checkbox-size);
    min-width: var(--minimum-touch-target);
  }

  .checkbox .icon-checkmark {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--color-background);
  }

  .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .checkbox__input:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }

  .checkbox__label-text {
    padding-inline-start: var(--checkbox-label-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checkbox .icon-checkmark path {
    stroke: var(--color-background);
    opacity: var(--checkbox-path-opacity);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .checkbox__input:disabled + .checkbox__label {
    color: var(--input-disabled-text-color);
  }
/* END_SNIPPET:checkbox-styles */

/* START_SNIPPET:collection-card (INDEX:191) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    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__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    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 {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--gap);
  }

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

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-wrapper-styles (INDEX:192) */
/* ------------------------------------------------------------------------------ */

  /* Collection Wrapper - Shared layout CSS for collection and search pages */

  /* ------------------------------------------------------------------------------ */

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;

      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_SNIPPET:collection-wrapper-styles */

/* START_SNIPPET:deferred-media-product-model-styles (INDEX:195) */
.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;
      }
    }
  }

  .product-media product-model {
    position: absolute;
  }

  .product-media-container--model {
    /* Usefull when view in your space is shown */
    flex-direction: column;
  }

  .shopify-model-viewer-ui__controls-area {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  /* If the product media is already providing an image cover, hide images provided by sibling product-model */
  .product-media__image ~ product-model .deferred-media__poster-image {
    display: none;
  }

  /* If the product model is playing, hide the preview image */
  .product-media-container:has(product-model .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  product-model {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  product-model model-viewer,
  product-model > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  product-model > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  product-model > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-ui);
  }

  .button-shopify-xr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-md);
  }

  .button-shopify-xr > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--margin-md);
  }

  .button-shopify-xr[data-shopify-xr-hidden] {
    display: none;
  }

  product-model .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  product-model .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:deferred-media-product-model-styles */

/* START_SNIPPET:deferred-media-video-styles (INDEX:196) */
.product-media deferred-media {
    position: absolute;
  }

  /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
  .product-media__image ~ deferred-media .deferred-media__poster-image {
    display: none;
  }

  /* If the product media video is playing, hide the preview image */
  .product-media-container:has(deferred-media .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  deferred-media {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;

    /* The overflow hidden in the deferred-media won't let the button show the focus ring */
    &:has(:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    @supports not selector(:focus-visible) {
      &:has(:focus) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: var(--focus-outline-offset);
      }
    }
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  deferred-media > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  deferred-media.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  deferred-media > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  deferred-media > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-ui);
  }

  deferred-media img {
    height: 100%;
    object-fit: cover;
    transition: opacity var(--motion-base) var(--ease-ui);
  }

  deferred-media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  deferred-media[data-media-loaded] img {
    opacity: 0;
  }

  deferred-media .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  deferred-media .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }

  deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    /* only apply this on the video block not product media */
    object-fit: cover;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  .video-interaction-hint {
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-ui);
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:deferred-media-video-styles */

/* START_SNIPPET:dialog-styles (INDEX:197) */
.dialog-modal {
    border: none;
    box-shadow: var(--shadow-popover);

    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      max-width: var(--normal-content-width);
    }

    @media screen and (max-width: 749px) {
      max-width: 100%;
      max-height: 100%;
      height: 100dvh;
      width: 100dvw;
      padding: var(--padding-md);
    }
  }

  .dialog-modal::backdrop {
    transition: backdrop-filter var(--animation-speed) var(--animation-easing);
    backdrop-filter: brightness(1);
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  :where(.dialog-modal)[open] {
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  :where(.dialog-modal).dialog-closing {
    animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      opacity: 0;
    }
  }

  /* stylelint-disable value-keyword-case */
  .dialog-drawer {
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;
  }
  /* stylelint-enable value-keyword-case */

  .dialog-drawer[open] {
    --start-x: var(--custom-transform-from, 100%);
    --end-x: var(--custom-transform-to, 0px);
    --start-opacity: 1;

    animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-drawer[open].dialog-closing {
    --start-x: 0px;
    --end-x: 100%;
    --start-opacity: 1;
    --end-opacity: 1;

    animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:dialog-styles */

/* START_SNIPPET:divider (INDEX:198) */
.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:199) */
.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:200) */
.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:201) */
.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%;
    }

    /* Single-media cards skip the slideshow wrappers, so stretch the plain
     * media container directly to fill the editorial cell. The multi-media
     * container sits under slideshow-component and is unaffected. */
    .card-gallery > a > .product-media-container {
      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:202) */
/* 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:fly-to-cart-styles (INDEX:203) */
/* Fly to cart animation */
  fly-to-cart {
    --offset-y: 10px;

    position: fixed;
    width: var(--width, 40px);
    height: var(--height, 40px);
    left: 0;
    top: 0;
    z-index: calc(infinity);
    pointer-events: none;
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0;
    background-color: var(--color-foreground);
    translate: var(--start-x, 0) var(--start-y, 0);
    transform: translate(-50%, -50%);
    animation-name: travel-x, travel-y, travel-scale;
    animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
    animation-duration: 0.6s;
    animation-composition: accumulate;
    animation-fill-mode: both;
  }

  fly-to-cart.fly-to-cart--main {
    --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
    --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
    --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
  }

  fly-to-cart.fly-to-cart--quick {
    --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
    --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

    animation-duration: 0.6s;
  }

  fly-to-cart.fly-to-cart--sticky {
    --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
    --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
    --radius: var(--style-border-radius-buttons-primary);

    @media screen and (max-width: 749px) {
      --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
    }

    animation-duration: 0.8s;
  }

  @keyframes travel-scale {
    0% {
      opacity: var(--start-opacity, 1);
    }

    5% {
      opacity: 1;
    }

    100% {
      border-radius: 50%;
      opacity: 1;
      transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
    }
  }

  @keyframes travel-x {
    to {
      translate: var(--travel-x, 0) 0;
    }
  }

  @keyframes travel-y {
    to {
      translate: 0 var(--travel-y, 0);
    }
  }
/* END_SNIPPET:fly-to-cart-styles */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:208) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    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 var(--motion-base) 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;
    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) {
      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:210) */
.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-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-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:211) */
.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:212) */
.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-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  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;
    }
  }

  .header-actions__cart-icon .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-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .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);
  }

  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;
    }
  }

  .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:213) */
.icon-caret--forward svg {
    transform: rotate(-90deg);
  }

  .icon-caret--backward svg {
    transform: rotate(90deg);
  }

  .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;
  }

  /* The scroller bleeds to both edges, so its first and last card carry the
     gutter as margin. Same --drawer-padding as every other row. Nether's menu
     has no featured content, so this one is unrendered here and unverified in
     the browser; it is changed only so the file has a single gutter value. */
  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--drawer-padding);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--drawer-padding);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* 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;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    {%- comment -%} Opacity only, so --ease-ui and not the spring (2026-09-12). The
       scrim has no geometry to overshoot and its job is to be unnoticed. {%- endcomment -%}
    transition: opacity var(--drawer-animation-speed) var(--ease-ui);

    .menu-open & {
      opacity: 1;
    }
  }

  {%- comment -%} Curves come from the tokens rather than the bare `ease` keyword
     stock used here (2026-09-12) — but the DURATION and the real timing
     function are both overridden downstream, on purpose, and this rule must not
     fight that.

     nether-chrome.liquid:1455 pins this element with transition LONGHANDS:
     transition-timing-function: var(--ease-ui) and transition-duration:
     var(--nether-header-slide). Longhands beat this shorthand, so whatever is
     written here for those two is inert on .menu-drawer.

     That is deliberate and it is the owner's, from 2026-08-30 — "we ned one
     that follows how my header animates in and out". The panel runs at the
     header bar's own duration and curve so the two read as a single movement.

     NO SPRING, AND NO PIN. Both were added on 2026-09-12 and both were
     reverted the same day after device testing. The panel is back to
     --ease-ui at --nether-header-slide, which is what live runs and what the
     owner asked to return to: "just go back to how live animated it to fix".

     Whatever timing is written in THIS file is still inert either way -
     nether-chrome pins the duration and easing with longhands, so this rule
     only ever owned the property list. {%- endcomment -%}
  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) var(--ease-ui),
      visibility var(--drawer-animation-speed) var(--ease-ui),
      opacity var(--drawer-animation-speed) var(--ease-ui);
  }

  {%- comment -%} The panel scrolls its own menu. Without containment, reaching the
     end of it hands the scroll to the page behind and the whole site drifts
     under an open drawer — the single clearest "this is a web page, not an app"
     tell there is, and one line to fix. {%- endcomment -%}
  .menu-drawer {
    overscroll-behavior: contain;
  }

  .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;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @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;
  }

  /* Submenu header with a centered, clickable title flanked by the back and
     close controls. */
  .menu-drawer__nav-buttons--with-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .menu-drawer__title {
    justify-self: center;
    min-width: 0;
    padding: var(--padding-md) var(--padding-sm);
    color: var(--color-foreground);
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
  }

  .menu-drawer__menu {
    /* Was a second, literal copy of --drawer-padding's own definition
       (calc(var(--padding-sm) + 7px), theme-styles-variables.liquid:609). Same
       number, two places to change it. Points at the token now. */
    --menu-drawer-inline-padding: var(--drawer-padding);

    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;
  }

  /* Nether: stock Horizon staggers every drawer element in — each
    one waits the full drawer-open duration PLUS 0.1s per item, and
    animation-fill-mode: backwards holds it invisible for that whole delay. With
    a normal menu the last rows do not appear until well after the panel has
    landed, which reads as the menu loading rather than opening (user 07-26:
    "everything should be there all the time").

    Removing our own entrance animations in nether-chrome.liquid did not fix it,
    because that targeted .menu-drawer__menu-item--mainlist while the stagger
    lives on .menu-drawer__animated-element — a different element, which is why
    the items measured clean and the stagger persisted. The panel's own slide is
    the only motion now. */
  /* STOCK RULE — restored 07-26, do not touch without a full
    drill-down test.

    Two attempts to remove the entrance stagger from here both broke the mobile
    menu on the live site. This class is not only on the decorative rows: it is
    also on .menu-drawer__menu--childlist, the submenu panels themselves. Setting
    `animation: none` and forcing visibility/opacity/transform left Shop, About
    and Help opening nothing. Zeroing the delay and duration instead left every
    element invisible, because the panels' visible state depends on this
    animation actually running.

    The stagger is cosmetic; a working drill-down is not. If it is removed later,
    it has to be done by shortening --drawer-animation-speed (which the delay is
    derived from) rather than by overriding this rule, and verified by opening
    each parent row — not by measuring the animation properties, which is what
    let both regressions through. */
  .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;
  }

  /* Nether: everything arrives WITH the drawer, not after it.

    Stock staggers each row by 0.1s and then waits a further full
    --drawer-animation-speed before starting, so the panel lands and the
    contents trickle in behind it — which reads as the menu loading rather than
    opening (user, repeatedly).

    Two earlier attempts fixed this by overriding the rule above and both broke
    the drill-down: this class is also on .menu-drawer__menu--childlist, the
    submenu panels, whose visible state depends on that animation actually
    running to completion. So the animation is left completely alone here.

    Instead the two INPUTS to its delay are neutralised:
      - the per-item index is pinned to 1, so no row waits on the row above it
      - the delay itself is zeroed, so nothing waits on the panel either
    Duration and fill-mode are untouched, which is what keeps the panels
    resolving to visible. Verified by opening a submenu, not by reading the
    computed animation. */
  .menu-drawer-container[open] .menu-drawer__animated-element {
    --menu-drawer-animation-index: 1;

    animation-delay: 0s;
  }

  .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);
    }
  }

  /* ONE SCALE ACROSS THE DRILL-DOWN (2026-08-02).

     Measured before: top level 28px (--menu-font-2xl--size), submenu rows 14px
     (--menu-font-sm--size). A half-scale fall between two screens of the same
     panel, which is why the second screen read as a different, lesser
     component. 28 -> 24 is one deliberate step instead.

     Done by re-pointing the two SIZE variables rather than by writing
     font-size on .menu-drawer__menu-item--parent, so the existing declarations
     below keep working and the family/weight/case/colour still come from the
     theme's menu settings. It resolves because submenu-font-styles emits these
     as an INLINE style on .menu-drawer__navigation — an ANCESTOR — and a rule
     on a descendant wins for that element and its subtree.

     Scoped to the nav's own drill-down panels: .drawer-localization renders a
     .menu-drawer__submenu too, and the mega menu on desktop reads the same
     variables from _header-menu.liquid. Neither is touched.

     --font-size-xl / --font-size-md are the Nether scale (24px / 18px,
     typography-tokens.liquid). The 18px line is for third-level menus, which
     Nether does not currently have; it is set so the ladder stays 28/24/18 if
     one is ever added, rather than dropping straight back to 14. */
  .menu-drawer__menu-container > .menu-drawer__submenu {
    --menu-parent-font-size: var(--font-size-xl);
    --menu-parent-font-line-height: var(--leading-snug);
    --menu-child-font-size: var(--font-size-md);
    --menu-child-font-line-height: var(--leading-snug);
  }

  .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);
    }
  }

  /* WHICH PAGE YOU ARE ON (2026-08-02).

     .menu-drawer__menu-item--active was already being written into the markup
     above in seven places, and styled in none of them — so the drawer was the
     one navigation surface on the site that never said where you were. It is
     styled here, and the two plain top-level links now get the class as well
     (they were emitting aria-current on its own, which only screen readers saw).

     The mechanic is the desktop header's, not a new one: the current row holds
     full ink and its siblings step back (blocks/_header-menu.liquid:361-374).
     Ink only, no pill, no bar, no weight change — the top-level rows were
     deliberately unbolded (nether-chrome.liquid:973) and bolding one back would
     undo that.

     Written against --color-foreground-rgb rather than the header's
     --menu-top-level-font-color-rgb: inside .menu-drawer that token is remapped
     to the sheet's own ink (nether-chrome.liquid:926), so one declaration is
     correct on the light sheet and the dark one, and it does not depend on the
     menu-font snippet having emitted anything.

     ONE RULE PER LEVEL. This was a single rule rooted on .menu-drawer__menu,
     and it bled across screens: that class is both the top-level <ul> AND every
     drill-down <ul>, and the top-level one CONTAINS all the submenu markup. So
     one --active anywhere in the drawer dimmed every non-active row in the whole
     tree. Open the Shop submenu while standing on /pages/faq and the submenu you
     just opened arrived pre-dimmed, which reads as disabled rather than as
     "you are not here".

     The split keys off the level modifiers the markup already carries —
     --mainlist on top-level rows, --parent on drill-down rows — so each list can
     only dim its own kind. The childlist rule is additionally ROOTED on
     .menu-drawer__menu--childlist rather than on any ancestor, so an active row
     inside Shop's panel cannot dim About's panel.

     Nothing marks anything when the current page is not in the menu: no
     --active is emitted, neither :has() matches, every row stays full ink. */
  .menu-drawer__menu.has-submenu:has(.menu-drawer__menu-item--mainlist.menu-drawer__menu-item--active)
    .menu-drawer__menu-item--mainlist:not(.menu-drawer__menu-item--active),
  .menu-drawer__menu--childlist:has(.menu-drawer__menu-item--active)
    .menu-drawer__menu-item:not(.menu-drawer__menu-item--active) {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  /* Reaching for a stepped-back row brings it back to full ink. Separate rule
     because the one above outranks the &:hover nested in the level rules.

     GATED TO POINTERS 2026-09-12, and this was a real bug on LIVE, not a
     refinement. Owner: "just tested mobile menu on live and it still takes 2
     clicks to get an action sometiems".

     iOS Safari withholds the first tap when a :hover rule repaints the element
     — it delivers mouseover, sees the page change, and waits for a second tap
     to confirm. So any ungated :hover that actually CHANGES something costs a
     tap on every touch device.

     This was the only one in the drawer that changes anything. The three
     `&:hover` rules nested in the level rules above set hover to the SAME value
     as their base state, so they repaint nothing and cost nothing; they are
     left alone deliberately, because they exist to block a stock hover colour
     and removing them would let that through.

     That also explains the "sometimes". A stepped-back row only exists when one
     row is active and its siblings are dimmed, so the lost tap appeared on some
     rows and not others — which is what made it look intermittent rather than
     like a rule.

     Same gate nether-hover.liquid uses, for the same reason; that file was
     checked first and is correctly gated throughout. */
  @media (hover: hover) and (pointer: fine) {
    .menu-drawer__menu.has-submenu:has(.menu-drawer__menu-item--mainlist.menu-drawer__menu-item--active)
      .menu-drawer__menu-item--mainlist:not(.menu-drawer__menu-item--active):is(:hover, :focus-visible),
    .menu-drawer__menu--childlist:has(.menu-drawer__menu-item--active)
      .menu-drawer__menu-item:not(.menu-drawer__menu-item--active):is(:hover, :focus-visible) {
      color: var(--color-foreground);
    }
  }

  /* Keyboard focus must still brighten a stepped-back row on a touch device —
     a phone with a Bluetooth keyboard reports hover: none, and the gate above
     would otherwise take focus-visible with it. */
  @media (hover: none) {
    .menu-drawer__menu.has-submenu:has(.menu-drawer__menu-item--mainlist.menu-drawer__menu-item--active)
      .menu-drawer__menu-item--mainlist:not(.menu-drawer__menu-item--active):focus-visible,
    .menu-drawer__menu--childlist:has(.menu-drawer__menu-item--active)
      .menu-drawer__menu-item:not(.menu-drawer__menu-item--active):focus-visible {
      color: var(--color-foreground);
    }
  }

  /* Three classes: the drill-down rows sit on --color-foreground-subdued from
     the theme's menu settings, and nether-chrome.liquid:992 colours the third
     level at two. */
  .menu-drawer .menu-drawer__menu-item.menu-drawer__menu-item--active {
    color: var(--color-foreground);
  }

  .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);
  }

  /* Account left, close right, on one row across the top of the panel. */
  .menu-drawer__top {
    display: flex;
    align-items: center;
    /* flex-end, not space-between. With customer accounts off nothing renders
       on the left, and space-between would leave the single remaining child,
       the close X, sitting alone against the LEFT edge. */
    justify-content: flex-end;
    /* The quiet line the row was missing (user 08-01: "below the account and
       the clothes, needs a super small light line to kind of separate those
       two"). --hairline is the one divider colour and carries its own dark
       twin, so this reads correctly in both themes with no second rule. */
    border-block-end: 1px solid var(--hairline);
  }

  .menu-drawer__account {
    margin-inline-end: auto;
  }

  /* THE PAIR. The account link and the close button are one control repeated
     twice, so everything that makes them look alike is declared once, here.

     They drifted because they were built apart: the account link was a 20px
     stroked glyph in a 44px box on a 0.6 hover, the close X a 22px filled glyph
     in a 54px box on a 0.8 hover, and the account mark was letterboxed on top of
     that (user 08-01: "the X to close is not styled properly to the account
     one"). Padding alone clears the 44px touch target on both, so neither
     control needs a width or a height of its own.

     ONE GUTTER (2026-08-02). The inline half was --padding-lg (16px) while the
     nav rows below ran on --drawer-padding (18.2px) and the back button on
     --padding-xl (20px), so the account glyph, the menu words and the back
     caret each started on a different vertical line inside one panel.

     Every padding that sets a row's distance from the DRAWER EDGE is
     --drawer-padding now — the token actually named for this job. Paddings
     that space one thing from another INSIDE a row are left alone: the caret's
     padding-inline-start, and the locale button's, are gaps, not gutters, and
     their outer edges are already governed by the list's gutter.

     Block padding stays --padding-lg: it is buying row height, not alignment.
     Measured after: 58.4 x 54, both halves of the pair, clear of 44px. */
  .menu-drawer__top-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--padding-lg);
    padding-inline: var(--drawer-padding);
    color: inherit;
    text-decoration: none;
    /* One stroke weight for both marks. This only works because the X in the
       markup above is now drawn as strokes too — while it was the stock FILLED
       glyph this property applied to nothing and the pair stayed mismatched. */
    --icon-stroke-width: 1.75px;

    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  /* Two classes so this outranks base.css's own .close-button:hover at 0.8,
     which would otherwise give the two halves of the pair different hovers
     depending only on which stylesheet the platform emits first. */
  .menu-drawer .menu-drawer__top-action:hover {
    opacity: 0.7;
  }

  /* Both marks at one size from one place. Three classes deep because
     nether-chrome renders AFTER this stylesheet and sizes the close icon
     itself; without out-ranking it the two icons could only be kept in step by
     editing two files. --icon-size-md is 22px, the size chrome states. */
  .menu-drawer-container .menu-drawer__top .svg-wrapper,
  .menu-drawer-container .menu-drawer__top .svg-wrapper svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  /* The account icon leaves the phone header now that it lives in the drawer.
     Desktop keeps it: there is room in the actions row and no drawer to open.
     Scoped to the header component so the drawer's own copy is untouched, and
     kept here beside the markup that replaces it so the two never drift apart.
     If a later rule in header-actions ever out-specifies this, move it to
     nether-chrome.liquid, which renders after the stylesheets and wins. */
  @media screen and (max-width: 749px) {
    /* (1,1,0) so it beats header-actions.liquid's own .account-button rule at
       (0,1,0) regardless of which stylesheet the bundler emits first. */
    #header-component .account-button {
      display: none;
    }
  }

  /* Longhands, not the `padding` shorthand. This rule sits AFTER
     .menu-drawer__top-action and matches the same element up in the top row
     (that X carries both classes), so a shorthand here would quietly put the
     16px inline gutter back. */
  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding-block: var(--padding-lg);
    padding-inline: var(--drawer-padding);
  }

  /* The back caret is the first thing in its row, so IT is what lines up with
     the account glyph above and the menu words below — all three on
     --drawer-padding. The label sits inboard of the caret by design; it is a
     control, not a list row. */
  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding-block: var(--padding-md);
    padding-inline: var(--drawer-padding);
    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: var(--leading-tight-ui);
    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;
    left: 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);
  }

  /* ONE quiet utility group at the foot of the panel (user 08-01: "we can also
     make the bottom of the hamburger menu a little cleaner"). It was three
     stacked blocks on three different rhythms: a link list carrying its own top
     border and its own right padding, a theme toggle carrying its own top
     padding, then the locale row, and the whole stack pushed in from the left
     only so nothing lined up with anything.

     One gutter now, the same --drawer-padding the nav rows above use, one line
     over the group, and two rows inside it: where you can go, then what you can
     set. margin-block-start: auto is what pins the group to the bottom of the
     column, and it is the only margin left on it.

     The old invalid background-color went with it. It read
     rgb(var(--color-foreground) 0.03) with a hex inside rgb() and no slash, so
     no browser ever painted it. */
  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-block: auto 0;
    margin-inline: 0;
    padding-block: var(--space-md) var(--space-lg);
    padding-inline: var(--drawer-padding);
    border-block-start: 1px solid var(--hairline);
  }

  /* Two classes because nether-chrome renders AFTER this stylesheet and would
     win the tie on one. Chrome stacks these links in a column and gives the
     list its own border and margins; the group owns all of that now, so the
     list has only to be a row. */
  .menu-drawer .menu-drawer__nether-utility {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-xl);
    margin: 0;
    padding: 0;
    border-block-start: 0;
  }

  /* Type on a panel, not a set of chips, so the touch target is bought with
     height rather than a filled box. */
  .menu-drawer .menu-drawer__nether-utility-link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--minimum-touch-target);
  }

  /* Theme switch left, region switch right. Nothing in this rule may set
     position: the locale drill-down panel is absolutely positioned against
     .menu-drawer, and a positioned ancestor here would capture it and trap the
     panel inside the row. */
  .menu-drawer__utility-prefs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-block-size: var(--minimum-touch-target);
  }

  .menu-drawer .menu-drawer__theme-toggle {
    padding-block-start: 0;
  }

  /* The locale button arrives on the .h6 type scale with its caret padded out
     to --padding-xl on the right, which reads as a different system from the
     two links above it. Pinned to the utility type and pulled flush to the
     group's gutter. Four classes on the caret to clear the .icon-caret rule
     earlier in this file at three. */
  .menu-drawer__utility-prefs .drawer-localization__button--label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .menu-drawer__utility-prefs .drawer-localization .drawer-localization__button .icon-caret {
    padding-inline-end: 0;
  }

  .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);
  }

  @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%;
  }

  /* The locale drill-down is a panel of this drawer, so it takes the drawer's
     gutter like every other panel. */
  .drawer-localization .localization-form > * {
    padding-inline: var(--drawer-padding);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:219) */
.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:222) */
.facets__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--variant-picker-swatch-height) / 1.5);
    min-width: 20px;
    padding: 0 6px;
    border-radius: 20px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .facets__bubble svg {
    width: 12px;
    height: 12px;
  }

  .show-more__button {
    color: var(--color-foreground);
    cursor: pointer;
  }

  .show-more__button:hover {
    @media screen and (min-width: 750px) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    }
  }

  .show-more__label {
    text-align: start;
    font-size: var(--font-size--body-md);
    font-family: var(--font-paragraph--family);
  }

  .show-more__button .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .show-more[data-expanded='true'] .show-more__label--more,
  .show-more[data-expanded='false'] .show-more__label--less {
    display: none;
  }

  .show-more__button .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }

  .facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color var(--motion-quick) var(--ease-ui), background-color var(--motion-quick) var(--ease-ui);
  }

  .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: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .facets .checkbox .checkbox__label-text {
    transition: color var(--motion-quick) var(--ease-ui), font-weight var(--motion-quick) var(--ease-ui);
  }

  /* 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:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .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 var(--motion-quick) var(--ease-ui);
  }

  .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 var(--motion-quick) var(--ease-ui);
    }

    &: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:223) */
/* 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-foreground);
    --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-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-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: 8px;
    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;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .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--top-shadow::before {
    content: '';
    box-shadow: 0 0 10px var(--color-shadow);
    position: absolute;
    z-index: var(--layer-lowest);
    inset: 0;
    clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-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:225) */
.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:nether-accordion-styles (INDEX:229) */
/* Hairline. --color-border is the heavy 81%-alpha near-black and reads as a
     bar rather than a divider, which is the call the FAQ already made on
     07-24. Only the colour is restated, so the stock 1px and the fallback-
     border maths that draws the first and last edges keep working.

     The three stock selectors are mirrored one by one rather than collapsed
     into a single descendant rule, because :not(:first-child) carries
     class-level weight: the short version ties with stock at (0,3,1) and then
     bundle order, not intent, decides the colour. */
  .accordion.accordion--dividers accordion-custom:not(:first-child) .details,
  .accordion.accordion--dividers accordion-custom:first-child .details,
  .accordion.accordion--dividers accordion-custom:last-child .details {
    border-block-color: rgb(var(--color-foreground-rgb) / 0.1);
  }

  /* Chevron. Stock turns it in 0.125s ease-in-out, which is over before the
     answer has started moving. Same duration and curve as the FAQ chevron so
     the two read as one control. */
  .accordion .icon-caret svg {
    transition: transform var(--motion-exit) var(--ease-out-cubic, var(--ease-ui));
  }

  /* Answer entrance, part one. Stock grows the panel over
     --animation-speed-slow (0.2s); the FAQ answer arrives over 300ms. Retimed
     with longhands so the shorthand's property list and its allow-discrete
     behaviour both survive untouched.

     Two rules, not one comma-separated list. A selector list is thrown away
     whole if any one selector in it fails to parse, and ::details-content
     arrived late in Safari and Firefox, so pairing them would have dropped the
     retiming on exactly the older phones that fall back to the .details-content
     div. Split, each rule stands on its own. */
  .accordion accordion-custom details .details-content {
    transition-duration: var(--motion-base);
    transition-timing-function: var(--ease-out-cubic, var(--ease-ui));
  }

  .accordion accordion-custom details::details-content {
    transition-duration: var(--motion-base);
    transition-timing-function: var(--ease-out-cubic, var(--ease-ui));
  }

  /* Answer entrance, part two: the 4px settle the FAQ answer arrives on. Only
     on the real .details-content div. Where ::details-content is supported the
     pseudo wraps that div, so animating both would double the travel. Gated
     the way the FAQ gates it, and left at the default fill mode, because a
     fill of both or backwards would strand the panel invisible anywhere the
     animation never runs. */
  @media (prefers-reduced-motion: no-preference) {
    .accordion accordion-custom details[open] .details-content {
      animation: nether-accordion-reveal var(--motion-base) var(--ease-out-cubic, var(--ease-ui));
    }
  }

  @keyframes nether-accordion-reveal {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:nether-accordion-styles */

/* START_SNIPPET:nether-accordion (INDEX:230) */
/* Hairlines. The stock block draws its own dividers only when the editor
     ticks "dividers"; the FAQ always has them, so they are unconditional here.
     Alpha off the foreground, never --color-border: on these schemes that token
     resolves near-black and would paint a hard bar between every row. */
  .shopify-section .accordion .details {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.1);
  }

  .shopify-section .accordion .details:last-of-type {
    border-block-end: 1px solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.1);
  }

  /* The question row. Padding matches the FAQ exactly. */
  .shopify-section .accordion .details__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: clamp(24px, 4vw, 32px);
    cursor: pointer;
    list-style: none;

    /* BOLD UPPERCASE, the FAQ's own question treatment. --font-weight-bold, not
       -semibold: semibold aliases 500 here because the served face carries no
       600, which is why every "bold" on this site read light until it was
       chased down. */
    text-transform: uppercase;
    letter-spacing: var(--type-ui-caps-tracking);
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-base);
    line-height: var(--leading-ui);

    /* THE FACE IS PINNED TO THE BODY FAMILY (2026-09-12), and this line exists
       to undo something the same day's display-face change broke.

       Headings moved to Archivo (layout/theme.liquid). This element is a
       heading, so it inherited the new face — while the FAQ's own question,
       .nether-faq__q-text, is a <span> and stayed on Inter. Measured across the
       two pages afterwards: both 16px/700 uppercase, one Inter and one Archivo.
       Same treatment, two faces, and the split did not exist before that day.

       Resolved toward the FAQ on the owner's call: "the FAQ accordion is better
       then the other one so reuse it if needed". So the native accordion
       follows the FAQ rather than the reverse — which also happens to be right
       on its own terms: a bold uppercase 16px question is a LABEL, not display
       type, and Archivo's character is wasted at that size while its wider
       forms make a long question harder to scan. */
    font-family: var(--font-paragraph--family);
  }

  /* Safari 15 and earlier make a summary with any display other than list-item
     non-interactive, which would leave every row unable to open. The FAQ solves
     this by putting the flex on an inner span; the stock block has no inner
     span, so the marker is removed the other way instead and display is left
     alone above. */
  .shopify-section .accordion .details__header::-webkit-details-marker,
  .shopify-section .accordion .details__header::marker {
    display: none;
    content: '';
  }

  @media (hover: hover) and (pointer: fine) {
    .shopify-section .accordion .details__header:hover {
      opacity: 0.65;
    }
  }

  /* Caret sized and inked to carry its weight beside a 700 question. At the
     stock size beside bold type it reads as a hairline, the same optical
     mismatch the PDP trust cards had. */
  .shopify-section .accordion .details__header .icon-caret {
    flex: 0 0 auto;
    inline-size: 14px;
    block-size: 14px;
    opacity: 0.8;
    transition: transform var(--motion-exit) var(--ease-ui);
  }

  .shopify-section .accordion .details[open] .details__header .icon-caret {
    transform: rotate(180deg);
  }

  /* The answer. Full ink and roomier, matching the FAQ: at a reduced alpha under
     a 700 question the answer reads as disabled rather than as supporting text,
     and the weight difference is already doing the hierarchy. */
  .shopify-section .accordion .details-content {
    padding-block-end: clamp(28px, 4vw, 36px);
    max-inline-size: 58ch;
    line-height: var(--leading-normal, 1.4);
  }

  .shopify-section .accordion .details-content > :first-child {
    margin-block-start: 0;
  }

  .shopify-section .accordion .details-content > :last-child {
    margin-block-end: 0;
  }
/* END_SNIPPET:nether-accordion */

/* START_SNIPPET:nether-cart-bundle-nudge (INDEX:231) */
/* The tinted module. Full-bleed so it reads as its own zone rather than a
     card floating in the scroll — the same job the reference's grey upsell
     band does. */
  .nether-nudge {
    margin-inline: calc(var(--cart-drawer-padding, 1.25rem) * -1);
    padding: var(--padding-md, 16px) 1.25rem;
    margin-block-start: var(--margin-md, 16px);
    /* The same grey as the delivery-and-returns disclosure at the top of the
       drawer, because two different greys doing the same job in one panel is
       how grey drift starts. Both moved off var(--fill-subtle): that token is
       an absolute #f5f5f5 and the light drawer is #f9f7f4, so the band painted
       at 1.02:1 against its own surface and read as no band at all. A
       foreground alpha steps off whatever surface it lands on. */
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .nether-nudge__label {
    margin: 0 0 4px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .nether-nudge__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm, 12px);
  }

  .nether-nudge__copy {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: var(--leading-ui);
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .nether-nudge__copy strong {
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-foreground);
  }

  .nether-nudge__add {
    flex: 0 0 auto;
    min-height: 34px;
    padding-inline: var(--padding-md, 16px);
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background-color: var(--color-foreground);
    color: var(--color-background);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  .nether-nudge__add:hover {
    opacity: 0.85;
  }

  .nether-nudge__add[disabled] {
    opacity: 0.45;
    pointer-events: none;
  }

  .nether-nudge__msg[hidden] {
    display: none;
  }

  .nether-nudge__msg {
    margin: 6px 0 0;
    font-size: var(--font-size-2xs);
    color: var(--color-error, #c8102e);
  }
/* END_SNIPPET:nether-cart-bundle-nudge */

/* START_SNIPPET:nether-cart-empty (INDEX:232) */
.nether-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--gap-2xs);
    min-height: 55vh;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .nether-empty__icon {
    display: block;
    width: 76px;
    height: 76px;
    margin-bottom: var(--margin-md);
    color: rgb(var(--color-foreground-rgb) / 0.4);
  }

  /* The svg carries a viewBox and no width/height of its own, so without this it
     falls back to the replaced-element default (300x150) and breaks out of its
     76px span. This is the ONLY thing sizing the icon now, in the drawer and on
     the /cart page alike — measured 76x76 in both.

     What used to sit here was `#header-component .nether-empty__icon svg` at
     76px !important, described as beating a Horizon `#header-component ... svg
     { width: 24px }`. Neither half holds in this theme: no such rule exists in
     base.css or any section, and cart-drawer.liquid is rendered from
     layout/theme.liquid and sections/cart-drawer-section.liquid, so the empty
     state has no #header-component ancestor to match in the first place
     (verified in the browser: closest('#header-component') is null). It was dead
     weight carrying a live-sounding explanation, which is worse than nothing. */
  .nether-empty__icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .nether-empty__title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .nether-empty__sub {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
  }

  .nether-empty__btn {
    margin-top: var(--margin-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding-inline: var(--padding-4xl);
    border-radius: var(--style-border-radius-buttons-primary, 100px);
    background-color: var(--color-foreground);
    color: var(--color-background);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold, 700);
    text-decoration: none;
    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  .nether-empty__btn:hover {
    opacity: 0.88;
  }

  /* The .nether-empty__facts and .nether-empty__links rules were deleted here
     2026-08-02 with the markup they styled. Kept as a note rather than left in
     place: dead selectors in this theme have repeatedly been read as evidence
     that a feature still exists. */
/* END_SNIPPET:nether-cart-empty */

/* START_SNIPPET:nether-cart-freeship (INDEX:233) */
/* Full-width banner: edge-to-edge under the header, no outer gutter */
  .nether-cart-freeship-wrap {
    padding: 0;
  }

  .nether-cart-freeship-wrap:empty {
    display: none;
  }

  /* Gymshark pattern: the progress bar sits on the plain drawer surface; the
     grey inset NOTICE box below is what separates it from the line items. */
  .nether-fsb {
    --nether-fsb-track: rgb(var(--color-foreground-rgb) / 0.12);
    --nether-fsb-fill: var(--color-foreground);

    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    width: 100%;
    padding-inline: var(--cart-drawer-padding);
    padding-block: var(--padding-md) var(--padding-xs);

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  /* Delivery and returns — the drawer's one tinted band, inset from the edges
     like the grey card it replaces so the module still separates the bar above
     from the products below. Closed it is a single row; open it answers the
     three questions people actually leave the bag to go and look up. */
  .nether-fsb-info {
    display: block;
    margin-inline: var(--cart-drawer-padding);
    margin-block: var(--margin-xs) var(--margin-2xs);
    padding-inline: var(--padding-md);
    border-radius: var(--radius-card, 8px);
    /* A foreground alpha, not var(--fill-subtle). That token is an absolute
       #f5f5f5, and the light drawer paints var(--color-background) = #f9f7f4:
       1.02:1, so the panel was in the CSS and invisible on screen, and the row
       read as floating text. An absolute grey cannot say "a step off whatever
       surface I am on", which is the whole job here. 0.05 is the alpha the
       drawer's other quiet surfaces already use (the summary discount pill at
       nether-cart-summary.liquid:602, the upsell thumb tile at
       nether-cart-upsell.liquid:113), so this is the drawer's existing card
       grey rather than a new one, and it holds in dark mode too. */
    background-color: rgb(var(--color-foreground-rgb) / 0.05);

    @media screen and (min-width: 750px) {
      margin-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .nether-fsb-info__summary {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    min-height: var(--minimum-touch-target, 44px);
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / 0.75);
    cursor: pointer;
    list-style: none;
    transition: color var(--motion-quick) var(--ease-ui);
  }

  .nether-fsb-info__summary::-webkit-details-marker {
    display: none;
  }

  .nether-fsb-info__summary:hover {
    color: var(--color-foreground);
  }

  .nether-fsb-info__ic {
    display: inline-flex;
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / 0.65);
  }

  .nether-fsb-info__label {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Transition on the base, state selector changes only the rotation (WO-9). */
  .nether-fsb-info__chev {
    flex-shrink: 0;
    opacity: 0.6;
    transition: rotate var(--motion-quick) var(--ease-ui);
  }

  .nether-fsb-info[open] .nether-fsb-info__chev {
    rotate: 180deg;
  }

  .nether-fsb-info__body {
    padding-block: 0 var(--padding-md);
  }

  .nether-fsb-info__body p {
    margin: 0 0 var(--margin-2xs);
    font-size: var(--font-size-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .nether-fsb-info__body p:last-child {
    margin-block-end: 0;
  }

  .nether-fsb__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-xs);
  }

  /* Small and slightly grey, per the reference — it is a status line, not a
     headline. Was 16px/500 in full-strength foreground, which made it compete
     with the product names below it. The amount stays bold so the number still
     carries. */
  .nether-fsb__msg {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular, 400);
    letter-spacing: var(--letter-spacing--normal, 0);
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  .nether-fsb__amount {
    font-weight: var(--font-weight-bold, 700);
  }

  .nether-fsb__check {
    display: inline-flex;
    color: var(--color-foreground);
  }

  /* Unlocked moment: the check pops in */
  @media (prefers-reduced-motion: no-preference) {
    .nether-fsb--reached .nether-fsb__check {
      animation: nether-fsb-pop var(--motion-quick) var(--animation-easing, ease) backwards;
    }
  }

  @keyframes nether-fsb-pop {
    from {
      transform: scale(0.4);
      opacity: 0;
    }
    60% {
      transform: scale(1.15);
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .nether-fsb__track {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-pill);
    background-color: var(--nether-fsb-track);
    overflow: hidden;
  }

  /* Blue gradient fill (user 07-25: the drawer needed a touch of color and the
     Gymshark blue reads well). Lightened 07-26 — the deep navy start read heavy
     and murky against the bone drawer; light sky into a clean mid blue is
     brighter and closer to Gymshark's bar. */
  .nether-fsb__fill {
    position: relative;
    height: 100%;
    width: var(--nether-fsb-pct, 0%);
    border-radius: var(--radius-pill);
    /* The owner's blue, 07-25 / 07-26. Back to a gradient fill after the
       squiggle experiment was cut 2026-09-05: the stroke could not carry a
       gradient, and with the stroke gone that constraint goes too. */
    background-image: linear-gradient(90deg, #7cccf7 0%, #35a5ea 100%);
    overflow: hidden;
    transition: width var(--motion-quick) var(--animation-easing, var(--ease-ui));
  }

  /* One sweep, not a loop. It ran 5s infinite, which is decoration: a light band
     crossing the bar every five seconds says nothing about the cart. Fired once
     when the bar draws, it says "your total moved", which is the only thing it
     was ever for. */
  .nether-fsb__fill::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: -70px;
    width: 56px;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.32), rgb(255 255 255 / 0));
  }

  /* Scoped to [open] like the fill's own draw-in below, so it re-fires each time
     the bag is opened on a changed total rather than running forever. The delay
     is three panel durations, which is how long the fill takes to finish
     drawing: the sweep should land on a settled bar, not chase it.

     No animation-fill-mode. The resting state of this pseudo IS opacity 0, so
     there is nothing to hold, and `backwards` on a 0%-opacity keyframe is the
     trap that leaves elements permanently invisible when the animation never
     runs. */
  @media (prefers-reduced-motion: no-preference) {
    .theme-drawer__dialog[open] .nether-fsb__fill::after {
      animation: nether-fsb-sheen var(--motion-panel) var(--ease-ui) calc(var(--motion-panel) * 3);
    }
  }

  @keyframes nether-fsb-sheen {
    0% {
      inset-inline-start: -70px;
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    100% {
      inset-inline-start: 100%;
      opacity: 0;
    }
  }

  /* Entrance: each time the drawer opens ([open] re-matches), the fill draws in
     left to right - the battery charging up. */
  @media (prefers-reduced-motion: no-preference) {
    .theme-drawer__dialog[open] .nether-fsb__fill {
      animation: nether-fsb-grow 0.85s var(--ease-ui) 0.35s backwards;
    }
  }

  @keyframes nether-fsb-grow {
    from {
      width: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nether-fsb__fill {
      transition: none;
    }
  }

  /* The .nether-fsb__ends axis and the whole .nether-fsb__tip tooltip are gone
     with their markup. The tooltip's contents now live in the delivery-and-
     returns disclosure above, where a tap opens a real panel instead of a
     bubble. assets/nether-cart.js still carries a delegated click handler for
     .nether-fsb__tip-btn; it matches nothing now and is listed as a handoff. */
/* END_SNIPPET:nether-cart-freeship */

/* START_SNIPPET:nether-cart-page (INDEX:234) */
/* The shared free-ship + summary snippets key off drawer padding vars.
     On the page there is no drawer, so flatten them: the bar sits flush at the
     top of the items column, the notice card keeps a small inset of its own. */
  .cart-page {
    --cart-drawer-padding: 0px;
    --cart-drawer-padding-desktop: 0px;
  }

  /* ---- Free-shipping bar + reserve notice at the top of the items column ---- */
  .cart-page__freeship {
    margin-block-end: var(--margin-lg);
    padding-block-end: var(--padding-md);
    border-block-end: var(--style-border-width, 1px) solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .cart-page__freeship .nether-fsb {
    padding-block-start: 0;
  }

  /* Delivery and returns: keep the tinted card, drop the drawer's side inset.
     (Was .nether-cart-notice, the fixed grey ship-timing card, before that
     module became a disclosure in nether-cart-freeship.liquid.) */
  .cart-page__freeship .nether-fsb-info {
    margin-inline: 0;
    margin-block: var(--margin-sm) 0;
  }

  /* ---- Line items: three-line card layout, matching the drawer ---- */
  .cart-page .cart-items__table-row.cart-items__table-row--full-width-variants {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      'media details  price'
      'media variants .'
      'media quantity quantity';
    column-gap: var(--gap-md);
    row-gap: var(--gap-2xs);
    align-items: start;
  }

  .cart-page .cart-items__media-container {
    border-radius: 10px;
    overflow: hidden;
  }

  .cart-page .cart-items__title {
    grid-area: details;
    margin-block-start: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--leading-snug);
  }

  .cart-page .cart-items__variants-wrapper {
    grid-area: variants;
  }

  .cart-page .cart-items__variants-wrapper,
  .cart-page .cart-items__variants-wrapper * {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium, 500);
    color: rgb(var(--color-foreground-rgb) / 0.85);
  }

  /* Single price only — drop the duplicate unit price */
  .cart-page .cart-items__unit-price-wrapper {
    display: none;
  }

  .cart-page .cart-items__price {
    grid-area: price;
    align-self: start;
    min-height: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-foreground);
  }

  /* Controls (stepper + trash) bottom-right under the price */
  .cart-page .cart-items__quantity {
    grid-area: quantity;
    justify-self: end;
    width: auto;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    gap: var(--gap-sm);
  }

  .cart-page .cart-items__quantity-controls {
    justify-content: flex-end;
    gap: var(--gap-2xs);
  }

  /* De-box the stepper */
  .cart-page .cart-items__quantity .quantity-selector {
    background: transparent;
    border: none;
    border-radius: 0;
    width: auto;
    min-width: 0;
    height: auto;
    flex: 0 0 auto;
    gap: 0;
  }

  .cart-page .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: 28px;
    height: 28px;
    color: var(--color-foreground);
    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  .cart-page .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus):hover {
    opacity: 0.55;
  }

  .cart-page .cart-items__quantity .quantity-selector input {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .cart-page .cart-items__quantity .quantity-selector input::-webkit-outer-spin-button,
  .cart-page .cart-items__quantity .quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .cart-page .cart-items__remove {
    width: 28px;
    height: 28px;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.55));
    transition: color var(--motion-quick) var(--ease-ui);
  }

  .cart-page .cart-items__remove:hover {
    color: var(--color-foreground);
  }

  /* Quiet hairline dividers between rows, no boxes */
  .cart-page .cart-items__table-row {
    background-color: transparent;
    border: none;
    border-block-end: var(--style-border-width, 1px) solid rgb(var(--color-foreground-rgb) / 0.12);
    border-radius: 0;
    padding-block: 0 var(--padding-xl);
    margin-block: 0 var(--padding-xl);
  }

  .cart-page .cart-items__table-row:last-child {
    border-block-end: none;
    margin-block-end: 0;
    padding-block-end: 0;
  }

  /* ---- Desktop layout: explicit 2-column placement + sticky summary card ----
     The stock layout reserved the whole right column via the summary's
     grid-row: 1 / -1. A sticky panel can't also stretch full height, so place
     all three children explicitly: title + items in column 1, summary parked in
     column 2, hugging the top (align-self: start) so it can stick on scroll. */
  @media screen and (min-width: 750px) {
    /* :not(--empty) is load-bearing, not tidiness. main-cart.liquid turns
       .cart-page into a CENTRED flex column for the empty state, and the only
       declaration below that survives a flex container is `align-items: start` —
       which quietly beat that centring (same specificity, later in the bundle)
       and pinned the empty state to the left gutter. It went unseen while the
       empty branch was one button carrying `margin-inline: auto`, because the
       button centred itself; wiring the full nether-cart-empty component in
       exposed it. The two layouts are mutually exclusive, so keep the selectors
       mutually exclusive too rather than relying on bundle order. */
    .cart-page:not(.cart-page--empty) {
      grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
      grid-template-rows: min-content 1fr;
      align-items: start;
      column-gap: var(--padding-4xl);
    }

    /* Title spans the top; items + summary sit side by side below it. Avoids
       the row-span intrinsic-sizing that inflated the title row. */
    .cart-page__title {
      grid-column: 1 / -1;
      grid-row: 1;
    }

    .cart-page__items {
      grid-column: 1;
      grid-row: 2;
    }

    .cart-page__summary {
      grid-column: 2;
      grid-row: 2;
      align-self: start;
      position: sticky;
      top: calc(var(--header-height, 80px) + 24px);
      height: auto;
      padding: var(--padding-xl);
      border-radius: 14px;
      background-color: rgb(var(--color-foreground-rgb) / 0.04);
    }
  }

  /* First summary block already has a divider from the card padding */
  .cart-page__summary .nether-csum__block:first-child {
    padding-block-start: 0;
  }

  /* The summary is a padded tinted card here, not a full-bleed drawer column.
     Zero the gutter var the shared snippet uses for its break-out margins, so
     nothing inside the card bleeds past its own 14px radius. */
  .cart-page__summary {
    --nether-csum-gutter: 0px;
  }

  /* Below 750px the page has no sidebar, so the checkout block behaves the way
     it does in the drawer: pinned to the bottom of the viewport with the same
     safe-area clearance, rather than sitting at the end of a long scroll. */
  @media screen and (max-width: 749px) {
    .cart-page__summary .nether-csum__checkout {
      position: sticky;
      bottom: 0;
      z-index: 2;
      padding-block: var(--padding-md);
      padding-block-end: max(var(--padding-md), calc(env(safe-area-inset-bottom) + 10px));
      background-color: var(--color-background);
    }
  }
/* END_SNIPPET:nether-cart-page */

/* START_SNIPPET:nether-cart-styles (INDEX:235) */
/* Nether: restore 3.5.1 drawer spacing vars. 4.x dropped the
     --cart-drawer-padding-desktop var our freeship/upsell layers consume (their
     desktop gutters computed to 0). Measured note: 4.x's
     --font-paragraph--line-height: 1 on the drawer MATCHES 3.5.1 (the old drawer
     inherited the same value from the header section it lived in) - leave it. */
  #cart-drawer cart-drawer-component {
    --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) {
    .cart-drawer .cart-drawer__items {
      padding-inline: var(--cart-drawer-padding-desktop);
    }

    .cart-drawer .theme-drawer__header {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  /* ---- Line item, built to the measured reference ----

     Everything about the product reads down the LEFT in one column — badge,
     title, variant, price — and the only thing on the right is the stepper.
     The old grid put the price top-right and the stepper bottom-right, which
     left an L-shaped hole in the middle of every row and made the row read as
     a receipt line rather than a product.

     Numbers here are measured off the reference drawer, not estimated:
       thumbnail  107 x 128 (portrait, ~27% of drawer width), 4px radius
       title      14px / 400
       variant    12px / 400  #6E6E6E
       price      14px / 700   <- bolder than the title, not lighter
     We had a 52px square thumb, a 16px title and a 500-weight price: bigger
     name, weaker price, tiny image. That inversion is most of why ours read
     heavier and cheaper at the same time.

     Ours land on 13px, not the reference's 14px: the Nether scale steps
     13 -> 16 with nothing between, and 16 puts the row back where it was.
     13 is the nearest step and keeps this file on one scale. */
  /* The fourth row is the error slot. cart-products.liquid renders a
     <td class="cart-items__error"> per line and base already gives it
     `grid-area: error`, but this template redefined the areas without one, so a
     failed quantity change was auto-placed wherever the grid algorithm landed
     it. It lives under the stepper, full width, where the thing that failed is. */
  .cart-drawer .cart-items__table-row.cart-items__table-row--full-width-variants {
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      'media details  details'
      'media variants variants'
      'media price    quantity'
      'error error    error';
    column-gap: var(--gap-md, 14px);
    row-gap: 2px;
    align-items: start;
  }

  /* Portrait thumbnail on a tinted tile so a cut-out product does not float.
     Targets the CONTAINER and the IMAGE by their real class names — an earlier
     pass aimed at `.cart-items__media img` and silently did nothing, leaving a
     square 88px thumb. */
  .cart-drawer .cart-items__media-container {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / 0.04);
  }

  /* contain, NOT cover. The reference crops lifestyle photography, where losing
     the edges is fine. Ours are product cut-outs — cover ate the waistband and
     the leg, so you no longer saw the garment. contain fits the whole product
     inside the portrait tile and lets the tinted background do the framing. */
  .cart-drawer .cart-items__media-image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: auto;
    object-fit: contain;
  }

  /* Single price only — drop the duplicate unit price under the variant */
  .cart-drawer .cart-items__unit-price-wrapper {
    display: none;
  }

  /* Price sits at the BOTTOM LEFT of the text column, on the stepper's row. */
  .cart-drawer .cart-items__price {
    grid-area: price;
    align-self: center;
    justify-self: start;
    min-height: 0;
    margin-block-start: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-foreground);
  }

  /* Stepper: the only thing on the right, level with the price. */
  .cart-drawer .cart-items__quantity {
    grid-area: quantity;
    justify-self: end;
    align-self: center;
    width: auto;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    margin-block-start: 6px;
    gap: var(--gap-sm);
  }

  .cart-drawer .cart-items__quantity-controls {
    justify-content: flex-end;
    gap: var(--gap-2xs);
  }

  /* De-box the stepper: bare minus / number / plus, no input chrome */
  .cart-drawer .cart-items__quantity .quantity-selector {
    background: transparent;
    border: none;
    border-radius: 0;
    width: auto;
    min-width: 0;
    height: auto;
    flex: 0 0 auto;
    gap: 0;
  }

  /* 26px of glyph, 44px of target. Stock Horizon sizes these to
     --minimum-touch-target (base.css:2979-2980) and the de-boxing above had cut
     them to a 26px square. At quantity 1 the minus IS the remove control (the
     trash is display:none further down this file), so it has to be finger-sized.

     Same negative-margin technique as nether-cart-freeship.liquid:322-325: grow
     the button to the token, then pull half the growth back on all four sides, so
     the row lays out exactly as it did at 26px and only the hit area changes. The
     button paints no background (base.css:2973), so nothing moves visually.

     The box overhangs the 30px number input by 9px a side, and the selector runs
     gap:0 so there is nothing to absorb it. Left alone, the plus button is the
     last in-flow flex item and so hit-tests ABOVE the input, cutting its usable
     target from 30px to about 21px. The input rule below lifts it into its own
     stacking context so it keeps all 30px and the buttons lose only the strip
     they were overlapping. Both controls end up bigger than they started. */
  .cart-drawer .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: var(--minimum-touch-target, 44px);
    height: var(--minimum-touch-target, 44px);
    margin: calc((var(--minimum-touch-target, 44px) - 26px) / -2);
    color: var(--color-foreground);
    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  .cart-drawer .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus):hover {
    opacity: 0.55;
  }

  .cart-drawer .cart-items__quantity .quantity-selector input {
    /* Paints and hit-tests above the steppers' negative-margin overhang, so the
       9px they reach in on each side costs the input nothing. Without this the
       plus button wins by DOM order and the input drops to a ~21px target. */
    position: relative;
    z-index: 1;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .cart-drawer .cart-items__quantity .quantity-selector input::-webkit-outer-spin-button,
  .cart-drawer .cart-items__quantity .quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Trash: quiet, sits after the stepper */
  .cart-drawer .cart-items__remove {
    width: 26px;
    height: 26px;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.55));
    transition: color var(--motion-quick) var(--ease-ui);
  }

  .cart-drawer .cart-items__remove:hover {
    color: var(--color-foreground);
  }

  /* Tighten the title so line 1 aligns with the price baseline */
  .cart-drawer .cart-items__title {
    margin-block-start: 0;
    font-size: var(--font-size-sm);
    line-height: var(--leading-snug);
  }

  .cart-drawer .cart-items__variants-wrapper {
    grid-area: variants;
  }

  /* ---- Item name ----
     Was bold + 18px, set here at every width (the desktop media
     query was a second, separate bump). Together they made the product name the
     loudest thing in the drawer; the reference keeps it plain so the price and
     the CTA carry the emphasis instead (user 07-27: "the titles don't need to
     be bold, they can be a little bit thinner"). */
  /* Title: 13px / 400, dark. Reference runs the name SMALLER than we did and
     puts the weight on the price instead. */
  .cart-drawer .cart-items__title {
    font-weight: var(--font-weight-regular, 400);
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
  }

  /* Rounded thumbnail to match the card language. --radius-card is the one
     thumbnail radius for the cart: the same product image also renders on /cart
     (nether-cart-page.liquid) and in the drawer upsell (nether-cart-upsell.liquid),
     and those two still carry their own values, so they need the same token.
     A second border-radius used to sit on the media-container rule at the top of
     this file; it was dead code (identical specificity, earlier in source) and is
     now removed, so this is the only radius the thumbnail reads. */
  .cart-drawer .cart-items__media-container {
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  /* Variant / size is the ONE grey line — everything else in the row is dark.
     It was 14px / 500 at 0.85 opacity, which is nearly as loud as the product
     name and left the row with no tonal hierarchy at all. Reference is 12px /
     400 at #6E6E6E, i.e. clearly secondary. */
  /* Every font-size in this file is on the Nether scale (single hyphen). The
     Horizon namespace sits one hyphen away and a full step off, and it does not
     scale at the 1920px tier, so a stray double dash silently desyncs the drawer
     from everything around it. --font-size-xs is 12px here. */
  .cart-drawer .cart-items__variants-wrapper,
  .cart-drawer .cart-items__variants-wrapper * {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular, 400);
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  /* Breathing room between the full-width free-ship banner and the first item */
  .cart-drawer .cart-drawer__items {
    padding-block-start: var(--padding-md);
  }

  /* Clean line items — no card, NO divider line between rows (user: remove the
     lines, just breathing room). border-block-end:none also beats the stock
     cart-drawer.liquid border-bottom (this selector is more specific). */
  .cart-drawer .cart-drawer__items .cart-items__table-row {
    background-color: transparent;
    border: none;
    border-block-end: none;
    border-radius: 0;
    padding-block: 0 var(--padding-lg);
    margin-block: 0 var(--padding-lg);
  }

  .cart-drawer .cart-drawer__items .cart-items__table-row:last-child {
    border-block-end: none;
    margin-block-end: 0;
    padding-block-end: 0;
  }

  /* Desktop: right-anchored full-height sheet (4.x theme-drawer defaults left,
     so anchor explicitly), a touch wider + larger heading/title. */
  @media screen and (min-width: 750px) {
    #cart-drawer .theme-drawer__dialog {
      top: 0;
      bottom: 0;
      left: auto;
      right: 0;
      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      width: clamp(440px, 30vw, 500px);
      max-width: 95vw;
    }

    /* Overlay sheet, not a page-squeeze. Horizon's theme-drawer adds
       .page-wrapper--drawer-open (margin-right = drawer width) so the page
       CONTENT shifts left to make room — that reads as the cart "expanding into
       the page". The cart is a modal overlay, so cancel the squeeze; the sheet
       just glides in over the content. */
    html:has(#cart-drawer .theme-drawer__dialog[open]) .page-wrapper--drawer-open {
      /* stylelint-disable-next-line declaration-no-important */
      margin-right: 0 !important;
    }

    /* Smooth slide-in from the right (transform, not Horizon's 0.125s `right`
       reflow which pops). Same iOS-sheet ease as the mobile bottom sheet.

       Tightened 07-27 from 0.6s / 0.48s: a cart drawer is a response, not a
       reveal, and the easing does the smoothing rather than the duration. The
       hand-tuned 0.34s / 0.26s that came out of that pass is now expressed as
       the travel role and the exit ratio, which is the same shape to within a
       frame or two and stops this file holding its own opinion about speed.
       Exit is 0.7 of enter, and it leaves on the exit curve rather than the
       entrance one: a thing going away accelerates. */
    #cart-drawer .theme-drawer__dialog--opening {
      /* stylelint-disable-next-line declaration-no-important */
      animation: nether-cart-slide-in-right var(--motion-panel) var(--ease-enter) !important;
    }

    #cart-drawer .theme-drawer__dialog--closing {
      /* stylelint-disable-next-line declaration-no-important */
      animation: nether-cart-slide-out-right calc(var(--motion-panel) * 0.7) var(--ease-exit) forwards !important;
    }

    @keyframes nether-cart-slide-in-right {
      from {
        transform: translateX(100%);
      }
    }

    @keyframes nether-cart-slide-out-right {
      to {
        transform: translateX(100%);
      }
    }

    /* The desktop bump to 18px is gone. It made
      the product name in the drawer noticeably larger than the Gymshark
      reference (~15px) and was what read as "huge" — on mobile the same title
      is 13px, which is why it only showed up at wider widths. One size at every
      width now, matching the heading treatment above. */
  }

  /* Drawer heading — quiet, not a headline.

     It was h2.h4 at 20px/600 (24px on desktop) and left-aligned, which made the
     panel's own label heavier than the product name underneath it and was the
     real reason the drawer read as oversized — the line items are already 13px,
     SMALLER than the Gymshark reference we were chasing.

     Gymshark's treatment: small, uppercase, letterspaced, centred. The title is
     a flex row containing the count badge, so centring needs justify-content
     rather than text-align alone. The desktop 20px bump that used to
     live in the 750px block is deliberately gone; one size at every width. */
  /* The header is flex with [title, close]. justify-content on the TITLE only
     centres its own contents inside its own box, which is why the earlier
     attempt left it flush left — the box itself was still sitting at the start
     of the row. Take the title out of flow and stretch it across the full
     header instead, so it centres against the drawer rather than against the
     space left over by the close button. */
  #cart-drawer .theme-drawer__header {
    position: relative;
    justify-content: flex-end;
    min-block-size: 44px;
  }

  #cart-drawer .theme-drawer__title {
    position: absolute;
    inset-inline: 0;
    margin: 0;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 500);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    text-align: center;
    /* The close button sits above it in the same row; the title is not
       interactive, so let taps fall through to the X. */
    pointer-events: none;
  }

  /* Blur backdrop (both modes): frosted dark scrim behind the drawer.
     Literal values only - var() resolution inside ::backdrop is unreliable,
     and a failed var kills the whole animation shorthand. */
  /* The blur is now STATIC and only the tint fades in. Animating
     backdrop-filter from blur(0) to blur(5px) forces the compositor to
     re-rasterise the blur every frame, and on iOS that stutter lands on the
     sheet's slide-in — which is what made the entrance feel rough rather than
     the duration (user 07-26). Fading opacity is essentially free. */
  #cart-drawer .theme-drawer__dialog[open]::backdrop {
    background: rgb(0 0 0 / 0.15);
    backdrop-filter: blur(5px) brightness(0.9);
    -webkit-backdrop-filter: blur(5px) brightness(0.9);
    /* The scrim should be there the moment the drawer starts moving, not fade
       in behind it — a slow scrim is what reads as the whole thing "fading in"
       (user 07-27). Fast enough to avoid a hard cut, short enough to feel
       instant, so the hand-tuned 0.16s becomes the edge role.

       Deliberately NO transition-delay. The staging rule says secondary chrome
       resolves after the panel has finished travelling, and that is right for a
       dimmed dead zone beside a panel; it is wrong for the backdrop itself,
       which is the thing telling you the page behind is no longer live. Delaying
       it by a full panel duration is exactly the "whole thing fades in" reading
       that was rejected on 07-27. */
    animation: nether-cart-backdrop var(--motion-edge) var(--ease-ui) forwards;
  }

  @keyframes nether-cart-backdrop {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* Mobile: slide-up bottom sheet (reuses Horizon's move-and-fade via --start-y/--end-y).
     Gated to [open] — a closed <dialog> must stay display:none, otherwise the bottom-sheet
     display:flex below forces the closed cart to render in flow at the top of the page. */
  @media screen and (max-width: 749px) {
    #cart-drawer .theme-drawer__dialog[open] {
      top: auto;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      /* Taller sheet with breathing room even with ONE product (user, vs Gymshark):
         a min floor gives the roomy feel; it then grows with content up to the max
         and the item list scrolls beyond that. */
      /* Gymshark height (user video 07-25): the sheet opens as a tall fixed
         canvas — almost to the top even with ONE item — instead of growing
         with content. The near-equal min/max makes the height stable. */
      height: auto;
      min-height: 90dvh;
      max-height: 93dvh;
      margin: 0;
      border: none;
      /* stylelint-disable-next-line declaration-no-important */
      border-radius: var(--radius-sheet) var(--radius-sheet) 0 0 !important;
      display: flex;
      flex-direction: column;
    }

    /* Proper bottom-sheet slide. Horizon's default `drawer-slide-in` animates
       `right` over 0.125s (built for a SIDE drawer) — on this bottom sheet that
       reads as an instant pop / "fly up". Override with a translateY glide over a
       comfortable duration + an iOS-sheet ease so it slides up from the bottom and
       back down on close. (The old --start-y/--end-y vars did nothing here —
       drawer-slide-in never reads them.) */
    /* Products own the visible area; the totals live BELOW the fold (Gymshark,
       user 07-26: "the order summary is taking up this massive part of the
       page... on Gymshark the products come up first, and then you have to
       scroll down to the order summary").

       No min-height rule here any more. Two earlier attempts (65dvh, then a
       full scroller height) both missed the real cause: stock Horizon makes
       .cart-drawer__summary sticky bottom:0, so the discount box and totals
       were never in the scroll flow — they floated over the items, and padding
       the items block just added an empty gap behind them. The summary is now
       split in snippets/cart-drawer.liquid so only the CTA stays pinned, and
       nether-cart.js tops up the items block by the exact shortfall on the
       rare small cart that still fits in one screen. */

    /* Fast but SMOOTH (user 07-26: "can come up pretty quick, less than half a
       second, but the scroll in needs to feel nicer"). The old
       var(--ease-enter) shoots away and slams to a stop, which read as
       a bounce. easeOutExpo-style (0.16,1,0.3,1) covers most of the distance
       early then glides into place, so it still lands in <0.5s but settles
       softly. will-change promotes the sheet to its own layer so the transform
       is composited rather than repainted each frame. */
    /* Same tokens as the desktop slide: the sheet is the same travel role, so it
       gets the same number. 0.46s / 0.34s was hand-tuned and is now the travel
       role and the exit ratio. */
    #cart-drawer .theme-drawer__dialog--opening {
      will-change: transform;
      /* stylelint-disable-next-line declaration-no-important */
      animation: nether-cart-sheet-up var(--motion-panel) var(--ease-enter) !important;
    }

    #cart-drawer .theme-drawer__dialog--closing {
      will-change: transform;
      /* stylelint-disable-next-line declaration-no-important */
      animation: nether-cart-sheet-down calc(var(--motion-panel) * 0.7) var(--ease-exit) forwards !important;
    }

    @keyframes nether-cart-sheet-up {
      from {
        transform: translateY(100%);
      }
    }

    @keyframes nether-cart-sheet-down {
      to {
        transform: translateY(100%);
      }
    }

    #cart-drawer .theme-drawer__dialog:modal {
      max-height: 88dvh;
    }

    /* Dynamic height: sheet hugs content, then the content area scrolls past 88dvh */
    .cart-drawer .cart-drawer__inner {
      height: auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
    }

    .cart-drawer .cart-items-component {
      height: auto;
      min-height: 0;
      flex: 1 1 auto;
    }

    .cart-drawer .cart-drawer__content {
      height: auto;
      min-height: 0;
      flex: 1 1 auto;
    }

    .cart-drawer .cart-drawer__items {
      overflow: visible;
    }

    /* Pin "Checkout securely" to the bottom of the sheet so the CTA is always
       visible without scrolling — everything else scrolls behind it. Plus safe-area
       clearance so the button clears iOS Safari's bottom bar + home indicator
       (user: checkout button was hidden below the fold on iPhone). This wrapper
       sits inside the scrollable .cart-drawer__content, so sticky pins it to the
       scroller.

       As of 07-26 the wrapper holds ONLY the CTA. The discount box and order
       summary render before it, in the scroll flow — while they lived in here
       they were pinned too, covering the line items. */
    #cart-drawer .cart-drawer__summary {
      position: sticky;
      bottom: 0;
      z-index: 1;
      background: var(--color-background);
      /* +10px over the safe area: on iPhone the pill sat too low, hugging the
         home indicator (user 07-24). */
      padding-block-end: max(var(--padding-md), calc(env(safe-area-inset-bottom) + 10px));
    }

    /* iOS ONLY bug, invisible in Chrome: without an appearance reset, Safari
       composites its native button chrome — a glossy white top sheen — onto
       the checkout pill, which read as a "white glow" over the black button
       (user screenshot 07-24). Kill the UA chrome outright. */
    #cart-drawer button,
    #cart-drawer .button {
      appearance: none;
      -webkit-appearance: none;
    }

    /* Grab handle (4.x renamed the header to .theme-drawer__header) */
    #cart-drawer .theme-drawer__header {
      position: relative;
      padding-block-start: var(--padding-xl);
    }

    #cart-drawer .theme-drawer__header::before {
      content: '';
      position: absolute;
      top: 7px;
      left: 50%;
      transform: translateX(-50%);
      width: 36px;
      height: 4px;
      border-radius: var(--radius-pill);
      background: rgb(var(--color-foreground-rgb) / 0.2);
    }
  }

  /* Reduced motion: kill the travel, keep the EVENTS.
     Deliberately 0.01ms rather than `animation: none`: Horizon's drawer close
     awaits animationend, and removing the animation entirely means that promise
     never settles and the drawer stays stuck open. The same trap left the
     add-to-cart checkmark permanently on screen (07-26). A near-zero duration
     still fires start/end, so the JS completes while the movement disappears.

     Top level, not inside the max-width:749px block. It sat inside that block
     until 07-30, so it only ever gated the mobile bottom sheet: the desktop
     right-hand slide (declared in the min-width:750px block above) and the
     top-level ::backdrop fade were both still animating at full length under the
     preference. An earlier comment here claimed the audit's inconsistency was
     closed; it was closed below 750px only. All three selectors are
     width-agnostic, so one block covers every width.

     Position matters: this has to sit AFTER both width blocks. Their animation
     shorthands are !important at the same (1,2,0) specificity, so source order
     is the only thing deciding it. */
  @media (prefers-reduced-motion: reduce) {
    #cart-drawer .theme-drawer__dialog--opening,
    #cart-drawer .theme-drawer__dialog--closing,
    #cart-drawer .theme-drawer__dialog[open]::backdrop {
      /* stylelint-disable declaration-no-important */
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      /* stylelint-enable declaration-no-important */
    }
  }

  /* Nether: plain close X (the 3.5.1 drawer look). 4.x wraps the close in a
     ringed 34px circle with border + shadow + hover motion - kill the chrome,
     keep the tap target and the icon. */
  #cart-drawer .theme-drawer__close-button {
    --private-button-border-color: transparent;
    --private-button-shadow: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    /* 3.5.1's close carried .button (font/padding reset); 4.x's doesn't, so it
       falls back to UA button styles (Arial + 1px/6px padding, off-center icon) */
    font: inherit;
    padding: 0;
  }

  /* Nether: no focus override here at all any more (feel WO-6). This file used
     to carry `outline: none !important` on the resting and :focus states plus a
     second !important rule to win the ring back on :focus-visible — two fighting
     declarations to end up where stock already was. Stock paints a 2px ring at a
     2px offset only on :focus-visible (theme-drawer-styles.liquid:148-149,
     165-167), and base.css:263 now reads the same fixed-pixel tokens. The cart
     drawer was the one overlay in the theme suppressing its own escape control;
     it is not any more.

     The open DID paint a ring, and this file was still right not to be the
     place it got hidden (owner, 08-11: the close X looked already-tapped). A
     programmatic focus() reads as keyboard modality, so autofocusing the close
     button matched :focus-visible on every open. Fixed at the cause:
     theme-drawer.js #focusInitialElement now focuses the dialog panel
     (tabindex="-1" plus .focus({ preventScroll: true })), and
     theme-drawer-styles.liquid suppresses the outline on that panel. Nothing
     reachable by Tab is left without a ring, so do not put a suppression rule
     back in this file. */

  /* ---- Scroll lock: the page must NOT move behind the open cart (user
     iPhone 07-25 — background scrolled during the sheet). Two layers:
     lock both possible page scrollers, and stop iOS scroll chaining out of
     the sheet's own scrollers when they hit their ends. ---- */
  html:has(#cart-drawer .theme-drawer__dialog[open]) {
    overflow: hidden;
  }

  html:has(#cart-drawer .theme-drawer__dialog[open]) .page-wrapper {
    overflow: hidden;
  }

  .cart-drawer .cart-drawer__content,
  .cart-drawer .cart-drawer__items {
    overscroll-behavior: contain;
  }

  /* ---- Depth cues: shadows replace Horizon's scroll-hint mask fades ---- */

  /* scroll-hint sets an inline mask that turns the scroller's top/bottom 10%
     transparent. In the cart that read as a "white fade" over the items AND hid
     the bottom of the last row (stepper, bundle label) whenever the sheet was
     short enough to scroll — the iOS "truncated line item" bug. The shadows
     below (driven by nether-cart.js) carry the scroll affordance instead.
     !important is required to beat the element's inline style. */
  #cart-drawer scroll-hint {
    /* stylelint-disable-next-line declaration-no-important */
    mask-image: none !important;
    /* stylelint-disable-next-line declaration-no-important */
    -webkit-mask-image: none !important;
  }

  /* An edge resolves on the edge role, and it is linear: 150ms of `linear` is
     the absence of a curve, which is what an edge appearing wants. It was 250ms
     on --ease-ui, i.e. an exit speed on a thing that is not exiting.

     Colour is a foreground alpha, not a black literal. The literal was invisible
     on the dark drawer (black shadow on a #26262c surface), so in dark mode the
     scrolled list had no top edge at all; on the foreground token it resolves to
     a soft light lift there and stays a shadow in light mode. */
  #cart-drawer .theme-drawer__header {
    position: relative;
    z-index: 2;
    background-color: var(--color-background);
    transition: box-shadow var(--motion-edge) var(--ease-edge);
  }

  #cart-drawer .theme-drawer__dialog[data-nether-shadow-top] .theme-drawer__header {
    box-shadow: 0 12px 18px -14px rgb(var(--color-foreground-rgb) / 0.28);
  }

  /* Same fade-kill for the summary (stock masks its top edge), and the upward
     shadow when more content sits below the fold — sheet-within-sheet depth. */
  .cart-drawer .cart-drawer__summary {
    mask-image: none;
    transition: box-shadow var(--motion-edge) var(--ease-edge);
  }

  #cart-drawer .theme-drawer__dialog[data-nether-shadow-bottom] .cart-drawer__summary {
    box-shadow: 0 -12px 18px -14px rgb(var(--color-foreground-rgb) / 0.28);
  }

  /* ---- One busy state, not a skeleton system (WO-9) ----

     The bag's list always has a shape, so a skeleton would replace known content
     with a guess. Dim the real rows and put one spinner over them, which is what
     the reference does: the rows stay legible underneath and nothing jumps.

     Keyed off .cart-items-disabled, which component-cart-items.js already adds on
     every mutation (:394) and removes when it resolves (:402), so this costs no
     new JS and lands within a frame of the tap. Until now that class resolved to
     `pointer-events: none` and nothing else — a quantity change looked identical
     to nothing happening.

     Scoped to .cart-items rather than the whole component: the checkout pill must
     not be dimmed, because it never became unavailable. */
  .cart-drawer .cart-items-disabled .cart-items {
    position: relative;
  }

  .cart-drawer .cart-items-disabled .cart-items::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: rgb(var(--color-background-rgb) / 0.7);
  }

  /* 1.5s linear is the reference's spinner rate and is deliberately not one of
     the motion tokens: those are durations for a thing that starts and finishes,
     and this runs for exactly as long as the network takes. It is a status
     indicator rather than decoration, so it keeps turning under reduced motion —
     stopping it would remove the information, not the movement. */
  .cart-drawer .cart-items-disabled .cart-items::before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    z-index: 3;
    width: 22px;
    height: 22px;
    translate: -50% -50%;
    border: 2px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-block-start-color: var(--color-foreground);
    border-radius: 50%;
    animation: nether-cart-spin 1.5s linear infinite;
  }

  @keyframes nether-cart-spin {
    to {
      rotate: 360deg;
    }
  }

  /* THE TRASH IS BACK (owner 2026-09-05, from customer behaviour, not taste:
     "customers are trying to change the amounts, and the subtraction thing
     isn't as obvious as a trash button to remove the product").

     The rule this replaces read: "No trash icon: at quantity 1 the stepper
     minus removes the line and the Undo toast covers mistakes." That reasoning
     was sound and it is still true — minus at 1 does remove the line, and the
     Undo toast does catch mistakes. What it got wrong is that BOTH of those are
     things a customer has to already know. A minus sign does not announce that
     it deletes, and nobody discovers the safety net until after the accident.
     A trash can says "remove" before it is pressed, which is the only moment
     that matters.

     It also fixes an inconsistency nobody chose: the cart PAGE kept its trash
     the whole time, so the same cart offered a remove button on desktop and
     hid it in the drawer on a phone.

     Sized 26px here against the page's 28px — the drawer row is tighter. The
     colour, hover and transition already match; only the hiding is undone. */
  .cart-drawer .cart-items__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  /* ---- Undo toast: black card floating just above the summary ---- */
  .nether-cart-toast {
    position: absolute;
    inset-inline: var(--padding-lg, 16px);
    bottom: var(--nether-toast-offset, 24px);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    padding: var(--padding-sm) var(--padding-md);
    border-radius: var(--radius-panel);
    background-color: var(--color-foreground);
    color: var(--color-background);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.28);
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--motion-exit) var(--ease-ui), transform var(--motion-exit) var(--ease-ui);
  }

  @media (prefers-reduced-motion: no-preference) {
    .nether-cart-toast {
      animation: nether-toast-in var(--motion-base) var(--ease-enter);
    }
  }

  @keyframes nether-toast-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  .nether-cart-toast.is-leaving {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }

  .nether-cart-toast__img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-card);
    object-fit: cover;
  }

  .nether-cart-toast__txt {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium, 500);
  }

  .nether-cart-toast__undo {
    flex-shrink: 0;
    padding: var(--padding-xs) var(--padding-2xs);
    margin: calc(var(--padding-xs) * -1) 0;
    border: none;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
/* END_SNIPPET:nether-cart-styles */

/* START_SNIPPET:nether-cart-summary (INDEX:236) */
.nether-csum {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Nether: no divider lines between blocks (user) — clean spacing only, the
     Gymshark look. */
  .nether-csum__block {
    padding-block: var(--padding-sm);
  }

  .nether-csum__block:first-child {
    padding-block-start: var(--padding-sm);
  }

  /* No band any more. The discount area used to break out of the gutter and
     paint a full-bleed tint, which made an empty text field the loudest thing in
     the bag at the exact moment of commitment. It is now a single quiet row that
     opens when asked; the tint went to the delivery-and-returns disclosure in
     nether-cart-freeship.liquid, which answers a question people have. */
  .nether-csum__discount {
    padding-block: 0;
  }

  /* One line, hairline above, no fill. Sits between the items and the totals as
     a rule rather than a module. */
  /* THE CODE ROW IS HIDDEN (owner 2026-09-05).

     "Somebody emailed me and asked me for a discount code... I haven't had that
     before." An empty code field does not wait to be used, it ASKS — "Have a
     code?" is a question, and the honest answer for most people is to go and
     look for one, or to write in and request it. Every discount that matters
     here (3 pairs 10%, 5 pairs 15%) applies automatically, so the field was
     never the route to them anyway. The owner's call for the space: "just leave
     it for the upsell to add to."

     Anyone who genuinely holds a code — the Klaviyo popup promises 15% off a
     first order — still redeems it in Shopify's own checkout discount box, one
     step later. Cleaner still: have Klaviyo hand out an auto-applying
     /discount/CODE link, and the field is never wanted.

     HIDDEN, NOT DELETED, and that is deliberate. assets/cart-discount.js reads
     input[name="discount"], the three error refs and .cart-discount__pill.
     Deleting the markup would strip the first two and put the REMOVE button on
     an automatically-applied discount at risk — the pills render outside this
     block and must keep working. display:none also takes the input out of the
     tab order, so nothing is reachable-but-invisible. To bring it back, delete
     this rule. */
  .nether-csum__code {
    display: none;
  }

  .nether-csum__code-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
    /* 44px of row without a fixed height, so the text still wraps if it has to. */
    min-height: var(--minimum-touch-target, 44px);
    padding-block: var(--padding-xs);
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / 0.8);
    cursor: pointer;
    list-style: none;
    transition: color var(--motion-quick) var(--ease-ui);
  }

  /* Safari still paints the disclosure triangle without this. */
  .nether-csum__code-summary::-webkit-details-marker {
    display: none;
  }

  .nether-csum__code-summary:hover {
    color: var(--color-foreground);
  }

  /* Transition on the BASE selector, state selector changes only the value
     (WO-9): declared inside [open] it would open animated and close as a cut. */
  .nether-csum__code-chev {
    flex-shrink: 0;
    opacity: 0.6;
    transition: rotate var(--motion-quick) var(--ease-ui);
  }

  .nether-csum__code[open] .nether-csum__code-chev {
    rotate: 180deg;
  }

  /* Each block is its own module, separated by space rather than rules (no
     dividers, per the earlier call). The totals get room above them so they do
     not look welded to the discount band. */
  .nether-csum__summary {
    padding-block-start: var(--padding-lg, 24px);
  }

  /* Section headings read as solid dark labels, not subdued captions (Gymshark:
     "DISCOUNT CODE" / "ORDER SUMMARY" carry the same weight as the content). */
  .nether-csum__label {
    margin: 0 0 var(--margin-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .nether-csum {
    /* The CTA's height. It used to be the code field's height too, which is what
       made an empty text box the same size as the primary action. */
    --nether-csum-field-h: 56px;

    /* The code row is a secondary control: the shared 44px minimum target, not
       the CTA's 56px. */
    --nether-csum-code-h: var(--minimum-touch-target, 44px);
  }

  .nether-csum__discount-form {
    display: flex;
    gap: var(--gap-2xs, 6px);
    padding-block-end: var(--padding-sm);
  }

  .nether-csum__discount-input {
    flex: 1;
    min-width: 0;
    height: var(--nether-csum-code-h, 44px);
    padding-inline: var(--padding-md);
    background-color: var(--color-background);
    color: var(--color-input-text);
    /* Rectangular, per the reference: the field is a container, not a chip.
       --radius-control is the shared tile/input step. */
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.16);
    border-radius: var(--radius-control, 10px);
    font-size: var(--font-size-base);
    /* Uppercase entry matches how codes actually read once applied. */
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro-caps);
    transition: border-color var(--motion-quick) var(--ease-ui);
  }

  .nether-csum__discount-input:focus-visible {
    outline: none;
    border-color: var(--color-foreground);
  }

  /* Keyed to --color-foreground-rgb, NOT --color-input-text-rgb. The dark bridge
     remaps --color-input-text but ships no -rgb twin for it
     (nether-theme-bridge.liquid:63), so in dark the placeholder kept the light
     palette's near-black (color-palette.liquid:197) while the field behind it
     flipped to #1e1e22 - roughly 1.22:1, i.e. invisible. Typed text went white
     and only its own placeholder stayed black. Every other muted line in this
     file is already on the foreground token, so this joins them.

     The ALPHA stays on --opacity-subdued-text (0.8, theme-styles-variables
     .liquid:399), which is what the original declaration resolved to. Swapping
     the token without carrying the alpha across drops it to 0.5, and on the
     white light-mode field that takes the placeholder from roughly 9:1 to
     roughly 3.4:1 - under 4.5:1 for 16px text, i.e. it trades the dark bug for
     a light one, and light is the site default. --opacity-subdued-text is a
     flat value, not one of the brightness-aware vars in
     brightness-opacities.liquid, so it is safe to reference from both themes. */
  .nether-csum__discount-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.8));
    text-transform: none;
    letter-spacing: normal;
  }

  /* Apply is a bordered control now, not a 118px filled pill. There is exactly
     one filled action in this panel and it is Checkout; a second solid black pill
     beside an empty field was competing with it. */
  .nether-csum__discount-apply {
    flex-shrink: 0;
    min-width: 84px;
    padding-inline: var(--padding-md);
    height: var(--nether-csum-code-h, 44px);
    border: 1px solid var(--line-control);
    border-radius: var(--radius-control, 10px);
    background-color: transparent;
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium, 500);
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro-caps);
    cursor: pointer;
    transition: background-color var(--motion-quick) var(--ease-ui), color var(--motion-quick) var(--ease-ui);
  }

  .nether-csum__discount-apply:hover {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  /* A rejected code says so in the one error colour the theme owns, with its own
     glyph. It used to render in plain foreground at 13px, i.e. indistinguishable
     from every other quiet line in the drawer. */
  .nether-csum__discount-error {
    margin-block-start: 0;
    padding-block-end: var(--padding-sm);
    font-size: var(--font-size-sm);
    color: var(--color-error);
  }

  .nether-csum__discount-error small {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs, 6px);
  }

  .nether-csum__discount-error-ic {
    flex-shrink: 0;
  }

  /* Set by assets/nether-cart.js when a code comes back refused, so the field
     itself carries the rejection rather than only the line under it. That patch
     also puts the typed code back: stock cart-discount.js blanks the input
     before it shows the error, which cost the shopper the whole code over a
     typo and left this rule with nothing to match.

     Beats :focus-visible above by source order, not specificity — both score
     (0,2,0) — which is what keeps the border red while the caret is back in the
     field. Moving either rule past the other silently returns it to black. */
  .nether-csum__discount-input[data-invalid] {
    border-color: var(--color-error);
  }

  /* Applied codes sit BELOW the field they came from. Each one is a recessed
     well — tinted fill plus an inset hairline — so it reads as something seated
     in the panel rather than floating on top of it (user: "needs a hole behind
     it"). */
  .nether-csum__discount-codes {
    list-style: none;
    margin: var(--margin-sm) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
  }

  .nether-csum__discount-codes:empty {
    display: none;
  }

  .nether-csum__discount-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs, 6px);
    padding: 9px var(--padding-sm);
    /* Rounder than the input it sits under: the field is a container, the
       applied code is an object (user 07-26 — 3px read as an un-styled box). */
    border-radius: var(--radius-card, 8px);
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.1);
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 500);
    letter-spacing: var(--tracking-micro-caps);
    text-transform: uppercase;
  }

  .nether-csum__discount-tag {
    flex-shrink: 0;
    opacity: 0.7;
  }

  /* The X is an inline_asset SVG whose intrinsic box does not match the button,
     so it sat high and left inside its own hit area. Centre it explicitly and
     pin the glyph size rather than inheriting whatever the asset ships with. */
  .nether-csum__discount-remove {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    margin-inline-start: var(--gap-3xs, 2px);
    color: rgb(var(--color-foreground-rgb) / 0.55);
    cursor: pointer;
    transition: color var(--motion-quick) var(--ease-ui);
  }

  .nether-csum__discount-remove svg {
    display: block;
    width: 10px;
    height: 10px;
  }

  /* A finger-sized tap target centred on the X, without growing the visible
     chip. Centred on the button itself — anchoring it to the chip would drop a
     44px hotspot over the code text instead. */
  .nether-csum__discount-remove::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    width: 34px;
    height: 34px;
  }

  .nether-csum__discount-remove:hover {
    color: var(--color-foreground);
  }

  /* Order summary — roomy rows (Gymshark reads as a list you can scan, not a
     tight receipt). */
  .nether-csum__summary {
    padding-block: var(--padding-md, 16px) var(--padding-lg, 24px);
  }

  .nether-csum__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-md);
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / 0.8);
    padding-block: var(--padding-xs, 8px);
  }

  .nether-csum__num {
    color: var(--color-foreground);
  }

  .nether-csum__muted {
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.55));
  }

  .nether-csum__count {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.55));
  }

  /* A saving carries the same weight as the total, because it is the one line
     in the column that gives something back. Ink only, no colour: a green figure
     would read as a coupon site. */
  .nether-csum__row--saving {
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-foreground);
  }

  .nether-csum__row--total {
    margin-block-start: var(--margin-xs);
    padding-block-start: var(--padding-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-foreground);
  }

  .nether-csum__row--total .nether-csum__num {
    font-size: var(--font-size-md);
  }

  /* The pinned total, inside the sticky checkout wrapper. Hairline above it so
     it separates from the items scrolling behind, and no top margin because the
     wrapper's own padding already supplies the room. */
  .nether-csum__row--pinned {
    margin-block-start: 0;
    margin-block-end: var(--margin-2xs);
    padding-block: var(--padding-xs) var(--padding-sm);
    border-block-start: 1px solid var(--hairline);
  }

  /* The scrolling half sits directly in .cart-drawer__content, which has no
     padding of its own — match the line items' gutter so the discount box and
     totals line up with the products above them. */
  .nether-csum--scroll {
    /* Single-value gutter. Horizon's --cart-drawer-padding is a two-value
       shorthand ("1.25rem 1.25rem"), which is fine for padding-inline but makes
       calc(var(...) * -1) invalid — the full-bleed band's negative margin
       silently dropped to 0 until this was split out. */
    --nether-csum-gutter: 1.25rem;

    padding-inline: var(--nether-csum-gutter);

    /* NO CLEARANCE FOR THE PINNED CHECKOUT. DO NOT PUT IT BACK.

       .cart-drawer__summary is position:sticky, and a sticky box stays in normal
       flow: it occupies its own height as the LAST child of
       .cart-drawer__content. Verified against the rendered section the dev
       server returns for ?sections=cart-drawer-section: nothing follows it. At
       maximum scroll it therefore rests at its flow position with nothing behind
       it, so every block above it is already fully visible. A sticky footer only
       overlays content on the way down, which is the whole point of one.

       What used to sit here was 200px plus the home indicator, roughly 234px on
       an iPhone, and below 750px that is dead space at the end of the drawer's
       only scroller: .cart-drawer__items is overflow:visible there, so
       .cart-drawer__content is the scroll container and this padding scrolled
       the bag past the order summary into white. It was stale as well as
       unnecessary. The comment that raised it from 104px sized it for a footer
       carrying a Need help? row, and that row had already been deleted on
       2026-08-02 along with the wallet stack.

       It cost the desktop list too. At min-width 750 .cart-drawer__items keeps
       overflow-y:auto, so its automatic minimum size is 0 and it is the only
       flex item here that can shrink: on a long bag the padding came out of the
       product list instead of extending the scroll.

       Breathing room before the pinned block is already covered twice, by
       .nether-csum__summary's padding-block-end and by the sticky wrapper's own
       top padding. That is enough. */
  }

  /* Checkout — the only pinned element. Its wrapper (.cart-drawer__summary) is
     already sticky bottom:0 with margin-top:auto in stock Horizon, so this needs
     no positioning of its own; adding sticky here previously did nothing useful
     because the parent was doing the pinning either way.
     The button keeps form="cart-form", which associates by ID from anywhere in
     the document, so living outside the form's subtree is fine. */
  .nether-csum__checkout {
    width: 100%;
    padding-block: 0;
    /* Safe-area clearance is handled once, on the wrapper, in
       nether-cart-styles.liquid — doubling it here pushed the pill too high. */
  }



  .nether-csum__btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    /* Same field height as the discount row above it, so the CTA is the same
       object at full width rather than a differently-sized one. */
    min-height: var(--nether-csum-field-h, 56px);
    padding-inline: var(--padding-xl);
    border: none;
    border-radius: var(--style-border-radius-buttons-primary, 100px);
    background-color: var(--color-foreground);
    color: var(--color-background);
    /* Softer, less "shouty" CTA (user, vs Gymshark): uppercase but a smaller cap
       height + tracking reads refined, not aggressive. */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold, 500);
    text-transform: uppercase;
    letter-spacing: var(--tracking-micro-caps);
    cursor: pointer;
    transition: opacity var(--motion-quick) var(--ease-ui);
  }

  .nether-csum__btn:hover {
    opacity: 0.88;
  }

  .nether-csum__btn[disabled] {
    opacity: 0.4;
    pointer-events: none;
  }

  .nether-csum__btn-lock {
    flex-shrink: 0;
  }

  .nether-csum__pay {
    list-style: none;
    margin: var(--margin-md) 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
  }

  .nether-csum__pay-icon {
    height: auto;
    border-radius: 4px;
  }

  /* Beat Horizon's #header-component ... svg { width: 24px } (ID specificity) */
  #header-component .nether-csum__pay-icon {
    width: 40px;
    height: auto;
  }

  /* Express wallets sit directly under the pill, above the badge row, so the
     row of icons stays what it is: a statement of what the store takes. */
  /* The .nether-csum__wallets and .nether-csum__help* rules were deleted here
     2026-08-02 along with the markup they styled — the wallet stack and the
     "Need help?" disclosure. See the comments at the two removal sites above for
     why, and for the two traps to re-read before restoring the wallets. */

  /* ---- Undo, after the last line takes the sheet with it ---- */
  /* Emptying the bag closes the drawer before the removal runs (nether-cart.js),
     so the in-drawer toast — position:absolute inside the dialog — would have
     nothing left to sit in, which is why that removal had no Undo at all. Same
     card, parked on the page instead. Everything else is inherited from
     .nether-cart-toast in nether-cart-styles.liquid; only the anchor changes.

     Doubled class, not a single one: the base rule lives in a different file and
     both would otherwise score (0,1,0), leaving the winner down to whichever
     stylesheet block happens to land later in the bundle. */
  .nether-cart-toast.nether-cart-toast--floating {
    position: fixed;
    inset-inline: var(--padding-lg);
    /* --nether-toast-offset is measured per-toast in nether-cart.js: it is the
       height of whatever is already pinned to the bottom of the viewport (on a
       PDP, the sticky add-to-cart bar), so the card clears it rather than
       covering it — the rule the in-drawer toast follows for Checkout. */
    bottom: calc(var(--nether-toast-offset, 24px) + env(safe-area-inset-bottom, 0px));
    /* Over the sticky add-to-cart bar (7) and the PDP scroll nav (30), under the
       size-guide and made-with sheets (10000), which are full-screen overlays
       and should never have a toast floating on top of them. */
    z-index: 40;
  }

  @media screen and (min-width: 750px) {
    /* The drawer slides in from the inline-end on desktop, so the undo stays on
       the side the bag was on rather than jumping to the middle of the page. */
    .nether-cart-toast.nether-cart-toast--floating {
      inset-inline: auto var(--padding-xl);
      width: min(420px, calc(100vw - var(--padding-xl) * 2));
    }
  }
/* END_SNIPPET:nether-cart-summary */

/* START_SNIPPET:nether-cart-upsell (INDEX:237) */
.nether-upsell {
    display: block;
    padding-inline: var(--cart-drawer-padding);
    padding-block: var(--padding-md);
    border-block-start: var(--style-border-width, 1px) solid rgb(var(--color-foreground-rgb) / 0.12);

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .nether-upsell[hidden] {
    display: none;
  }

  .nether-upsell__heading {
    margin: 0 0 var(--margin-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-foreground);
  }

  .nether-upsell__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .nether-upsell__card {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap-sm);
  }

  .nether-upsell__media {
    display: block;
    width: 3rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs, 4px);
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .nether-upsell__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .nether-upsell__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .nether-upsell__title {
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nether-upsell__price {
    font-size: var(--font-size-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
  }

  .nether-upsell__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    border: var(--style-border-width, 1px) solid rgb(var(--color-foreground-rgb) / 0.12);
    background-color: transparent;
    color: var(--color-foreground);
    font-size: var(--font-size-md);
    line-height: var(--leading-none);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--motion-quick) var(--ease-ui), color var(--motion-quick) var(--ease-ui);
  }

  .nether-upsell__add:hover,
  .nether-upsell__add:focus-visible {
    background-color: var(--color-foreground);
    color: var(--color-background);
  }

  .nether-upsell__add[data-busy='true'] {
    opacity: 0.5;
    pointer-events: none;
  }
/* END_SNIPPET:nether-cart-upsell */

/* START_SNIPPET:nether-gallery-pager (INDEX:241) */
/* The pill renders one dot per photo whenever the product has more than one
     media, but per-colour filtering then hides the dots that do not belong to the
     selected colourway (nether-gallery-progress.js toggles [hidden] on them). A
     colourway with a single photo was left holding one lone dash: a pager that
     says "1 of 1". Hide the whole pill instead.

     CSS rather than JS on purpose. The dot set changes at runtime with NO page
     load - the filter re-runs on the colourway tap and on variant:selected, and
     Horizon morphs the section on variant change, which replaces these nodes
     outright. A :has() rule re-evaluates on every one of those; a one-shot JS
     pass would have to be re-armed from each.

     The test is "a visible dot FOLLOWED BY a visible dot", not a count, so it
     fails for exactly-one whichever dot survives - first, middle or last.
     Specificity is (0,5,0) against the (0,1,0) base rule, so it wins regardless
     of where the two stylesheets land in the bundle. */
  .media-gallery__progress:not(:has(.media-gallery__dot:not([hidden]) ~ .media-gallery__dot:not([hidden]))) {
    display: none;
  }
/* END_SNIPPET:nether-gallery-pager */

/* START_SNIPPET:nether-gallery-rail (INDEX:242) */
/* ===== The contained frame =====================================
     Desktop only. --nether-gallery-frame is the one place the height is
     decided, so the rail below can read the same number.

     100dvh, not 100vh: on a desktop browser they agree, and dvh is correct if
     this is ever viewed on a tablet in landscape where the URL bar collapses. */
  @media screen and (min-width: 750px) {
    .product-information__media {
      /* The rail is absolutely positioned against this box. It was static. */
      position: relative;
      --nether-gallery-frame: 100dvh;
    }

    media-gallery.media-gallery--grid {
      block-size: var(--nether-gallery-frame);
      overflow-y: auto;
      overscroll-behavior: contain;
      /* Sticky at the top so the frame holds its place while the buy column
         scrolls the page. top:0 was already on this element; it just never had
         a height short enough to stick. */
      position: sticky;
      inset-block-start: 0;
      /* The rail IS the scrollbar. A native one beside it would be two answers
         to the same question, and on Windows it is a 17px light-grey slab
         against photography that bleeds to the edge. */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    media-gallery.media-gallery--grid::-webkit-scrollbar {
      display: none;
    }
  }

  /* ===== The rail ================================================
     Hidden until JS measures a real overflow, so a colourway with few enough
     photos to fit the frame never shows a full-length thumb that cannot move.
     [hidden] is set in the markup and removed by JS, which also means no-JS
     gets a plain scrolling frame rather than a dead control. */
  .nether-rail {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .nether-rail:not([hidden]) {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* Tight. The three parts are ONE control, and the previous 220px track
         with space-sm around it pushed the chevrons ~110px off centre, so they
         read as three unrelated marks floating on a photograph rather than as a
         scrollbar. */
      gap: 4px;
      position: absolute;
      inset-block-start: 50%;
      transform: translateY(-50%);
      inset-inline-start: var(--space-md);
      z-index: 2;

      /* A SURFACE, not bare marks (owner 2026-08-20: "looks a little lame",
         and earlier "we can do a square background instead of just flat
         transparent").

         The real defect this fixes: every colour in here was ink
         (--color-foreground at 0.18 and 0.75), which is near-black. On a
         near-black product photograph that is invisible, and the gallery is
         nothing but photography. A translucent dark chip with light marks on it
         is legible over ANY frame, bright or dark, without needing to sample
         what is behind it.

         Blur rather than a solid fill is the iOS register and keeps the
         photograph readable through it. */
      padding: 6px 5px;
      border-radius: var(--radius-pill);
      background: rgb(0 0 0 / 0.32);
      backdrop-filter: blur(14px) saturate(120%);
      -webkit-backdrop-filter: blur(14px) saturate(120%);
      border: 1px solid rgb(255 255 255 / 0.14);

      /* Only the controls take pointer; the frame scrolls under the chip. */
      pointer-events: none;
      opacity: 0.85;
      transition: opacity var(--motion-quick) var(--ease-ui);
    }

    /* Comes fully forward when the reader is actually in the gallery.
       Hung off .product-information__media, which is the box the rail is
       positioned against and the only ancestor both it and the frame share.
       There is no .nether-gallery-frame class: the frame is
       media-gallery.media-gallery--grid, and --nether-gallery-frame is a
       variable on the parent, not a class. */
    .product-information__media:hover .nether-rail:not([hidden]) {
      opacity: 1;
    }

    .nether-rail > * {
      pointer-events: auto;
    }
  }

  /* Chevrons. WHITE, because they now sit on the chip's own dark surface
     rather than on whatever the photograph happens to be. The 44px tap minimum
     is met by the hit area below, not by the button box: 44px boxes inside a
     chip would make the control ~120px tall and it would read as a toolbar. */
  .nether-rail__step {
    flex: 0 0 auto;
    inline-size: 26px;
    block-size: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    opacity: 0.75;
    position: relative;
    transition:
      opacity var(--motion-quick) var(--ease-ui),
      background-color var(--motion-quick) var(--ease-ui);
  }

  /* Invisible 44px target centred on a 26px glyph, so the control stays compact
     without dropping under the tap minimum. */
  .nether-rail__step::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: var(--minimum-touch-target, 44px);
    block-size: var(--minimum-touch-target, 44px);
    transform: translate(-50%, -50%);
  }

  .nether-rail__step svg {
    inline-size: 15px;
    block-size: 15px;
  }

  @media (hover: hover) and (pointer: fine) {
    .nether-rail__step:hover {
      opacity: 1;
      /* Material 3 state layer rather than a colour change. */
      background: rgb(255 255 255 / 0.16);
    }
  }

  /* At either end the step is inert. Kept in the layout rather than hidden so
     the control does not change height as you reach the ends. */
  .nether-rail__step[disabled] {
    opacity: 0.25;
    cursor: default;
    background: transparent;
  }

  .nether-rail__track {
    position: relative;
    inline-size: 3px;
    /* Short. The old min(220px, 26vh) made a 220px hairline whose thumb covered
       30% of it, which is why the chevrons ended up stranded at either end. At
       92px the whole control is ~150px tall and reads as one object. */
    block-size: 92px;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.28);
    overflow: hidden;
    margin-block: 2px;
  }

  .nether-rail__thumb {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 30%;
    border-radius: var(--radius-pill);
    background: #ffffff;
    /* transform, not inset-block-start, so the thumb rides the compositor
       during a wheel scroll instead of laying out on every frame. */
    will-change: transform;
  }

  /* The thumb follows a scroll the reader is already driving, so it must track
     instantly. Only the CHEVRON jumps are animated (JS uses smooth behaviour
     for those), and that is gated by the media query below. */
  @media (prefers-reduced-motion: reduce) {
    .nether-rail__step {
      transition: none;
    }
  }
/* END_SNIPPET:nether-gallery-rail */

/* START_SNIPPET:nether-motion (INDEX:246) */
/* Hidden state only exists once JS has armed the element, so no-JS and
     reduced-motion users always see content. */

  /* Lane B base (feel WO-13.4): the editorial reveal for the two dark PDP
     beats. 140px of travel (the Gymshark distance — the 07-26 objection was
     to a 24px mid-distance twitch, which neither reference ships) over 900ms
     on one ease-out curve, transform and opacity on ONE track so the fade
     cannot finish before the movement does. The second element of a pair
     (--nreveal-i: 1) waits 450ms; anything past the pair shares that delay.
     No duration literals: everything derives from --motion-base, so the
     whole thing carries --motion-scale and reduced motion collapses it by
     construction (belt to the script's own early-return braces). */
  html:not(.nether-reveal-off) [data-nreveal].is-armed {
    opacity: 0;
    transform: translateY(140px);
    transition:
      opacity calc(3 * var(--motion-base)) var(--ease-enter),
      transform calc(3 * var(--motion-base)) var(--ease-enter);
    transition-delay: calc(min(var(--nreveal-i, 0), 1) * 1.5 * var(--motion-base));
    will-change: opacity, transform;
  }

  html:not(.nether-reveal-off) [data-nreveal].is-revealed {
    opacity: 1;
    transform: none;
  }
/* END_SNIPPET:nether-motion */

/* START_SNIPPET:nether-pdp (INDEX:248) */
/* PAGE BOTTOM CLEARANCE FOR THE STICKY BAR (owner 2026-08-22: the last review
     was cut off underneath it).

     The bar is position: fixed, so it is out of flow and the page has no idea
     it is there. Anything at the very bottom of the document sits under it.

     The value is the bar's OWN declared height, taken from the full-bleed rule
     that governs it (min-height: calc(56px + safe-area)), plus one space step so
     the last element clears rather than just touches. Measuring the bar at
     runtime is not an option: it is inert and 0px tall until scroll activates
     it, so a measured value would be zero on load.

     Scoped to the widths where the bar exists at all. Above 750px it is
     display: none and this padding would be dead space. */
  @media screen and (max-width: 749px) {
    body:has(.sticky-add-to-cart) .page-wrapper {
      padding-block-end: calc(56px + env(safe-area-inset-bottom, 0px) + var(--space-lg, 20px));
    }
  }
/* END_SNIPPET:nether-pdp */

/* START_SNIPPET:nether-photo-credit (INDEX:249) */
/* The parent media wrapper supplies position: relative. Every Nether media
     wrapper already sets it, so this does not force it on an ancestor it does
     not own. */
  .nether-credit {
    position: absolute;
    inset-block-end: var(--space-md);
    inset-inline-end: var(--space-md);
    /* 3, not 2. The chip is a SIBLING of the band's content layer, and in
       sections/nether-story.liquid `.nether-story__content` is also z-index 2,
       is positioned, spans the full band and comes LATER in the DOM. At an
       equal z-index the later element wins, so the content layer painted over
       the chip and — carrying no pointer-events: none — swallowed the tap. */
    z-index: 3;
    display: flex;
    justify-content: flex-end;
  }

  /* ===== THE PILL ======================================================
     A grid of two columns: the text, which is collapsed to 0fr at rest, and
     the circle, which is always its own fixed size. Because the whole control
     is anchored to the right, growing the first column pushes the pill LEFTWARD
     out of the circle, which is the gesture the owner asked for.

     WHITE fill, dark glyph. Measured off the reference: 32x32, white on the
     photograph, radius 40px, and NO backdrop filter. The chip and the text it
     reveals are one material because they are now literally one element. */
  .nether-credit__pill {
    position: relative;
    display: grid;
    /* ONE animated column. The icon used to be a second `auto` column, and
       measured mid-transition it drifted 7px left and sprang back: while the
       first column eases from 0fr, its nowrap content is wider than the share
       the fr unit has reached, so the grid briefly squeezes the auto column to
       make room. The camera visibly wobbled (owner 2026-08-22: "anchor the
       camera icon itself so it stays the same").

       The icon is now absolutely positioned, so it is outside the grid's
       sizing entirely and CANNOT be pushed. The padding below reserves its
       footprint, which is also what keeps the pill a true 32px circle at rest:
       zero-width column + 32px padding = 32px. */
    grid-template-columns: 0fr;
    align-items: center;
    padding: 0;
    padding-inline-end: 32px;
    /* EXPLICIT HEIGHT, and it is not optional. The icon is absolutely
       positioned, so it is out of flow and contributes NO height — the moment
       it stopped being a grid item the pill collapsed to the text's
       line-height and rendered as a thin empty capsule with no camera in it.
       32px is the circle's diameter, so this is the same number the icon and
       the end padding already use. */
    block-size: 32px;
    border: 0;
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: #111111;
    /* No blur. The reference has none, and against a white fill it buys
       nothing: there is no translucency for it to work through. */
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
    cursor: pointer;
    text-align: start;
    /* --motion-panel, the full-size-travel role. This is a panel opening, not a
       state changing, and at --motion-base it snapped rather than slid (owner
       2026-08-22: "needs a better animation"). --ease-enter decelerates into
       the open position, so the pill arrives rather than stopping. */
    transition:
      grid-template-columns var(--motion-panel) var(--ease-enter),
      box-shadow var(--motion-quick) var(--ease-ui),
      background var(--motion-quick) var(--ease-ui);
  }

  /* OPEN, by hover, by keyboard focus, or by tap on a touch device. All three
     resolve to the same declaration, so there is one open state rather than
     three that can drift apart. */
  @media (hover: hover) and (pointer: fine) {
    .nether-credit__pill:hover {
      grid-template-columns: 1fr;
      box-shadow: 0 3px 14px rgb(0 0 0 / 0.26);
    }
  }

  .nether-credit__pill:focus-visible,
  .nether-credit[data-open] .nether-credit__pill {
    grid-template-columns: 1fr;
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.26);
  }

  /* min-inline-size: 0 is load-bearing. A grid item's default min-width is
     auto, which refuses to shrink below its content — the column would never
     reach 0fr and the pill would sit permanently open. */
  .nether-credit__reveal {
    display: flex;
    align-items: center;
    min-inline-size: 0;
    overflow: hidden;
  }

  .nether-credit__text {
    display: block;
    /* The inline padding lives on the TEXT, not the pill: at rest the column is
       zero-width and any padding on the container would still be painted, so
       the "circle" would render as a short capsule with two dead ends. */
    padding-inline: var(--space-md) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-none);
    white-space: nowrap;
    color: #111111;

    /* THE SLIDE (owner 2026-08-22: "make that animation a little nicer... it
       should slide out nicely").

       Widening the column alone is a WIPE: the text sits still and a window
       opens over it, so the first letter is revealed mid-word and nothing
       appears to travel. Moving the text as the column opens turns it into a
       slide — the name comes out from behind the camera rather than being
       uncovered in place.

       The offset is small and to the RIGHT because the pill grows leftward:
       the text starts tucked under the circle and settles as the edge passes
       it. Fading over the shorter --motion-quick so it is legible before it
       has finished moving, which is what stops a slide reading as sluggish. */
    transform: translateX(var(--space-sm));
    opacity: 0;
    /* CLOSING. No delay and quick: the name leaves first so it is gone before
       the pill has finished narrowing, which is what stops the text being
       visibly guillotined by the closing edge. --ease-exit accelerates away,
       which is the direction the token encodes. */
    transition:
      transform var(--motion-exit) var(--ease-exit),
      opacity var(--motion-instant) var(--ease-ui);
  }

  /* OPENING. Delayed by half of --motion-quick so the pill is already moving
     before the name appears — the two used to start together, which read as
     one flat wipe. Staggering them is what makes it a drawer sliding open with
     something inside it rather than a box changing width.

     Delay is expressed off a token, not a literal, so it still lands in step
     if the motion scale changes. */
  @media (hover: hover) and (pointer: fine) {
    .nether-credit__pill:hover .nether-credit__text {
      transform: translateX(0);
      opacity: 1;
      transition:
        transform var(--motion-panel) var(--ease-enter) calc(var(--motion-quick) / 2),
        opacity var(--motion-quick) var(--ease-ui) calc(var(--motion-quick) / 2);
    }
  }

  .nether-credit__pill:focus-visible .nether-credit__text,
  .nether-credit[data-open] .nether-credit__text {
    transform: translateX(0);
    opacity: 1;
    transition:
      transform var(--motion-panel) var(--ease-enter) calc(var(--motion-quick) / 2),
      opacity var(--motion-quick) var(--ease-ui) calc(var(--motion-quick) / 2);
  }

  /* The place, after the name. A thin divider rather than a comma, so the two
     read as separate facts: who took it, where it was. */
  .nether-credit__location::before {
    content: '';
    display: inline-block;
    inline-size: 1px;
    block-size: 0.85em;
    margin-inline: 0.5em;
    vertical-align: -0.1em;
    background: currentcolor;
    opacity: 0.35;
  }

  .nether-credit__location {
    font-weight: var(--font-weight-regular, 400);
    opacity: 0.7;
  }

  /* The circle. Fixed square at both states, which is what keeps the camera
     centred while the pill grows: the icon column never changes size. */
  /* Pinned to the pill's right edge, which never moves, so the camera is fixed
     in space while the name folds out from behind it. */
  .nether-credit__icon {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    place-items: center;
  }

  /* 32px visual on a 44px target: --minimum-touch-target is the TAP minimum,
     not a size instruction, and using it as the visual box is what made an
     earlier version read oversized. */
  .nether-credit__icon::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: var(--minimum-touch-target, 44px);
    block-size: var(--minimum-touch-target, 44px);
    transform: translate(-50%, -50%);
  }

  .nether-credit__icon svg {
    inline-size: 17px;
    block-size: 17px;
    display: block;
  }

  /* Press. Settles to 1 rather than growing, matching every other control in
     snippets/nether-hover.liquid. */
  .nether-credit__pill:active {
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.22);
  }

  /* Dark mode. The pill follows the SITE theme, not the section's colour
     scheme: it only ever floats over photography, which on this site means dark
     bands, so keying it to the band made it dark in light mode. */
  html[data-theme='dark'] .nether-credit__pill {
    background: #1b1b1e;
    color: #f5f5f5;
  }

  html[data-theme='dark'] .nether-credit__text {
    color: #f5f5f5;
  }

  @media (hover: hover) and (pointer: fine) {
    html[data-theme='dark'] .nether-credit__pill:hover {
      background: var(--nether-dark-surface-2);
      box-shadow: 0 3px 14px rgb(0 0 0 / 0.45);
    }
  }

  /* Reduced motion: the width still changes, it just does not travel. The
     information is the point; the slide is decoration. */
  @media (prefers-reduced-motion: reduce) {
    .nether-credit__pill {
      transition-duration: 0.01ms;
    }
  }
/* END_SNIPPET:nether-photo-credit */

/* START_SNIPPET:nether-tencel-anim (INDEX:256) */
.nta {
    /* Stage + ink as variables so the vignettes theme-adapt. Default = the
       dark stage (dark theme keeps it). The light-theme override below swaps
       to a pale green-tinted stage with TENCEL-green ink (user 07-25: black
       tiles read wrong in light mode). */
    --nta-stage: #141414;
    --nta-glow: rgb(255 255 255 / 0.07);
    --nta-ink: rgb(255 255 255 / 0.9);
    --nta-ink-strong: rgb(255 255 255 / 0.85);
    --nta-ink-mid: rgb(255 255 255 / 0.6);
    --nta-ink-soft: rgb(255 255 255 / 0.3);

    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    background:
      radial-gradient(120% 100% at 50% 115%, var(--nta-glow) 0%, transparent 55%),
      var(--nta-stage);
    color: var(--nta-ink);
    overflow: hidden;
  }

  /* MONOCHROME (owner 2026-08-23: "can you make these glyphs black and white
     instead of green").

     This block used to set a pale green stage with TENCEL-green ink. The green
     was borrowed from the TENCEL brand rather than from this theme, and it was
     the only non-monotone colour on a page that is otherwise ink on bone. The
     stage is now --fill-subtle, the theme ONE tinted fill, and the ink ramp is
     the same neutral at the same four opacities, so the drawings keep their
     depth and lose the hue. */
  html[data-theme='light'] .nta {
    --nta-stage: var(--fill-subtle, #f5f5f5);
    --nta-glow: rgb(17 17 17 / 0.06);
    --nta-ink: rgb(17 17 17 / 0.92);
    --nta-ink-strong: rgb(17 17 17 / 0.82);
    --nta-ink-mid: rgb(17 17 17 / 0.55);
    --nta-ink-soft: rgb(17 17 17 / 0.28);
  }

  .nta svg {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }

  .nta-line {
    stroke: var(--nta-ink-soft);
  }

  /* ---- Fresh: a droplet beads up, rolls down the curve, sheds off ---- */
  .nta-drop {
    transform: translate(38px, 55px);
    transform-box: view-box;
  }

  .nta-ping {
    stroke: var(--nta-ink-mid);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    .nta-drop {
      animation: nta-drop-roll 3s var(--ease-ui) infinite;
    }

    .nta-ping {
      animation: nta-ping 3s ease-out infinite;
    }
  }

  @keyframes nta-drop-roll {
    0% {
      transform: translate(34px, 48px) scale(0.5);
      opacity: 0;
    }
    18% {
      transform: translate(40px, 60px) scale(1);
      opacity: 1;
    }
    45% {
      transform: translate(76px, 66px) scale(1);
      opacity: 1;
    }
    72% {
      transform: translate(118px, 72px) scale(0.95);
      opacity: 1;
    }
    88%,
    100% {
      transform: translate(148px, 92px) scale(0.7);
      opacity: 0;
    }
  }

  @keyframes nta-ping {
    0%,
    68% {
      opacity: 0;
      transform: scale(0.4);
    }
    78% {
      opacity: 0.7;
    }
    94%,
    100% {
      opacity: 0;
      transform: scale(1.8);
    }
  }

  /* ---- Dry: vapor squiggles rise off the fabric line and fade ---- */
  .nta-vapor {
    stroke: var(--nta-ink-strong);
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .nta-vapor {
      animation: nta-vapor-rise 2.6s ease-in-out infinite;
    }

    .nta-vapor--2 {
      animation-delay: 0.55s;
    }

    .nta-vapor--3 {
      animation-delay: 1.1s;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nta-vapor {
      opacity: 0.7;
    }
  }

  @keyframes nta-vapor-rise {
    0% {
      transform: translateY(12px);
      opacity: 0;
    }
    35% {
      opacity: 0.85;
    }
    100% {
      transform: translateY(-14px);
      opacity: 0;
    }
  }

  /* ---- Soft: fabric folds breathe, one after another ---- */
  .nta-fold {
    stroke: var(--nta-ink-strong);
  }

  @media (prefers-reduced-motion: no-preference) {
    .nta-fold {
      animation: nta-fold-breathe 3.2s ease-in-out infinite;
    }

    .nta-fold--2 {
      animation-delay: 0.3s;
    }

    .nta-fold--3 {
      animation-delay: 0.6s;
    }

    .nta-fold--4 {
      animation-delay: 0.9s;
    }
  }

  @keyframes nta-fold-breathe {
    0%,
    100% {
      transform: translateY(0);
      opacity: 0.55;
    }
    50% {
      transform: translateY(-4px);
      opacity: 0.95;
    }
  }

  /* ---- Loop: the closed loop turns slowly around a leaf ---- */
  .nta-ring path {
    stroke: var(--nta-ink-strong);
  }

  .nta-ring {
    transform-box: view-box;
    transform-origin: 80px 50px;
  }

  .nta-leaf {
    /* currentColor, not a green literal: the leaf now follows --nta-ink like
       every other stroke, so it is correct in both themes with no second rule. */
    stroke: currentColor;
    transform-box: fill-box;
    transform-origin: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    .nta-ring {
      animation: nta-ring-turn 9s linear infinite;
    }

    .nta-leaf {
      animation: nta-leaf-pulse 3s ease-in-out infinite;
    }
  }

  @keyframes nta-ring-turn {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes nta-leaf-pulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.08);
    }
  }

  /* ONE PASS ON ARRIVAL, THEN STILL (feel WO-13 item 7).

     These six moves used to loop forever on four easings that are not
     harmonics (3s, 3s, 2.6s, 3.2s, 9s, 3s), so the composite never repeated and
     the band was permanently, restlessly in motion in the corner of a page
     nobody was looking at. Neither Nike nor Santa Cruz runs perpetual decorative
     motion; Santa Cruz's own keyframe file is eight rules and every one is a
     vendor spinner, because its real motion is scroll-linked progress.

     Rather than rewrite six keyframe blocks, the timing is overridden here in
     one place. Where scroll-driven animation exists the six run against the
     band's arrival, so the whole vignette assembles as you reach it and then
     holds. Where it does not, they simply play once.

     animation-fill-mode is FORWARDS, deliberately not `both`. With `both` the
     elements would hold frame 0 before the timeline starts, and .nta-ping and
     .nta-vapor open at opacity 0, so anything that never entered view would be
     permanently invisible. That trap has bitten this codebase before. `forwards`
     leaves them on their own CSS until the animation actually runs. */
  @media (prefers-reduced-motion: no-preference) {
    .nta-drop,
    .nta-ping,
    .nta-vapor,
    .nta-fold,
    .nta-ring,
    .nta-leaf {
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }

    @supports (animation-timeline: view()) {
      /* ONE timeline for the whole band, not one per moving part.

         The anonymous `view()` this used to carry mints a timeline PER ELEMENT,
         and a four-tile band is 2 + 3 + 4 + 2 = 11 moving parts, so the PDP was
         running eleven scroll timelines against WO-13's cap of three per page.
         Naming the timeline once on the band container and pointing all six
         moves at it takes that to one, and it is also the better behaviour: the
         vignettes now assemble together as the band arrives instead of each
         SVG fragment tracking its own two-inch box.

         These two containers are the only places nether-tencel-anim renders:
         .nether-trows__rows in sections/nether-tencel-rows.liquid (fabric,
         sustainability) and .nether-mwb__rows in blocks/nether-made-with.liquid
         (the PDP made-with band). A named timeline is visible to the declaring
         element's descendants, and every .nta sits inside one of these. If the
         snippet is ever rendered somewhere with neither ancestor the name will
         not resolve and the moves simply will not run, which lands on the same
         static frame reduced-motion users already get. */
      /* The timeline is declared on each ROW, not on the band that holds them.

         On the band it was one timeline for every vignette on the page, driven
         by the band's own entry. animation-range ends at cover 35%, so the
         moment the band was a third of the way in the timeline read 100% and
         EVERY vignette jumped to its final frame, including the ones still
         below the fold. nta-drop and nta-ping both finish at opacity 0, so the
         lower tiles simply appeared blank and never played.

         Per row, each vignette is driven by its own arrival, which is what the
         effect was for. The cost is one timeline per row rather than one per
         page, still far under the six-per-band it replaced. */
      .nether-trows__row,
      .nether-mwb__row {
        view-timeline-name: --nether-tencel-band;
      }

      .nta-drop,
      .nta-ping,
      .nta-vapor,
      .nta-fold,
      .nta-ring,
      .nta-leaf {
        animation-timeline: --nether-tencel-band;
        /* entry 35% -> entry 100%, not the shared entry-0%/cover-35% token
           (owner 2026-09-02: "by the time I could even see the thing the eye
           drop is almost at the bottom of the arc").

           The timeline is declared on the ROW, which on a phone is the picture
           PLUS heading PLUS body copy -- roughly 900px. entry 0% starts
           counting while the row is still entirely below the fold, and cover
           35% of a 900px row in an 812px viewport lands after about 600px of
           scroll, which is roughly the moment the vignette finally centres. So
           the move was finishing exactly as it became worth watching.

           Anchoring both ends inside `entry` ties the animation to the row
           arriving rather than to its whole pass: it starts once the tile is
           genuinely on screen and lands as the row settles. */
        animation-range: entry 35% entry 100%;
      }
    }
  }
/* END_SNIPPET:nether-tencel-anim */

/* START_SNIPPET:overlay (INDEX:260) */
.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:261) */
.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;
    isolation: isolate;
  }

  .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:262) */
.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:payment-terms-styles (INDEX:263) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */

/* START_SNIPPET:pills-styles (INDEX:264) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

    @media screen and (max-width: 749px) {
      padding: var(--padding-xs) var(--padding-md);
    }
  }

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:268) */
/* 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__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .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 var(--motion-quick) var(--ease-ui);
      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(var(--hover-zoom));
      /* Wide and low rather than tight and dark (2026-08-20). A 5px blur sitting
         2px under the element is contact shadow, which is the Material-1 look;
         spreading the same ink over 16px reads as depth instead of as a border
         that fell off. Same alpha, so nothing gets heavier. */
      box-shadow: 0 6px 16px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .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 var(--motion-instant) var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--motion-exit) var(--ease-ui), transform var(--motion-exit) var(--ease-ui);
  }

  .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 var(--motion-instant) 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 var(--ease-ui), opacity var(--motion-exit) var(--ease-ui);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s var(--ease-ui), opacity var(--motion-exit) var(--ease-ui),
      transform var(--motion-exit) var(--ease-ui);
    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 var(--motion-exit) var(--ease-ui);
  }

  .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:269) */
/* 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 {
    color: var(--color-foreground-muted);
    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:price-styles (INDEX:270) */
.price,
  .compare-at-price,
  .unit-price {
    white-space: nowrap;
  }

  .unit-price {
    display: block;
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note.tax-note.tax-note {
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note:empty {
    display: none;
  }

  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
    margin-block: 0;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .compare-at-price {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
  }

  .price-item__group {
    display: inline-block;
  }
/* END_SNIPPET:price-styles */

/* START_SNIPPET:product-badges-styles (INDEX:272) */
.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-gallery-zoom-details-styles (INDEX:273) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  .product-grid-view-zoom-out--details .h4,
  .product-grid-view-zoom-out--details span,
  .product-grid-view-zoom-out--details s {
    font-size: var(--font-size--xs);
    font-family: var(--font-paragraph--family);
  }

  .product-grid-view-zoom-out--details span {
    font-weight: 500;
  }

  .product-grid-view-zoom-out--details .h4 {
    line-height: 1.3;
    font-weight: 400;
  }

  .product-grid-view-zoom-out--details > span.h6,
  .product-grid-view-zoom-out--details > div.h6 > product-price {
    display: inline-block;
    line-height: 0;
    margin-top: var(--margin-2xs);
  }

  .product-grid-view-zoom-out--details > span.h6 > *,
  .product-grid-view-zoom-out--details > div.h6 > * > * {
    line-height: 1.2;
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:274) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .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;
    }
  }

  /* ==========================================================================
     CARD TYPE (2026-09-12). Measured on the collection grid at 390px before
     this: the product NAME rendered at 13px/400 and the PRICE at 12px/500 -
     both smaller than the page body copy, on the one page whose entire job is
     letting someone scan names and prices. The grid read as a footnote to the
     photographs rather than as the thing you shop.

     The title takes the heading family, because a product name is the card's
     heading; before this it was the body face at body weight, which is why
     the cards had no voice of their own. 16px/700 with tight tracking matches
     the step below the PDP title, so a name looks like the same kind of thing
     in both places.

     Specificity: the title is <h3 class="h4">, so Horizon's .h4 preset (0,1,0)
     owns it. Scoping to .product-card makes this (0,2,0) and it wins without
     !important.

     tabular-nums on the price for the same reason as the PDP: proportional
     figures change width per digit, so a grid of prices sits on ragged edges.
     ========================================================================== */
  /* THE VISIBLE TITLE IS THE <p>, not the <h3>. Measured on the grid: the card
     renders the product name three times — an <h3 class="h4"> inside
     product-grid-view-zoom-out--details (height 0, the zoom-out variant), an
     <a class="contents"> (display: contents, so no box), and an unclassed <p>
     inside a theme-editor .text-block, which is the one a shopper sees.

     The first version of this rule styled only .h4 and reported success: the
     h3 dutifully became 16px/700 and nothing on screen changed, because it has
     no box. Same trap as the PDP title — the editor's text-block owns the
     visible type, so no token or preset can reach it. Both are listed, so the
     zoom-out variant matches the grid if it is ever shown. */
  .product-card .h4,
  .product-card__content .text-block p,
  .product-card__title {
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
  }

  .product-card .price,
  .product-card [class*="price"] {
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-normal);
    font-variant-numeric: tabular-nums;
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-grid (INDEX:276) */
/* Product grid */
  .product-grid-container {
    display: block;
    width: 100%;
    padding-block: var(--padding-block-start) var(--padding-block-end);

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

  [product-grid-view='default'] {
    --product-grid-gap: 16px;
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--product-grid-gap);
    margin: auto;
    padding: 0;
    list-style: none;
    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);

      grid-template-columns: var(--product-grid-columns-desktop);
    }
  }

  .product-grid :is(h3, p) {
    margin: 0;
  }

  .product-grid__item {
    border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
  }

  [product-grid-view='default'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid--organic[product-grid-view='default'] .product-grid__item {
    height: fit-content;
  }

  [product-grid-view='zoom-out'] .product-grid__card.product-grid__card {
    row-gap: var(--padding-xs);
  }

  [product-grid-view='mobile-single'],
  .product-grid-mobile--large {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  ul[product-grid-view='zoom-out'] .product-grid__card > * {
    display: none;
  }

  [product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(
      10,
      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    :root:active-view-transition-type(product-grid) {
      details[open] floating-panel-component {
        view-transition-name: panel-content;

        .checkbox *,
        .facets__pill-label {
          transition: none;
        }

        .facets--vertical & {
          view-transition-name: none;
        }
      }

      .product-grid {
        view-transition-name: product-grid;
      }

      footer {
        view-transition-name: footer;
      }

      .product-grid__item,
      floating-panel-component {
        transition: none;
      }
    }
  }

  ::view-transition-group(panel-content) {
    z-index: 1;
  }

  ::view-transition-new(product-grid) {
    animation-delay: 150ms;
    animation-name: fadeInUp;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  results-list[initialized] {
    .product-grid__item {
      transition: opacity var(--animation-speed) var(--animation-easing),
        transform var(--animation-speed) var(--animation-easing);

      @starting-style {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Product card title truncation - applied only to zoom-out view */
  [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .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:277) */
.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-container-styles (INDEX:278) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      /* dvh, not vh (2026-08-23). On a mobile browser 100vh is the LARGEST
         viewport, the one with the toolbar hidden, so this over-reported by
         roughly the height of that toolbar. --constrained-height is not only a
         max-height: product-media-gallery-content.liquid:279 also multiplies it
         by the aspect ratio to derive a WIDTH, so the error propagated into the
         horizontal axis too. dvh is the viewport actually on screen. */
      --constrained-height: max(var(--constrained-min-height), calc(100dvh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:279) */
/* Product Media */
  media-gallery {
    display: block;
    width: 100%;
  }

  :where(media-gallery, .product-grid__item) {
    .media-gallery__grid {
      grid-template-columns: 1fr;
      gap: var(--image-gap);
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--large-first-image .product-media-container:first-child,
    .media-gallery--two-column .product-media-container:only-child {
      /* First child spans 2 columns */
      grid-column: span 2;
    }
  }

  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;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #ffffff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .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;
  }

  /* ===================================================================
     IN-PLACE ZOOM (Nether 2026-09-08, behaviour in nether-gallery-zoom.js)

     Scoped by the ABSENCE of --zoomable, which is the stock flag for "the
     full-screen dialog is on". The two are wired to the same setting in
     product-media-gallery-content.liquid, so this selector is the in-place case
     by construction rather than by a second flag that could drift out of step.

     The container is already overflow:hidden and position:relative, so a scaled
     image clips to its own frame with nothing else to change — measured on the
     live PDP before writing this, not assumed.
     =================================================================== */
  media-gallery .product-media-container:not(.product-media-container--zoomable) .product-media__image {
    transition: transform 0.28s var(--ease-out-cubic, ease-out);
  }

  /* The tap affordance the gallery never had. Measured on the live PDP: the
     image resolved cursor:default while being bound to a zoom action, so on
     desktop nothing whatsoever said it could be clicked. */
  @media (hover: hover) and (pointer: fine) {
    media-gallery .product-media-container:not(.product-media-container--zoomable) {
      cursor: zoom-in;
    }

    media-gallery .product-media-container[data-nether-zoomed] {
      cursor: zoom-out;
    }
  }

  /* Above the pager pill and its neighbours while enlarged. */
  media-gallery .product-media-container[data-nether-zoomed] {
    z-index: 2;
  }

  @media (prefers-reduced-motion: reduce) {
    media-gallery .product-media-container .product-media__image {
      transition: none;
    }
  }

  /* Per-color filtering backstop: the theme gives slides/grid items explicit
     display values that BEAT the [hidden] UA rule, so hidden slides stayed in
     the scroll-snap track — swiping Black still traversed every other color's
     empty slot (user 07-25). Hidden means GONE from the track. */
  [data-media-color][hidden] {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }

  /* Nether: mobile gallery pager v3 — the Gymshark morph (video-decoded 07-24, "the look
     I've been trying to copy this whole time"). A translucent white pill floats over the
     bottom of the image; inactive photos are small dark dots, the active photo is a wide
     dash, and the dash WIDTH transfers to the neighbor progressively during the swipe
     (--dot is a 0..1 activation set per-frame by nether-gallery-progress.js — no
     transitions, the finger drives it). Literal white/black on purpose: this is glass
     over imagery, not a scheme surface, and must read the same in both themes.
     Desktop shows the grid, so it's hidden there. */
  @media screen and (max-width: 749px) {
    media-gallery {
      position: relative;
    }

    .media-gallery__progress {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 14px;
      z-index: 2;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }

    .media-gallery__pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 9px;
      border-radius: var(--style-border-radius-pills, 999px);
      background-color: rgb(255 255 255 / 0.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .media-gallery__dot {
      display: block;
      block-size: 5px;
      inline-size: calc(5px + var(--dot, 0) * 15px);
      border-radius: var(--style-border-radius-pills, 999px);
      background-color: rgb(17 17 17 / calc(0.32 + var(--dot, 0) * 0.68));
      /* No transition: the rAF loop updates every frame, and any smoothing on
         top read as lag on iPhone (user 07-25). The quadratic activation curve
         alone carries the tactile feel. */
    }

    /* The pill pager is the mobile position indicator now — hide the counter overlay. */
    media-gallery .slideshow-controls__counter {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery__progress {
      display: none;
    }
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:280) */
.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: #ffffff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* The base .close-button svg is --icon-size-xs (tiny). The touch target is fine,
     but the X glyph itself reads too small in the fullscreen zoom — bump the icon
     (user, mobile). */
  .dialog-zoomed-gallery__close-button svg {
    width: 26px;
    height: 26px;
  }

  /* 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-recommendations-styles (INDEX:282) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */

/* START_SNIPPET:quantity-selector-styles (INDEX:284) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    text-align: center;
    border: none;
    appearance: none;
    max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */

/* START_SNIPPET:quantity-selector (INDEX:285) */
.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:286) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @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 var(--motion-edge) 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 var(--motion-quick) 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 var(--motion-base) 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:288) */
/* 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));
    --quick-add-inset-inline-end: max(
      var(--quick-add-right),
      calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))
    );
    --quick-add-inset-block-end: max(
      var(--quick-add-bottom),
      calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))
    );

    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;
  }

  /* Hide "Add" button when "Choose" button is shown */
  [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hide "Choose" button when "Add" button is shown */
  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;

    &:disabled {
      opacity: var(--opacity-muted-text);
    }
  }

  button.quick-add__button {
    --quick-add-collapsed-width: var(--button-size-md);
    --quick-add-icon-width: calc(var(--button-size-md) - 4px);
    --quick-add-expanded-width: max-content;

    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--quick-add-background, 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);
    width: var(--quick-add-collapsed-width);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    pointer-events: all;
    position: absolute;
    inset-inline-end: var(--quick-add-inset-inline-end);
    inset-block-end: var(--quick-add-inset-block-end);
    max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
    min-inline-size: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    interpolate-size: allow-keywords;

    &: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: flex;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;

      /* Explicit "disabled" rule is needed to beat the `.button:disabled { opacity: 0.5 }` rule in base.css */
      &:disabled {
        opacity: 0;
      }
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button > .add-to-cart-icon {
    flex-shrink: 0;
    width: var(--quick-add-icon-width);
    height: 100%;
  }

  .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;
  }

  @media screen and (min-width: 750px) {
    .quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }
  }

  .quick-add__button[data-added='true'] {
    width: var(--quick-add-collapsed-width);
    color: transparent;
  }

  .quick-add__button[data-added='true'] > .add-to-cart-icon {
    opacity: 0;
  }

  .quick-add__button[data-added='true'] .add-to-cart__added {
    color: var(--quick-add-foreground, var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    button.quick-add__button {
      transition-property: scale, translate, opacity, width;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:291) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .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-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-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-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:292) */
.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:293) */
.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:resource-list-styles (INDEX:294) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:297) */
/* 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);
    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-foreground);
    }
  }

  .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;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.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-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 var(--motion-instant) 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-foreground-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: var(--motion-instant);
  }

  .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(var(--hover-lift, -2px));
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--motion-instant) 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 var(--motion-instant) 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:298) */
.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:299) */
.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)
    )
    #MainContent
    > .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:301) */
.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:303) */
.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:304) */
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:305) */
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: #ffffff;
      --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:307) */
/*
   * 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:309) */
.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:summary-icon-styles (INDEX:315) */
details[open] > summary .icon-animated > svg {
    transform: rotate(180deg);
  }

  summary .svg-wrapper {
    margin-inline-start: auto;
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  /* Shared plus/minus icon animations */
  summary .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  details[open] > summary .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  details[open] > summary .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }
/* END_SNIPPET:summary-icon-styles */

/* START_SNIPPET:swatch-styles (INDEX:316) */
/* Swatches */
  .swatch {
    --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
    --min-width-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height: 16px;
    --min-width: 16px;

    /* mobile values */
    --scaling-factor: 0.5;
    --max-swatch-size: 28px;
    --max-pill-size: 20px;
    --max-filter-size: 32px;

    /* From the settings */
    --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
    --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

    /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
    --offset-scaled-width: calc(
      var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
    );
    --offset-scaled-height: calc(
      var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
    );
    --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

    /* width = min(m + sU, (m + s * W'/H' * M'), M) */
    --swatch-width: min(
      calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
      calc(var(--min-width) + var(--offset-scaled-width)),
      var(--max-swatch-size)
    );

    /* height = min(m + sV, (m + s * H'/W' * M'), M) */
    --swatch-height: min(
      calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
      calc(var(--min-height) + var(--offset-scaled-height)),
      var(--max-swatch-size)
    );

    display: block;
    background: var(--swatch-background);
    background-position: var(--swatch-focal-point, center);
    border-radius: var(--variant-picker-swatch-radius);
    border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
    width: var(--swatch-width);
    height: var(--swatch-height);

    /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
    background-size: var(--swatch-width) var(--swatch-height);

    &.swatch--unavailable {
      border-style: dashed;
    }

    &.swatch--unscaled {
      /* for when you want fixed sizing (e.g. pdp) */
      --swatch-width: var(--variant-picker-swatch-width);
      --swatch-height: var(--variant-picker-swatch-height);
    }

    &.swatch--filter {
      --swatch-width: var(--max-filter-size);
      --swatch-height: var(--max-filter-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    &.swatch--pill {
      --swatch-width: var(--max-pill-size);
      --swatch-height: var(--max-pill-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    /* swatches in filters and pills always have a border  */
    &.swatch--filter,
    &.swatch--pill {
      --style-border-swatch-width: var(--variant-picker-border-width);
      --style-border-swatch-style: var(--variant-picker-border-style);
      --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
    }

    &.swatch--variant-image {
      background-size: cover;
    }

    @media screen and (min-width: 750px) {
      /* desktop values */
      --max-swatch-size: 32px;
      --max-pill-size: 16px;
      --max-filter-size: 28px;
      --scaling-factor: 0.65;
    }
  }
/* END_SNIPPET:swatch-styles */

/* START_SNIPPET:text-block-styles (INDEX:319) */
.text-block {
    width: var(--width, 100%);
  }

  .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);
  }

  .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. The doubled class beats the global paragraph-link styles in base.css. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .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);
  }

  /* The doubled class lets these edge resets beat heading/paragraph margins without relying on source order. */
  .text-block.text-block > *:last-child,
  .text-block.text-block > *:has(+ *:last-child:empty) {
    margin-block-end: 0;
  }

  .text-block.text-block > style + *,
  .text-block.text-block > *:first-child,
  .text-block.text-block > *:first-child:empty + * {
    margin-block-start: 0;
  }
/* END_SNIPPET:text-block-styles */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:320) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:321) */
:root {
    --text-align-default: left;
  }

  /* Base text-block sizing, spacing, wrapping, and helper classes live in text-block-styles.liquid. */
  .text-block {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  [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, 100%);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:323) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  /* The panel takes focus when the drawer opens (theme-drawer.js
     #focusInitialElement), so a container that is deliberately out of the tab
     order must not paint a ring: base.css:263 `*:focus-visible` would otherwise
     draw an outline around the whole drawer. Nothing a keyboard user can reach
     is suppressed here. The panel is tabindex="-1", so Tab never stops on it,
     and the close button keeps its own :focus-visible ring below. The bare
     :focus half covers base.css:268 `@supports not selector(:focus-visible)`.
     APPLY THIS BEFORE the theme-drawer.js change, never after: on its own the
     JS change moves the ring from the close button to the whole sheet. */
  .theme-drawer__dialog:focus,
  .theme-drawer__dialog:focus-visible {
    outline: none;
  }

  {%- comment -%} THE CART DRAWER NOW ARRIVES LIKE THE MENU DRAWER (2026-09-12).

     Owner, testing on device: "cart summary doesnt have the same aniamtion and
     looks kinda broken". Measured, and he was describing something exact: this
     drawer slid in over --animation-speed, which is 125ms, while the menu
     drawer takes 530ms on --ease-spring. The cart popped in roughly four times
     faster than the menu, on a different curve. Two sheets, two entrances.

     WHY IT WAS MISSED. This drawer animates with CSS @keyframes on classes
     owned by theme-drawer.js, not with a transition. A first pass at diagnosing
     it read transitionDuration, got 0s, and concluded the drawer had no
     animation at all — nearly adding a competing transition on top of a working
     keyframe. Check `animation` as well as `transition` before deciding a thing
     does not move.

     ARRIVING takes --motion-spring / --ease-spring, so both sheets share one
     entrance. LEAVING keeps --animation-speed and --animation-timing-fade-out:
     an exit should accelerate away and nothing overshoots on the way out, which
     is the same split the menu drawer's backdrop uses. A 530ms close would also
     put a half-second between "I tapped close" and the page being usable.

     --animation-timing-fade-in is declared first as the linear() fallback for
     anything too old to parse a spring. {%- endcomment -%}
  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:337) */
/* 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-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .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);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .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;
    background-color: var(--color-variant-background);
    color: inherit;
    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;
  }

  .variant-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-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);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  /* Override global label:has(input) display rule with higher specificity */
  .variant-option__button-label--has-swatch:has(input) {
    display: block;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .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;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-option__button-label 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;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:338) */
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-background-styles (INDEX:339) */
.video-background,
  .video-background * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-background--cover * {
    object-fit: cover;
  }

  .video-background--contain * {
    object-fit: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:video-background-styles */

/* START_SNIPPET:video-placeholder-styles (INDEX:340) */
.video-placeholder-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  :not(deferred-media) > .video-placeholder-wrapper {
    width: var(--video-placeholder-width);
  }

  .video-placeholder-wrapper > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .video-placeholder-wrapper.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  .video-placeholder-wrapper__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-placeholder-wrapper__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:video-placeholder-styles */

/* START_SNIPPET:volume-pricing-info (INDEX:342) */
.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-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-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */