/** Shopify CDN: Minification failed

Line 6366:2 Unexpected "{"
Line 6366:3 Expected identifier but found "%"
Line 6366:25 Expected identifier but found whitespace
Line 6367:49 Unexpected "0.1s"
Line 6376:80 Unterminated string token
Line 6377:26 Expected identifier but found "%"
Line 6378:2 Unexpected "{"
Line 6378:3 Expected identifier but found "%"
Line 6378:42 Unexpected "07"
Line 6386:72 Unterminated string token
... and 1 more hidden warnings

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

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

  .utilities a,
  .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;
    }
  }

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

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

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

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

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

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

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */
/* START_SECTION:footer (INDEX:11) */
.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: on mobile, put the email signup first, the menu accordions below it. */
  @media screen and (max-width: 749px) {
    .footer-content > *:has(input[type='email']) {
      order: -1;
    }
  }

  /* Nether: desktop footer type was too small (13px links). Menu links move to
     the body size, headings a step below, both riding the token scale so the
     ultrawide tier lifts them further. */
  @media screen and (min-width: 990px) {
    .footer-content .menu__heading__default {
      font-size: var(--font-size-sm);
    }

    .footer-content .menu a {
      font-size: var(--font-size-base);
    }
  }

  @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 (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__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:is(:hover, [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:is(:hover, [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:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-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__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--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;
    }
  }

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

  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(.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:nether-announcement (INDEX:26) */
/* 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 0.34s var(--ease-out-cubic, ease),
      visibility 0.34s;
  }

  .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;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

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

  /* Only the ACTIVE message occupies layout — the others are taken out of flow.
     The ticker then sizes itself to whatever is showing, so the chevron always
     sits one gap after the text with no JS measurement involved.
     Previously JS pinned an explicit width from the active title's measured
     width; that read the WRONG width whenever a longer message was measured
     while the ticker still carried the previous (narrower) pin, and the chevron
     landed on top of the text — "30-day guarantee" overlapped by 10px (07-26). */
  .nether-ann__ticker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nether-ann__title {
    margin: 0;
    text-align: center;
    white-space: nowrap;
    font-weight: var(--font-weight-medium, 500);
    letter-spacing: 0.01em;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nann-fade, 700ms) ease, visibility var(--nann-fade, 700ms) ease;
  }

  /* Out of flow so they contribute no width; the active one defines the size. */
  .nether-ann__title:not(.is-active) {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
  }

  .nether-ann__title.is-active {
    position: relative;
    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 0.3s var(--ease-out-cubic, ease);
  }

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

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

  .nether-ann__dismiss {
    position: absolute;
    inset-inline-end: clamp(8px, 2.5vw, 20px);
    inset-block: 0;
    margin-block: auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .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 0.34s var(--ease-out-cubic, ease),
      transform 0.34s var(--ease-out-cubic, ease),
      visibility 0.34s;
  }

  .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, 600);
  }

  .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, 600);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
/* END_SECTION:nether-announcement */
/* START_SECTION:nether-design-details (INDEX:30) */
.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: 0.01em;
    color: var(--color-foreground);
  }

  /* ---- Hotspot stage ---- */
  /* Always-on atmospheric stage: a soft top-light glow over a deep charcoal
     falloff. This paints BEHIND the product render (not just the empty state),
     so with the blend mode below the section reads as a lit gradient stage
     instead of flat black — even before real cutout photography lands. */
  .nether-dd__stage {
    position: relative;
    aspect-ratio: var(--dd-stage-ratio, 16 / 10);
    overflow: hidden;
    border-radius: var(--dd-radius, 12px);
    isolation: isolate;
    background:
      radial-gradient(72% 58% at 50% 40%, rgb(255 255 255 / 0.10) 0%, transparent 62%),
      radial-gradient(130% 95% at 50% 0%, rgb(255 255 255 / 0.05) 0%, transparent 55%),
      linear-gradient(170deg, #1f1f22 0%, #141416 58%, #0b0b0d 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 render's near-black studio background drops
     out (lighten = max of photo vs stage glow), so the CSS glow becomes the
     backdrop and the product floats on it — the Santa Cruz look without a
     cutout. The radial mask feathers the photo's outer edge so any rectangle
     seam dissolves into the glow. Turn the toggle OFF for true cutout/PNGs. */
  .nether-dd[data-dd-blend="true"] .nether-dd__stage-img {
    mix-blend-mode: lighten;
    -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%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .nether-dd__stage-img { transition: opacity 0.4s var(--ease-out-cubic, ease); }
  }

  .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;
  }

  .nether-dd__hotspot-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.55);
    background: rgb(0 0 0 / 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: var(--font-body--size, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1;
    transition: transform var(--animation-speed, 0.2s) var(--ease-out-cubic, ease),
      background var(--animation-speed, 0.2s) var(--ease-out-cubic, ease);
  }

  .nether-dd__hotspot-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.5);
    animation: nether-dd-pulse 2.4s var(--ease-out-cubic, ease) 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);
    background: #fff;
    border-color: #fff;
  }

  @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%;
    gap: clamp(12px, 1.6vw, 20px);
    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; }

  @media screen and (min-width: 750px) {
    .nether-dd__rail { grid-auto-columns: 31%; }
  }

  .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 {
    background:
      radial-gradient(120% 100% at 20% 0%, rgb(255 255 255 / 0.05) 0%, transparent 55%),
      linear-gradient(160deg, #232323 0%, #151515 60%, #0f0f0f 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: 999px;
    overflow: hidden;
  }

  .nether-dd__thumb {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 30%;
    background: var(--color-foreground);
    border-radius: 999px;
    transform: translateX(0);
    will-change: transform, inline-size;
  }
/* END_SECTION:nether-design-details */
/* START_SECTION:nether-editorial (INDEX:31) */
.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-feature-rows (INDEX:33) */
.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-icon-card (INDEX:35) */
.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-pullquote (INDEX:39) */
.nether-pq {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-block: var(--section-gap);
  }

  .nether-pq__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    inline-size: 100%;
    max-inline-size: var(--page-width, 1520px);
    margin-inline: auto;
    padding-inline: var(--page-margin, 40px);
  }

  .nether-pq--center .nether-pq__inner {
    align-items: center;
    text-align: center;
  }

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

  .nether-pq__quote {
    margin: 0;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--color-foreground-heading, var(--color-foreground));
    text-wrap: balance;
    max-inline-size: 22ch;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */
/* START_BLOCK:_header-logo (INDEX:92) */
.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: deliberately NOT keyed to prefers-color-scheme. Nether's light/dark is
     driven by section color schemes + the user toggle (data-theme), never the OS.
     Default = black wordmark on the light interior header; white only in the
     explicit dark contexts above (dark toggle, transparent-over-hero, solid dark). */
/* END_BLOCK:_header-logo */
/* START_BLOCK:_header-menu (INDEX:93) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

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

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    /* 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);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

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

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* 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:_product-details (INDEX:105) */
/* 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:bundle-quantity-picker (INDEX:116) */
/* ===========================================
   BUNDLE PICKER - Premium Lululemon/Gymshark Style
   Uses radio inputs for proper :has(:checked) animations
   =========================================== */

.bundle-picker {
  margin-block: var(--spacing-4, 16px);
}

/* Step-through: the pack picker stays hidden until a size is chosen, so the buy
   area is just "select your size" on first load. JS drops .is-gated on select. */
.bundle-picker.is-gated {
  display: none;
}

.bundle-picker--revealed {
  animation: bundle-picker-reveal 0.4s var(--ease-out-cubic, cubic-bezier(0.33, 1, 0.68, 1)) both;
}

@keyframes bundle-picker-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bundle-picker--revealed {
    animation: none;
  }
}

.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: 6px;
  min-height: 58px;
  white-space: normal;
  background-color: transparent;
  color: rgb(var(--color-foreground-rgb));
  transition:
    border-color 200ms ease-out,
    background-color 200ms ease-out,
    box-shadow 200ms ease-out,
    transform 150ms ease-out;
  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 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
}

.bundle-picker__button:has(:checked)::before {
  border-color: var(--color-foreground);
  background-color: var(--color-foreground);
  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) */
.bundle-picker__button:has(:focus-visible) {
  outline: none;
  border-color: var(--color-foreground, #000);
  box-shadow: 0 0 0 2px var(--color-foreground, #000);
}

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

  /* Mobile: the clean floored total sits on the right of every row so the price
     column is consistent ($43 / $86 / $122 / $193). The struck compare is
     desktop-only so the row doesn't crowd next to the per-pair + "% off". */
  .bundle-picker__compare {
    display: none;
  }
}

/* "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: 0.02em;
  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: 1.45;
  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 0.18s ease, box-shadow 0.18s ease;
}

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

/* 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 cubic-bezier(0.34, 1.56, 0.64, 1) 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: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
  -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;
  }
}

.bundle-picker__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.bundle-picker__compare {
  font-size: var(--font-size-xs);
  color: rgb(var(--color-foreground-rgb) / 0.45);
  text-decoration: line-through;
}

.bundle-picker__total {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* "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: 0.08em;
  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;
  }
}

/* ================================================================
   DESKTOP - side-by-side pack CARDS (user call; mobile keeps stacked rows).
   4-up grid, everything centered per card: label, per-pair, price stack.
   Selection reads via the outline (base :has(:checked) rule), so the radio
   dot is dropped; flags (Free Shipping / Most Popular / Best Value) ride
   centered on each card's top edge. Same markup, second skin at 750px+.
   ================================================================ */
@media screen and (min-width: 750px) {
  .bundle-picker__options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding-block-start: 12px;
  }

  /* Patagonia grey blocks - the SAME treatment as the desktop size tiles, so the
     buy column reads as one system. Selected = white + dark outline, like sizes. */
  .bundle-picker__button {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-height: 96px;
    padding: 22px 10px 18px;
    border-radius: var(--style-border-radius-control, 8px);
    border-color: transparent;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  @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;
    }
  }

  .bundle-picker__button:has(:checked) {
    background-color: var(--color-background);
    border-color: var(--color-foreground);
    box-shadow: inset 0 0 0 1px var(--color-foreground);
  }

  /* Cards read selection via the outline; the radio dot is 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-base);
  }

  /* SKIMS-style pricing: the total is the hero, the regular price struck beside it.
     Per-pair + the "% off" text drop on the card - the card is about the price you
     pay; the flag (Most Popular / Best Value) carries the "why". */
  .bundle-picker__save,
  .bundle-picker__per {
    display: none;
  }

  .bundle-picker__price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
  }

  .bundle-picker__compare {
    display: inline;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-foreground-rgb) / 0.42);
    text-decoration: line-through;
  }

  .bundle-picker__total {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-tight, -0.01em);
  }

  /* Flags must READ (user): tiny solid ink chips centered on the top edge.
     Metrics tuned so "FREE SHIPPING" fits a ~98px card without clipping. */
  .bundle-picker__flag {
    inset-inline-end: auto;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    max-inline-size: calc(100% - 4px);
    padding: 3px 6px;
    font-size: 0.53125rem;
    letter-spacing: 0.03em;
    background: var(--color-foreground);
    color: var(--color-background);
    border: 0;
  }
}

/* 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:email-signup (INDEX:126) */
.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 {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__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:footer-copyright (INDEX:130) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */
/* START_BLOCK:footer-policy-list (INDEX:131) */
.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:image (INDEX:134) */
.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:menu (INDEX:137) */
.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:138) */
.nether-bb {
    margin-block-start: var(--margin-md, 16px);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

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

  .nether-bb__title {
    font-size: var(--font-size--sm);
    font-weight: var(--font-weight-semibold, 600);
  }

  .nether-bb__sub {
    font-size: var(--font-size--xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
  }

  .nether-bb__chev {
    flex: 0 0 auto;
    inline-size: 14px;
    block-size: 14px;
    transition: rotate 0.24s var(--ease-out-cubic, ease);
  }

  .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--xs);
    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;
  }

  /* 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;
    transition: opacity 0.25s ease;
  }

  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. */
    html[data-nether-bb-open] .sticky-add-to-cart {
      opacity: 0;
      translate: 0 100%;
      pointer-events: none;
      transition: translate 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    }
  }

  /* 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. */
  @media screen and (prefers-reduced-motion: no-preference) {
    html[data-nether-bb-open] .nether-bb__body {
      animation: nether-bb-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
  }

  @keyframes nether-bb-rise {
    from {
      opacity: 0;
      translate: 0 12px;
    }
  }

  .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 rgb(var(--color-foreground-rgb) / 0.12);
    border-radius: var(--radius-control);
  }

  .nether-bb__row.is-active {
    border-color: rgb(var(--color-foreground-rgb) / 0.5);
  }

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

  .nether-bb__pip svg {
    display: block;
    inline-size: 20px;
    block-size: 14px;
  }

  /* Empty slot: a hollow ghost showing there is room for another pair. */
  .nether-bb__pip path {
    fill: transparent;
    stroke: rgb(var(--color-foreground-rgb) / 0.28);
    stroke-width: 1.1;
    transition: fill 0.18s ease, stroke 0.18s ease;
  }

  .nether-bb__pip.is-filled path {
    fill: var(--bb-dot, #888);
    stroke: rgb(var(--color-foreground-rgb) / 0.35);
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .nether-bb__pip.is-just-filled {
      animation: nether-bb-pop 0.26s cubic-bezier(0.34, 1.4, 0.64, 1);
    }
  }

  /* 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.6); }
    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 rgb(var(--color-foreground-rgb) / 0.18);
    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--xs);
    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);
    background: var(--color-foreground);
    color: var(--color-background);
    font-size: var(--font-size--sm);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: 0.04em;
    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--xs);
    color: #c8102e;
    text-align: center;
  }

  .nether-bb__msg[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .nether-bb__chev {
      transition: none;
    }
  }
/* END_BLOCK:nether-bundle-builder */
/* START_BLOCK:nether-colorway (INDEX:139) */
/* 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 {
    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);
  }

  /* 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;
    gap: 10px;
  }

  .nether-colorway__dot {
    position: relative;
    display: inline-block;
    inline-size: 28px;
    block-size: 28px;
    padding: 0;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
    border-radius: 50%;
    background-color: var(--dot, #888);
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .nether-colorway__dot-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }

  .nether-colorway__dot:active {
    transform: scale(0.92);
  }

  /* Selected: a ring offset from the dot. */
  .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) {
    .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;
  }

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

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

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

  .nether-mwb__img {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 232%;
    max-inline-size: none;
    block-size: auto;
    /* The +4px nudges the ARTWORK, not the box. The mark's box already sits on
       the 22px buy-area gutter, but the logo inside carries transparent padding
       from the official TENCEL file, so its visible ink hung ~4px left of
       "MADE WITH" and "Learn more" and read as misaligned (user 07-26).
       Centring maths stays in the translate so the crop is unchanged. */
    transform: translate(calc(-50% + 4px), -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;
  }

  .nether-mwb__overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.28s ease;
  }

  .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: 0 24px 80px rgb(0 0 0 / 0.35);
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .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: 0.04em;
    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 0.15s ease;
  }

  .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: 0.02em;
    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-pdp-tabs (INDEX:144) */
.nether-pdp-tabs {
    margin-block-start: var(--space-xl);
  }

  /* 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(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.8, 0.35, 1);
  }

  .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 {
    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 0.2s ease, border-color 0.2s ease;
  }

  .nether-pdp-tabs__tab.is-active {
    opacity: 1;
    border-block-end-color: var(--color-foreground);
  }

  .nether-pdp-tabs__tab:hover {
    opacity: 0.8;
  }

  .nether-pdp-tabs__panel {
    padding-block-start: var(--space-lg);
  }

  @media (prefers-reduced-motion: no-preference) {
    .nether-pdp-tabs__panel.is-sliding-right {
      animation: nether-ntabs-in-right 0.35s cubic-bezier(0.25, 0.8, 0.35, 1);
    }

    .nether-pdp-tabs__panel.is-sliding-left {
      animation: nether-ntabs-in-left 0.35s cubic-bezier(0.25, 0.8, 0.35, 1);
    }
  }

  @keyframes nether-ntabs-in-right {
    from {
      opacity: 0;
      transform: translateX(26px);
    }
  }

  @keyframes nether-ntabs-in-left {
    from {
      opacity: 0;
      transform: translateX(-26px);
    }
  }

  .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);
  }

  .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;
  }

  /* 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;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: clamp(24px, 4vw, 56px);
      align-items: start;
    }
  }

  .nether-pdp-tabs__designed-media img,
  .nether-pdp-tabs__designed-media video {
    inline-size: 100%;
    block-size: auto;
    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 {
    margin-block-start: var(--space-sm);
    padding: 0;
    border: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    color: var(--color-foreground);
    font-size: var(--type-body-sm-size, 0.8125rem);
    font-weight: var(--font-weight-medium, 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;
  }

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

  .nether-pdp-tabs__card-title {
    display: block;
    font-weight: var(--type-ui-caps-weight);
  }

  .nether-pdp-tabs__card-text {
    display: block;
    margin-block-start: 2px;
    opacity: 0.7;
  }

  /* v1 fallback: plain list when no cards are configured */
  .nether-pdp-tabs__features {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nether-pdp-tabs__feature {
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--color-border);
  }

  .nether-pdp-tabs__feature:last-child {
    border-block-end: 0;
  }
/* END_BLOCK:nether-pdp-tabs */
/* START_BLOCK:nether-size-guide (INDEX:146) */
/* 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: 0.01em;
    text-transform: none;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .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;
    background: rgb(0 0 0 / 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.28s ease;
  }
  .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 0.32s cubic-bezier(0.33, 1, 0.68, 1);
      border-inline-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
      box-shadow: -8px 0 30px rgb(0 0 0 / 0.14);
    }
    .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 0.32s cubic-bezier(0.33, 1, 0.68, 1);
      box-shadow: 0 -8px 30px rgb(0 0 0 / 0.18);
    }
    .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: 999px;
      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 rgb(var(--color-foreground-rgb) / 0.1);
    flex-shrink: 0;
  }
  .nether-sg__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
  }
  .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 0.15s ease;
  }
  .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: 1.375rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .nether-sg__range {
    -webkit-appearance: none;
    appearance: none;
    inline-size: 100%;
    block-size: 6px;
    margin: 0;
    border-radius: 999px;
    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;
  }
  .nether-sg__range:focus-visible { outline: 2px 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));
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.22);
    cursor: grab;
    transition: transform 0.12s ease;
  }
  .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));
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.22);
    cursor: grab;
  }
  .nether-sg__range::-moz-range-track { background: transparent; }

  .nether-sg__mode,
  .nether-sg__unit {
    padding: 9px 8px;
    border: 0;
    border-radius: 7px;
    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 0.18s ease, color 0.18s ease;
  }
  .nether-sg__mode.is-active,
  .nether-sg__unit.is-active {
    background: var(--color-background);
    color: var(--color-foreground);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
  }

  .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 rgb(var(--color-foreground-rgb) / 0.18);
    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; }
  .nether-sg__inputs input:focus { outline: none; 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: 999px;
    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: 0.01em;
    cursor: pointer;
  }
  .nether-sg__go:active,
  .nether-sg__select:active { transform: scale(0.99); }

  .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: 0.06em;
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }
  .nether-sg__result-size {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
  }
  .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;
  }
  .nether-sg__error {
    margin: 10px 0 0;
    font-size: var(--font-size-sm);
    color: #c0392b;
  }
  html[data-theme='dark'] .nether-sg__error { color: #ff8a80; }

  .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: 1.5px solid transparent;
    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: border-color 0.15s ease, background 0.15s ease;
  }
  .nether-sg__gift-yn-btn:hover,
  .nether-sg__gift-pill:hover { border-color: rgb(var(--color-foreground-rgb) / 0.3); }
  .nether-sg__gift-yn-btn.is-active,
  .nether-sg__gift-pill.is-active { border-color: var(--color-foreground); background: transparent; }
  .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 0.15s ease;
  }
  .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: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  .nether-sg__divider {
    block-size: 1px;
    background: rgb(var(--color-foreground-rgb) / 0.1);
    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: 0.06em;
    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 rgb(var(--color-foreground-rgb) / 0.08);
  }
  .nether-sg__table th {
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--font-size-xs);
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }
  .nether-sg__table tbody tr {
    cursor: pointer;
    transition: background 0.14s ease;
  }
  .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: 1.5;
    margin: 0 0 8px;
  }

  .nether-sg__acc {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
  }
  .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 0.25s ease;
  }
  .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: 1.6;
    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:147) */
.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--xs);
    line-height: 1.5;
    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:review (INDEX:160) */
.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:162) */
.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:video (INDEX:168) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */
/* START_SNIPPET:accordion-custom-component (INDEX:169) */
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:background-media (INDEX:172) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:buy-buttons-styles (INDEX:179) */
.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);
  }

  .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: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 follows the header foreground/background so it
     eases in step with the rest of the header on the home hero. The stock primary-button
     colours snapped abruptly on scroll; a transition + the foreground token fix it. */
  #header-component .cart-bubble__background {
    background-color: var(--color-foreground);
    transition: background-color 0.4s var(--ease-out-cubic, ease);
  }

  #header-component .cart-bubble {
    color: var(--color-background);
    transition: color 0.4s 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: #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: #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-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 {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__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;
  }

  .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:chat-drawer (INDEX:187) */
/* 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:group (INDEX:204) */
.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:205) */
.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:206) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  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;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    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;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  {%- comment -%} 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. {%- endcomment -%}
  {%- comment -%} 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. {%- endcomment -%}
  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    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);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */
/* START_SNIPPET:localization-form (INDEX:216) */
/* 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__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:nether-cart-empty (INDEX:221) */
.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);
  }

  /* Beat Horizon's #header-component ... svg { width: 24px } — the theme stylesheet
     bundling can silently drop a clean specificity win, so pin an explicit size with
     !important (that's why the icon was rendering micro). */
  #header-component .nether-empty__icon svg {
    width: 76px !important;
    height: 76px !important;
  }

  .nether-empty__title {
    margin: 0;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.1em;
    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--md);
    font-weight: var(--font-weight-bold, 600);
    text-decoration: none;
    transition: opacity var(--animation-speed, 0.2s) ease;
  }

  .nether-empty__btn:hover {
    opacity: 0.88;
  }
/* END_SNIPPET:nether-cart-empty */
/* START_SNIPPET:nether-motion (INDEX:229) */
/* Hidden state only exists once JS has armed the element, so no-JS and
     reduced-motion users always see content. */
  html:not(.nether-reveal-off) [data-nreveal].is-armed {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.65s ease,
      transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--nreveal-i, 0) * 90ms);
    will-change: opacity, transform;
  }

  html:not(.nether-reveal-off) [data-nreveal].is-revealed {
    opacity: 1;
    transform: none;
  }
/* END_SNIPPET:nether-motion */
/* START_SNIPPET:nether-quickbuy (INDEX:232) */
.nether-qb {
      position: fixed;
      inset: 0;
      z-index: 1200;
      visibility: hidden;
      pointer-events: none;
    }

    .nether-qb[data-open] {
      visibility: visible;
      pointer-events: auto;
    }

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

    .nether-qb__overlay {
      position: absolute;
      inset: 0;
      background: rgb(0 0 0 / 0.35);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .nether-qb[data-open] .nether-qb__overlay {
      opacity: 1;
    }

    .nether-qb__panel {
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      display: flex;
      flex-direction: column;
      max-block-size: 86dvh;
      border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
      background: var(--color-background);
      color: var(--color-foreground);
      box-shadow: 0 -12px 40px rgb(0 0 0 / 0.18);
      transform: translateY(100%);
      transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .nether-qb[data-open] .nether-qb__panel {
      transform: translateY(0);
    }

    /* Reduced motion: the sheet appears instead of sliding. Safe to zero these
       outright — unlike the cart drawer, nothing here awaits transitionend; the
       sheet's open/close state is driven purely by the [data-open] attribute. */
    @media (prefers-reduced-motion: reduce) {
      .nether-qb__overlay,
      .nether-qb__panel {
        /* stylelint-disable-next-line declaration-no-important */
        transition-duration: 0.01ms !important;
      }
    }

    .nether-qb__grab {
      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);
    }

    .nether-qb__head {
      display: flex;
      align-items: center;
      gap: var(--gap-sm);
      padding: 22px 16px 14px;
      border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    }

    .nether-qb__thumb {
      width: 52px;
      height: 52px;
      border-radius: var(--radius-card);
      object-fit: cover;
      flex-shrink: 0;
    }

    .nether-qb__head-copy {
      flex: 1 1 auto;
      min-width: 0;
    }

    .nether-qb__title {
      margin: 0;
      font-size: var(--font-size--md);
      font-weight: var(--font-weight-semibold, 600);
      line-height: 1.25;
    }

    .nether-qb__price {
      margin: 2px 0 0;
      font-size: var(--font-size--sm);
      color: rgb(var(--color-foreground-rgb) / 0.7);
    }

    .nether-qb__close {
      flex-shrink: 0;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      margin: -8px -8px 0 0;
      border: none;
      background: transparent;
      appearance: none;
      -webkit-appearance: none;
      color: var(--color-foreground);
      cursor: pointer;
    }

    .nether-qb__body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 0 16px;
    }

    .nether-qb__section {
      padding-block: 10px;
    }

    .nether-qb__label {
      margin: 0 0 8px;
      font-size: var(--font-size--2xs);
      font-weight: var(--font-weight-bold, 700);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgb(var(--color-foreground-rgb) / 0.6);
    }

    .nether-qb__label-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--gap-sm);
    }

    .nether-qb__size-error {
      font-size: var(--font-size--xs);
      color: #c8102e;
    }

    /* Colorway dots (multi-color products only, e.g. ROAM II) */
    .nether-qb__color-name {
      font-size: var(--font-size--sm);
      color: rgb(var(--color-foreground-rgb) / 0.6);
    }

    .nether-qb__colors {
      display: flex;
      gap: 10px;
    }

    .nether-qb__color {
      width: 28px;
      height: 28px;
      padding: 0;
      border: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
      border-radius: 50%;
      background-color: var(--qb-dot, #888);
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      transition: box-shadow 0.18s ease;
    }

    .nether-qb__color.is-selected {
      box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 3.5px rgb(var(--color-foreground-rgb, 0 0 0));
    }

    .nether-qb__packs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    /* Patagonia tile language: quiet grey fills, the selected one goes white
       with a solid outline - separation from value steps, not borders. */
    .nether-qb__pack {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-height: 54px;
      padding: 6px 4px;
      border: 1.5px solid transparent;
      border-radius: var(--radius-card);
      background: rgb(var(--color-foreground-rgb) / 0.05);
      appearance: none;
      -webkit-appearance: none;
      color: var(--color-foreground);
      cursor: pointer;
      transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    .nether-qb__pack.is-selected {
      border-color: rgb(var(--color-foreground-rgb, 0 0 0));
      background: var(--color-background);
    }

    .nether-qb__pack-qty {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-semibold, 600);
    }

    .nether-qb__pack-flag {
      font-size: 0.625rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgb(var(--color-foreground-rgb) / 0.55);
      text-align: center;
      line-height: 1.2;
    }

    /* MeUndies slot strip: the pack takes shape as choices land */
    .nether-qb__slots {
      display: flex;
      gap: 8px;
      margin-block-start: 10px;
    }

    .nether-qb__slot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 40px;
      height: 40px;
      border: 1px dashed rgb(var(--color-foreground-rgb) / 0.3);
      border-radius: var(--radius-card);
      overflow: hidden;
    }

    .nether-qb__slot.is-filled {
      border-style: solid;
      border-color: rgb(var(--color-foreground-rgb) / 0.2);
      animation: nether-qb-slot-in 0.25s ease backwards;
    }

    .nether-qb__slot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .nether-qb__slot em {
      position: absolute;
      inset-block-end: 1px;
      inset-inline-end: 2px;
      font-style: normal;
      font-size: 0.5625rem;
      font-weight: 700;
      padding: 0 3px;
      border-radius: 4px;
      background: var(--color-foreground);
      color: var(--color-background);
    }

    @keyframes nether-qb-slot-in {
      from {
        transform: scale(0.7);
        opacity: 0;
      }
    }

    .nether-qb__sizes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      border-radius: var(--radius-panel);
      transition: box-shadow 0.2s ease;
    }

    /* Nike error state: the whole grid outlines red */
    .nether-qb__sizes.has-error {
      box-shadow: 0 0 0 1.5px #c8102e;
      padding: 6px;
    }

    .nether-qb__size {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      min-height: 46px;
      border: 1.5px solid transparent;
      border-radius: var(--radius-card);
      background: rgb(var(--color-foreground-rgb) / 0.05);
      appearance: none;
      -webkit-appearance: none;
      color: var(--color-foreground);
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium, 500);
      cursor: pointer;
      transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    .nether-qb__size.is-selected {
      border-color: rgb(var(--color-foreground-rgb, 0 0 0));
      background: var(--color-background);
    }

    .nether-qb__size[data-qb-soldout] {
      color: rgb(var(--color-foreground-rgb) / 0.35);
      text-decoration: line-through;
      cursor: not-allowed;
    }

    .nether-qb__size-out {
      font-size: 0.5625rem;
      text-decoration: none;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* Full-bleed square action, matching the sticky bar (user 07-26: the same
       treatment applies to the quick sheet as to the sticky add-to-cart). The
       foot contributes no padding; the button runs edge to edge and carries the
       home-indicator inset itself. */
    .nether-qb__foot {
      padding: 0;
      border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    }

    /* Add-to-bag failures used to be silent — spinner ran, nothing happened. */
    .nether-qb__add-error {
      /* The foot no longer pads (the button is full-bleed), so the error
         carries its own inset. */
      margin: 0;
      padding: 10px 16px;
      font-size: var(--font-size--xs);
      color: #c8102e;
      text-align: center;
    }

    .nether-qb__add-error[hidden] {
      display: none;
    }

    .nether-qb__atc {
      position: relative;
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* LEAVE THIS ALONE. Confirmed good on device 07-26. The sticky bar needed
         its safe-area inset folded into min-height to centre its label, but this
         button is verified correct as-is — do not "fix" it to match. */
      min-height: 56px;
      border: none;
      border-radius: 0;
      padding-block-end: env(safe-area-inset-bottom, 0px);
      /* Opaque, not var(--color-foreground): that token is black at 81% alpha
         (the body-text value) and the washed pill read as a disabled state
         (user 07-25). */
      background: rgb(var(--color-foreground-rgb, 0 0 0));
      color: var(--color-background);
      appearance: none;
      -webkit-appearance: none;
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-semibold, 600);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-color 0.25s ease, color 0.25s ease;
    }

    /* Go state: size chosen -> the pill picks up the colorway, same language as
       the sticky ATC (the one colored element pattern). */
    .nether-qb__atc.is-ready {
      background: var(--nether-colorway, rgb(var(--color-foreground-rgb, 0 0 0)));
      color: var(--nether-colorway-label, var(--color-background));
    }

    .nether-qb__atc-spinner {
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid rgb(255 255 255 / 0.3);
      border-top-color: var(--color-background);
      border-radius: 50%;
      opacity: 0;
    }

    .nether-qb__atc-check {
      position: absolute;
      display: inline-flex;
      opacity: 0;
      transform: scale(0.5);
    }

    .nether-qb__atc.is-loading .nether-qb__atc-label,
    .nether-qb__atc.is-done .nether-qb__atc-label {
      opacity: 0;
    }

    .nether-qb__atc.is-loading .nether-qb__atc-spinner {
      opacity: 1;
      animation: nether-qb-spin 0.7s linear infinite;
    }

    .nether-qb__atc.is-done .nether-qb__atc-check {
      opacity: 1;
      transform: scale(1);
      transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes nether-qb-spin {
      to {
        transform: rotate(360deg);
      }
    }

    /* Lock the page scroll while the sheet is up */
    html[data-nether-qb-open] {
      overflow: hidden;
    }

    html[data-nether-qb-open] .page-wrapper {
      overflow: hidden;
    }
/* END_SNIPPET:nether-quickbuy */
/* START_SNIPPET:product-grid (INDEX:251) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */
/* START_SNIPPET:product-information-content (INDEX:252) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:253) */
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: #fff;
    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;
  }

  /* 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:254) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* 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:quantity-selector (INDEX:257) */
.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:search-modal (INDEX:269) */
/* 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 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-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: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */
/* START_SNIPPET:search (INDEX:270) */
.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:slideshow-arrows (INDEX:276) */
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:text-component-shimmer-styles (INDEX:289) */
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:variant-swatches (INDEX:307) */
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 */