/** Shopify CDN: Minification failed

Line 7472:9 Unexpected "and"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:3) */
collection-links-component {
    --alignment: flex-start;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:custom-collection-banners (INDEX:6) */
.main-collection-grid {
    grid-column: var(--grid-column--mobile);

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

  .product-grid__banner-item {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .product-grid__banner-item--rounded {
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
  }

  .product-grid__banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }

  .product-grid__banner-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .product-grid__banner-media {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--banner-aspect-mobile, 1.5);
    overflow: hidden;
  }

  .product-grid__banner-media--image {
    line-height: 0;
  }

  .product-grid__banner-media--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media screen and (min-width: 750px) {
    .product-grid__banner-media {
      aspect-ratio: var(--banner-aspect-desktop, 2.5);
    }
  }
/* END_SECTION:custom-collection-banners */

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

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

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

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

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

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

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

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

/* START_SECTION:footer-logo (INDEX:15) */
.footer-logo {
    background: #000000;
    width: 100%;
    line-height: 0;
    font-size: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-logo__text {
    display: block;
    width: 360px;
    height: auto;
    padding: 35px 0 20px;
  }

  .footer-logo__pattern-wrap {
    width: 100%;
    max-height: 580px;
    overflow: hidden;
  }

  .footer-logo__pattern {
    display: block;
    width: 100%;
    height: auto;
  }

  @media screen and (max-width: 749px) {
    .footer-logo__text {
      width: 200px;
      padding: 30px 0 15px;
    }

    .footer-logo__pattern-wrap {
      max-height: none;
    }
  }
/* END_SECTION:footer-logo */

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

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

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

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

/* START_SECTION:footer (INDEX:17) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    text-transform: uppercase;
    font-weight: 700;
  }

  .section--full-width .footer-content {
    margin-inline: var(--page-margin);
  }

  @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);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.3;
    }

    /* 2 columns: newsletter left, menus pushed to far right */
    .footer-content[style*='--grid-columns: 2'] {
      grid-template-columns: 1fr 1.5fr;
      gap: 0;
    }

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

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

    /* Newsletter group (left column) */
    .footer-content > :first-child {
      padding: 0 0 16px 0;
    }

    /* Newsletter group row-gap 38px to match Tectonic */
    .footer-content > :first-child .group-block-content.layout-panel-flex--column {
      --gap: 38px !important;
      gap: 38px !important;
    }

    /* Menus group: push INFORMATION / ASSISTANCE / FOLLOW US to the far right */
    .footer-content > :nth-child(2) .group-block-content.layout-panel-flex--row {
      justify-content: flex-end;
      column-gap: 88px;
    }

    /* Menu headings - 700 bold on desktop */
    .footer-content .menu__heading,
    .footer-content .menu__heading.paragraph,
    .footer-content .menu__heading span {
      font-weight: 700 !important;
      font-size: 16px;
    }

    /* Menu links - 400 weight, 16px */
    .footer-content .menu__item,
    .footer-content .menu__item a {
      font-weight: 400;
      font-size: 16px;
    }

    /* Newsletter text - bold, 16px (matches Tectonic) */
    .footer-content .text-block,
    .footer-content .text-block p,
    .footer-content .text-block strong {
      font-size: 16px;
      font-weight: 700;
    }

    /* Email signup - constrain width like Tectonic */
    .footer-content .email-signup__input-group {
      max-width: 450px !important;
    }

    /* Email signup input - compact, white bg like Tectonic */
    .footer-content .email-signup__input {
      font-size: 16px !important;
      font-weight: 400 !important;
      background-color: #ffffff !important;
      color: #000000 !important;
      border-color: #ffffff !important;
      padding: 10px 14px !important;
      height: 42px !important;
      box-sizing: border-box !important;
    }

    .footer-content .email-signup__input::placeholder {
      color: rgba(0, 0, 0, 0.5) !important;
    }

    /* Email signup arrow button - separate, compact like Tectonic */
    .footer-content .email-signup-block {
      --arrow-button-size: 42px !important;
      --arrow-icon-size: 24px !important;
    }

    .footer-content .email-signup__button--arrow:not(.email-signup__button--integrated) {
      width: 42px !important;
      height: 42px !important;
      background-color: #ffffff !important;
      border: 1px solid #ffffff !important;
      color: #000000 !important;
    }

    .footer-content .email-signup__button--arrow .email-signup__button-icon {
      width: 24px !important;
      height: 24px !important;
    }

    /* Force footer accordion menus to stay open on desktop */
    .footer-content accordion-custom details::details-content,
    .footer-content accordion-custom details .details-content {
      block-size: auto !important;
      opacity: 1 !important;
      overflow: visible !important;
      padding-block: initial !important;
      content-visibility: visible !important;
    }
    .footer-content accordion-custom .menu__heading__toggle {
      display: none !important;
    }
    .footer-content accordion-custom summary {
      pointer-events: none;
    }
  }

  /* Footer menus: shrink to content so flex alignment works */
  .footer-content .group-block-content .menu {
    width: auto;
    flex: 0 0 auto;
  }

  /* Footer menu link styling */
  .footer-content .menu__item a {
    text-decoration: none;
  }

  .footer-content .menu__item a:hover {
    text-decoration: underline;
  }

  /* ========================================
     MOBILE FOOTER OVERRIDES (mweb only)
     ======================================== */
  @media screen and (max-width: 749px) {
    /* Reduce main footer grid gap between newsletter and menus */
    .footer-content {
      gap: 24px;
    }

    /* Newsletter text blocks - 10px font, bold */
    .footer-content .text-block,
    .footer-content .text-block p,
    .footer-content .text-block strong {
      font-size: 10px !important;
      line-height: 1.5 !important;
      font-weight: 700 !important;
    }

    /* Email signup input - 10px font, white bg like desktop */
    .footer-content .email-signup__input {
      font-size: 10px !important;
      padding: 6px 10px !important;
      background-color: #ffffff !important;
      color: #000000 !important;
      border-color: #ffffff !important;
      height: 30px !important;
      box-sizing: border-box !important;
    }

    .footer-content .email-signup__input::placeholder {
      font-size: 10px;
      color: rgba(0, 0, 0, 0.5) !important;
    }

    /* Email signup arrow button - separate, white bg like desktop */
    .footer-content .email-signup__button--arrow:not(.email-signup__button--integrated) {
      width: 30px !important;
      height: 30px !important;
      background-color: #ffffff !important;
      border: 1px solid #ffffff !important;
      color: #000000 !important;
    }

    .footer-content .email-signup__button--arrow .email-signup__button-icon {
      width: 16px !important;
      height: 16px !important;
    }

    /* Menus should take full width on mobile - needs matching specificity to override desktop rule */
    .footer-content .group-block-content .menu {
      width: 100%;
      flex: 1 1 100%;
    }

    /* Summary (accordion heading) must be full width flex so + icon goes to far right */
    .footer-content .menu--accordion .menu__heading {
      display: flex;
      width: 100%;
      font-size: 12px !important;
      font-weight: 700 !important;
    }

    .footer-content .menu--accordion .menu__heading.paragraph {
      font-size: 12px !important;
      font-weight: 700 !important;
    }

    /* Accordion heading span: flex row, heading left + icon at far right end */
    .footer-content .menu--accordion .menu__heading__accordion {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    /* Menu accordion toggle icon sizing - smaller */
    .footer-content .menu__heading__toggle {
      flex-shrink: 0;
      margin-inline-start: auto;
      width: 10px;
      height: 10px;
    }

    .footer-content .menu__heading__toggle svg {
      width: 10px;
      height: 10px;
    }

    /* Menu items - 10px font */
    .footer-content .menu__item,
    .footer-content .menu__item a {
      font-size: 10px;
    }

    /* Reduce gap between menu accordion blocks on mobile */
    .footer-content .group-block-content.layout-panel-flex--row.mobile-column {
      gap: 0;
    }

    /* Payment icons compact on mobile */
    .footer-content .payment-icons__item .icon {
      height: 20px;
      width: auto;
    }
  }
/* END_SECTION:footer */

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

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

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

  .announcement-bar__viewport {
    overflow: hidden;
    width: 100%;
  }

  .announcement-bar__slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .announcement-bar__slide {
    flex: 0 0 100%;
    min-width: 0;
    place-content: center;
  }

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

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }

  .announcement-bar__close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: currentColor;
    z-index: 1;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }

  .announcement-bar__close:hover {
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    .announcement-bar__slide,
    .announcement-bar__slide *,
    .announcement-bar__slide p,
    .announcement-bar__text,
    .custom-font-size.announcement-bar__slide,
    .custom-font-size.announcement-bar__slide > * {
      font-size: 10px !important;
      -webkit-text-size-adjust: 100% !important;
      text-size-adjust: 100% !important;
    }
    .announcement-bar__slide {
      --font-size: 10px !important;
    }
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:20) */
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: 100%;
    --closed-underlay-opacity: 0;

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

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

    /* Turn header white on any hover */
    &:hover,
    &: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;
      --closed-underlay-opacity: 1;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    opacity: var(--closed-underlay-opacity, 1);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: opacity 0.6s ease-in-out;
  }

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

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .search-action {
        grid-area: rightA;
        justify-self: end;
      }

      header-actions {
        grid-area: rightB;
      }

      .account-button {
        display: none;
      }

      .header__icon--summary .header-drawer-icon {
        width: 20px;
        height: 20px;
      }
    }
  }

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

    .search-action {
      grid-area: rightA;
      justify-self: end;
    }

    header-actions {
      grid-area: rightB;
    }

    .account-button {
      display: none;
    }

    .header__icon--summary .header-drawer-icon {
      width: 20px;
      height: 20px;
    }
  }

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

  /* When drawer is open on mobile, keep header row above the drawer panel */
  @media screen and (max-width: 749px) {
    .header:has(#Details-menu-drawer-container.menu-open) .header__row--top {
      position: relative;
      z-index: 19;
      background-color: #fff;
    }
  }

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

  /* Reduce header height when transparent header turns opaque */
  .header[transparent]:hover,
  .header[transparent][data-sticky-state='active'] {
    --header-padding: var(--padding-xs);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:hero (INDEX:21) */
@media screen and (max-width: 749px) {
    .hero-wrapper {
      display: none;
    }
  }

  .hero-wrapper {
    --hero-height-offset: 0px;
  }

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

  /* When header is transparent, hero fills full viewport with no gap */
  body:has(> #header-group > .header-section > #header-component[transparent]) .hero-wrapper:first-child {
    --hero-height-offset: 0px;
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
    max-height: calc(100vw / var(--hero-media-aspect-ratio, 100));
  }

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

    min-height: 600px;
  }

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

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

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

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

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

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

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

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

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

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

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

  /* Mobile/Desktop media visibility */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .hero__media-cell {
    position: relative;
    overflow: hidden;
    display: grid;
  }

  .hero__image-overlay {
    position: absolute;
    inset: 0;
    padding: 24px 16px;
    padding-top: var(--overlay-top-offset, 24px);
    display: flex;
    flex-direction: column;
    align-items: var(--overlay-align, flex-start);
    justify-content: var(--overlay-justify, flex-end);
    z-index: 2;
    pointer-events: none;
  }

  @media screen and (min-width: 750px) {
    .hero__media-cell:not(:only-child) .hero__image-overlay {
      padding-inline: 40px;
    }
  }

  .hero__image-overlay > * {
    pointer-events: auto;
  }

  .hero__image-overlay-heading {
    color: #fff;
    font-size: var(--overlay-heading-size, 1.25rem);
    font-weight: var(--overlay-heading-weight, 400);
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 var(--overlay-heading-spacing, 4px);
    text-transform: uppercase;
  }

  .hero__image-overlay-subheading {
    color: #fff;
    font-size: var(--overlay-subheading-size, 0.875rem);
    font-weight: var(--overlay-subheading-weight, 400);
    line-height: 1.4;
    margin: 0 0 var(--overlay-subheading-spacing, 16px);
  }

  .hero__image-overlay-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    pointer-events: auto;
    height: 40px;
    margin-top: 8px;
    padding-block: 18px;
    padding-inline: 26px;
    font-size: var(--overlay-button-size, 16px);
    font-weight: var(--overlay-button-weight, 600);
  }

  .hero-wrapper .button {
    background-color: #000;
    color: #fff;
    border-radius: 0;
    box-shadow: none;
    height: 40px;
    padding-block: 18px;
    padding-inline: 26px;
    font-size: 16px;
  }

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

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

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

/* START_SECTION:homepage-banners (INDEX:22) */
/* ===== Homepage Banners (metaobject-driven) ===== */
  .hb-banner {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
  }
  .hb-banner--first {
    min-height: calc(100svh - var(--header-group-height, 0px));
  }
  /* --- Media grids --- */
  .hb-media-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
    min-height: inherit;
  }
  .hb-media-grid--split {
    grid-template-columns: 1fr 1fr;
  }
  .hb-media-grid--desktop {
    display: grid;
  }
  .hb-media-grid--mobile {
    display: none;
  }
  @media screen and (max-width: 749px) {
    .hb-media-grid--desktop {
      display: none;
    }
    .hb-media-grid--mobile {
      display: grid;
    }
    .hb-banner {
      min-height: 0;
      aspect-ratio: 365 / 812;
    }
    /* First banner (mobile): show the full image, full-bleed width, no crop.
       The mobile asset is a tall portrait; forcing 365/812 + object-fit:cover
       cropped its sides. Let the box take the image's natural ratio instead. */
    .hb-banner--first:not(.hb-banner--split) {
      min-height: 0;
      aspect-ratio: auto;
    }
    .hb-banner--first:not(.hb-banner--split) .hb-media-cell {
      aspect-ratio: auto;
    }
    .hb-banner--first:not(.hb-banner--split) .hb-media {
      height: auto;
      object-fit: contain;
    }
    .hb-banner--split {
      min-height: 0;
      aspect-ratio: auto;
    }
    .hb-banner--split .hb-media-grid--mobile {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }
    .hb-banner--split .hb-media-cell {
      aspect-ratio: 365 / 812;
    }
  }
  /* --- Media cell --- */
  .hb-media-cell {
    position: relative;
    overflow: hidden;
    display: grid;
  }
  a.hb-media-cell--linked {
    text-decoration: none;
    color: inherit;
  }
  .hb-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    grid-area: 1 / 1;
  }
  /* --- Gradient overlay --- */
  .hb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #00000026, transparent);
    z-index: 1;
    pointer-events: none;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
  /* --- Text overlay --- */
  .hb-text-overlay {
    position: absolute;
    inset: 0;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 2;
    pointer-events: none;
    text-align: left;
  }
  .hb-text-overlay--single {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .hb-banner--split .hb-media-grid--desktop .hb-text-overlay {
    justify-content: center;
    padding-top: 75%;
  }
  .hb-text-overlay > * {
    pointer-events: auto;
  }
  .hb-heading {
    color: #fff;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 4px;
    text-transform: uppercase;
  }
  .hb-subheading {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 16px;
  }
  .hb-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    pointer-events: auto;
    height: 40px;
    margin-top: 8px;
    padding-inline: 26px;
    font-size: 0.875rem;
    font-weight: 600;
  }
  /* --- Mobile text overrides --- */
  @media screen and (max-width: 749px) {
    .hb-text-overlay--mobile {
      align-items: center;
      text-align: center;
      justify-content: center;
      padding-top: 80%;
    }
    .hb-banner--first .hb-media-cell:first-of-type .hb-text-overlay--mobile {
      padding-top: calc(80% + 40px);
    }
    .hb-heading {
      font-size: 32px;
      font-weight: 600;
    }
    .hb-subheading {
      font-size: 13px;
    }
    .hb-button {
      padding-inline: 15px;
      font-size: 10px;
    }
  }
/* END_SECTION:homepage-banners */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-promo-strip {
    grid-column: 1 / -1;
    background-color: var(--color-foreground);
    color: var(--color-background);
    text-align: center;
    padding: 12px 16px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .cart-promo-strip__link {
    color: var(--color-background);
    text-decoration: none;
    display: inline;
  }

  .cart-promo-strip__cta {
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-inline-start: 4px;
  }

  .cart-promo-strip__link:hover .cart-promo-strip__cta {
    text-decoration-thickness: 2px;
  }

  .cart-promo-strip__message {
    margin: 0;
  }

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

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

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

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

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

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

  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);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:30) */
.main-collection-grid {
    grid-column: var(--grid-column--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }
/* END_SECTION:main-collection */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    > a {
      display: flex;
    }

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

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

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

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

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

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

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

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

/* START_SECTION:predictive-search (INDEX:38) */
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

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

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

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

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

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

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }
/* END_SECTION:predictive-search */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:product-information (INDEX:41) */
/* FAQ handle hidden until the inline script moves it into the column (no flash). */
  .sai-faq-foot {
    display: none;
  }

  /* Remove the virtual try-on's top/bottom margin (Spectrum snippet default is
     margin-block: var(--sai-size-4)). Kept here so a Studio republish can't revert it. */
  [data-spectrum-feature-slug='virtual_try_on'] .sai-nvy4z5v7 {
    margin-block: 0;
  }

  /* Try-on overlay on the gallery.
     Desktop: last child of the gallery column, position:sticky pinned near the
     bottom-RIGHT of the gallery (inset from the edge), pulled up with negative
     margin to overlay the images; releases once the gallery ends (last image).
     Mobile: position:absolute to the gallery, bottom-right of the carousel. */
  .product-information__media {
    position: relative;
  }
  .tryon-sticky {
    position: sticky;
    bottom: 24px;
    z-index: 4;
    width: -moz-fit-content;
    width: fit-content;
    pointer-events: none;
  }
  .tryon-sticky > * {
    pointer-events: auto;
  }
  @media screen and (min-width: 750px) {
    .tryon-sticky {
      /* top: pull up to overlay; right: inset from the gallery edge; left auto = right-aligned */
      margin: -84px 40px 0 auto;
    }
  }
  @media screen and (max-width: 749px) {
    .tryon-sticky {
      position: absolute;
      right: 12px;
      bottom: 40px;
      top: auto;
      left: auto;
      margin: 0;
      z-index: 6;
    }
    /* Tighter inner padding on the mobile try-on button. */
    .tryon-sticky [data-spectrum-feature-slug='virtual_try_on'] .sai-nvy4z5v7__button {
      padding: 8px 14px;
    }
  }

  /* FAQ ask-bot at the foot of the right column: top margin = the column's
     ~20px block gap, no bottom margin, no side padding, and drop the snippet's
     margin-inline:auto so it aligns to the column edges like the other blocks. */
  [data-spectrum-feature-slug='faqs'] .sai-f4qpdp01 {
    margin-block: 20px 0;
    margin-inline: 0;
    padding-inline: 0;
    max-inline-size: none;
  }
  /* Mobile: no top/bottom margin on the bot. */
  @media screen and (max-width: 749px) {
    [data-spectrum-feature-slug='faqs'] .sai-f4qpdp01 {
      margin-block: 0;
    }
  }

  /* Shoppable videos heading: left-align and match the "Shop The Look" heading
     (.stl-heading in section-shop-the-look.css → font-size: 28px; font-weight: 400). */
  [data-spectrum-feature-slug='shoppable_videos'] .sai-svmk8tqx__header {
    text-align: left;
  }
  [data-spectrum-feature-slug='shoppable_videos'] .sai-svmk8tqx__heading {
    font-size: 28px;
    font-weight: 400;
  }
  /* Match the shoppable videos container to the Shop The Look section box:
     full width + left-aligned (drop the centered max-width) and the same
     --page-margin horizontal padding (incl. the 1.5x left inset at >=990px). */
  [data-spectrum-feature-slug='shoppable_videos'] .sai-svmk8tqx__container {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--page-margin, 16px);
  }
  /* Desktop: add a gap above "SEE IT IN MOTION". The root <sai-svmk8tqx> is an
     inline custom element (margins don't apply), so pad the block container. */
  @media screen and (min-width: 750px) {
    [data-spectrum-feature-slug='shoppable_videos'] .sai-svmk8tqx__container {
      padding-top: 96px;
    }
  }
  @media screen and (min-width: 990px) {
    [data-spectrum-feature-slug='shoppable_videos'] .sai-svmk8tqx__container {
      padding-left: calc(var(--page-margin, 40px) * 1.5);
      padding-right: var(--page-margin, 40px);
    }
  }
  /* The video strip has `margin-inline: auto` which centers it when it doesn't
     fill the row (e.g. a single video). Pin it to the start (left) instead. */
  [data-spectrum-feature-slug='shoppable_videos'] .sai-svmk8tqx__grid {
    margin-inline: 0;
  }

  .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);
    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;
      z-index: 3;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:product-recommendations (INDEX:43) */
/* Add space between PDP and this section */
  product-recommendations {
    margin-top: 40px;
  }

  /* Force the carousel to go edge to edge (no page-width gutters) */
  .product-recommendations .resource-list__carousel {
    --gutter-slide-width: 0px !important;
  }

  /* Push the header to the left edge like the carousel */
  .product-recommendations .product-recommendations__header-wrapper {
    position: relative;
    grid-column: 1 / -1;
    padding-left: 40px;
  }

  /* Heading: 40px, all caps */
  .product-recommendations .product-recommendations__header-wrapper h1,
  .product-recommendations .product-recommendations__header-wrapper h2,
  .product-recommendations .product-recommendations__header-wrapper h3,
  .product-recommendations .product-recommendations__header-wrapper h4,
  .product-recommendations .product-recommendations__header-wrapper h5,
  .product-recommendations .product-recommendations__header-wrapper h6,
  .product-recommendations .product-recommendations__header-wrapper p {
    font-size: 40px !important;
    text-transform: uppercase !important;
  }

  /* Nav arrows in the top-right of the heading row */
  .product-recommendations__nav {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
  }

  .product-recommendations__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-foreground);
    transition: opacity 0.2s ease;
  }

  .product-recommendations__nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .product-recommendations__nav-btn .svg-wrapper,
  .product-recommendations__nav-btn svg {
    width: 20px;
    height: 20px;
  }

  /* Hide the built-in carousel overlay arrows */
  .product-recommendations .resource-list__carousel slideshow-container > slideshow-arrows {
    display: none !important;
  }

  /* Mobile: smaller heading, hide nav arrows, tighter spacing */
  @media screen and (max-width: 749px) {
    product-recommendations {
      margin-top: 32px;
    }

    .product-recommendations .product-recommendations__header-wrapper {
      padding-left: 16px;
    }

    .product-recommendations .product-recommendations__header-wrapper h1,
    .product-recommendations .product-recommendations__header-wrapper h2,
    .product-recommendations .product-recommendations__header-wrapper h3,
    .product-recommendations .product-recommendations__header-wrapper h4,
    .product-recommendations .product-recommendations__header-wrapper h5,
    .product-recommendations .product-recommendations__header-wrapper h6,
    .product-recommendations .product-recommendations__header-wrapper p {
      font-size: 28px !important;
    }

    .product-recommendations__nav {
      display: none !important;
    }
  }
/* END_SECTION:product-recommendations */

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

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:51) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:54) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:55) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:56) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

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

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:57) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:58) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:59) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:60) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:61) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:62) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:63) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:64) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:65) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:66) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title__heading,
  .cart-title__heading * {
    font-size: 24px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
  }

  .cart-title__count,
  .cart-title__count * {
    font-size: 24px !important;
    font-weight: inherit;
    text-transform: uppercase !important;
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:69) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:71) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:75) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:76) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:78) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:81) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:82) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:83) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */
    margin-inline: calc(-1 * var(--padding-inline-start));

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:84) */
.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;
    }

    /* Ensure hamburger never shows on desktop */
    .header__drawer {
      display: none !important;
      min-height: 0 !important;
    }
  }

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

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

    &[aria-expanded='true'] .menu-list__link-title {
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
    }

    @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: calc(var(--header-padding) + var(--border-bottom-width, 0px) + 5px);
    margin-bottom: calc(-1 * (var(--header-padding) + var(--border-bottom-width, 0px) + 5px));
  }

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

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

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

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

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

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: 600;
    font-size: 12px;
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: #000000;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    padding: 10px 0;

    &:hover {
      color: #000000;
    }
  }

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

    &:hover {
      color: #000000;
    }
  }

  @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: repeat(var(--menu-columns-tablet), auto);
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), auto);
      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;
  }

  /* Consistent mega menu dropdown height */
  .menu-list__submenu-inner {
    min-height: 50vh;
  }

  /* Custom mega menu images - flex layout */
  .menu-list__submenu-inner:has(.mega-menu-custom-images) {
    flex-wrap: nowrap;
  }

  .menu-list__submenu-inner:has(.mega-menu-custom-images) > .mega-menu {
    flex: 1;
    min-width: 0;
  }

  .mega-menu-custom-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-self: stretch;
    margin-block: calc(-1 * var(--submenu-padding-block-start)) calc(-1 * var(--submenu-padding-block-end));
    margin-inline-end: calc(-1 * var(--section-padding-inline));
    flex-shrink: 0;
    width: 55%;
  }

  .mega-menu-custom-images__item {
    overflow: hidden;
  }

  .mega-menu-custom-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:87) */
image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:91) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

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

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

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

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

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

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

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

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

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

/* START_BLOCK:_product-card-gallery (INDEX:94) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:97) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:102) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:103) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:104) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accelerated-checkout (INDEX:105) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_BLOCK:accelerated-checkout */

/* START_BLOCK:accordion (INDEX:106) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:buy-buttons (INDEX:109) */
.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) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
 
    @media screen and (max-width: 749px) {
      flex: 1 1 0;
      min-width: 0;
    }
  }
 
  .product-form-buttons--stacked
> *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) {
    /* flex-basis: 51%; */
  }
 
  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }
 
  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }
 
  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }
 
  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }
 
  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }
 
  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }
 
  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
 
  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }
 
  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }
 
  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }
 
  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }
 
  .product-form-text__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }
 
  .product__pickup-availabilities {
    width: 100%;
  }
 
  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
 
  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }
 
  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
 
  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }
 
  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }
 
  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }
 
  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }
 
  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }
 
  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }
 
  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }
 
  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }
 
  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }
 
  .pickup-location__h4 {
    margin: 0;
  }
 
  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }
 
  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }
 
  .pickup-location__address {
    font-style: normal;
  }
 
  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }
 
  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }
 
  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }
 
  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }
 
  .volume-pricing__table {
    width: 100%;
  }
 
  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }
 
  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
 
  .volume-pricing__row--odd {
    background: var(--color-background);
  }
 
  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }
 
  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }
 
  button.volume-pricing__toggle {
    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;
  }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:comparison-slider (INDEX:114) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:115) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:116) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

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

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:118) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

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

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

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:120) */
/* Fix for filter drawer z-index during sorting transitions */
  #filters-drawer {
    z-index: 9998 !important;
  }

  #filters-drawer dialog {
    z-index: 9999 !important;
  }

  /* Ensure product grid stays below during transitions */
  .product-grid,
  [product-grid-view] {
    position: relative;
    z-index: 1;
  }

  /* Prevent product cards from jumping above during view transitions */
  ::view-transition-group(product-grid) {
    z-index: 1 !important;
  }

  ::view-transition-old(product-grid),
  ::view-transition-new(product-grid) {
    z-index: 1 !important;
  }

  .facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      grid-column: var(--centered);
      padding-block: 30px;
      min-height:84px;
      padding-inline:0px !important;
    }
  }

  .facets-toggle__grid-controls {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-toggle__grid-controls .column-options-wrapper {
    justify-content: flex-start;
    margin-right: 0;
    margin-left: 0;
  }

  .facets-toggle__grid-mobile {
    display: flex;
  }

  .facets-toggle__grid-desktop {
    display: none;
  }

  .facets-toggle__grid-mobile .column-options__option {
    display: flex;
  }

  .facets-toggle__grid-desktop .column-options__option {
    display: flex;
  }

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

    .facets-toggle__grid-desktop {
      display: flex;
    }
  }

  .facets-toggle__wrapper {
    margin-left: auto;
  }

  .facets-toggle__button {
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 2%;
    font-weight: 400;
    color: #000000;
    white-space: nowrap;
    line-height: 20px;
    font-size: 16px !important;
  }

  @media and screen (max-width: 786px){
    .facets-toggle__button {
    font-size: 10px !important;
    } 

  }

  .facets-toggle__active-count {
    font-weight: var(--font-paragraph--weight);
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  /* drawer dialog is visible on all viewports */

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    padding-block: 0;

    @media screen and (min-width: 1024px) {
      max-width: 33vw;
    }

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;
  }

  .facets--vertical {
    display: none;
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
    font-size: 1rem;
    font-weight: 400;
    color: #000;
  }

  /* Drawer checkbox: square with inner filled square when checked */
  .facets--drawer .checkbox .icon-checkmark {
    border-radius: 0;
    position: relative;
    border: 1px solid;
    margin-top:2px;
  }

  .facets--drawer .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-background);
    border-color: var(--color-foreground);
    border: 1px solid;
    margin-top: 2px
  }

  .facets--drawer .checkbox__input:checked + .checkbox__label .icon-checkmark path {
    opacity: 0;
    border: 1px solid;
    margin-top: 2px

  }

  /* Inner filled square via label::before positioned over the checkbox icon */
  .facets--drawer .checkbox__label {
    position: relative;
  }

  .facets--drawer .checkbox__input:checked + .checkbox__label::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--checkbox-size) / 2);
    transform: translate(-50%, -50%);
    width: calc(var(--checkbox-size) * 0.55);
    height: calc(var(--checkbox-size) * 0.55);
    background-color: var(--color-foreground);
    z-index: 1;
    pointer-events: none;
  }

  /* Remove all outlines/borders/focus rings around checkbox in drawer */
  .facets--drawer .checkbox,
  .facets--drawer .checkbox__label,
  .facets--drawer .checkbox__label[role="checkbox"],
  .facets--drawer .checkbox__label-text {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  .facets--drawer .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: none !important;
  }

  /* Remove all hover effects on checkboxes in drawer */
  .facets--drawer .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: var(--color-foreground);
    background-color: var(--color-background);
  }

  .facets--drawer .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-background);
    border-color: var(--color-foreground);
  }

  .facets--drawer .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: #000;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    z-index: 9999 !important;
  }

  @media screen and (min-width: 750px) {
    .facets--drawer {
      width: 30vw;
    }
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .facets-drawer__filters::-webkit-scrollbar {
    display: none;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--drawer .facets__form-wrapper {
    color: var(--color-foreground);
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-paragraph--size);
    font-weight: var(--font-paragraph--weight);
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 8px;
  }

  .facets--drawer .facets__summary {
    padding-inline: 20px;
    font-size: 1rem;
    font-weight: 400;
    color: #000;

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

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgba(var(--color-foreground-rgb), 0.5);
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* +/- toggle icon for drawer accordion */
  .facets__toggle-icon {
    font-size: 22px;
    font-weight: 300;
    color: #000;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  details[open] > summary .facets__toggle-icon {
    /* Swap + to − when open */
    font-size: 0;
  }

  details[open] > summary .facets__toggle-icon::after {
    content: '−';
    font-size: 1.125rem;
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets--drawer .facets__inputs-wrapper {
    padding-inline: 20px;

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

  .facets--drawer .show-more__button {
    padding-inline: 20px;

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

  .facets--drawer .price-facet__highest-price {
    padding-inline: 20px;

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

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets:not(.facets--drawer) .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

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

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets--drawer .facets__panel {
    padding: 0;
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  .facets--drawer :is(.facets__item, .sorting-filter)::before {
    content: none;
  }

  .facets--vertical :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - 40px);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;

    @media screen and (min-width: 750px) {
      width: calc(100% - 80px);
    }
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: #000;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px 8px 20px;
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title.h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1%;
    text-transform: uppercase;
    color: #000;
  }

  .facets-drawer__title .bubble {
    display: none;
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .facets-drawer__close .svg-wrapper {
    width: 14px;
    height: 14px;
  }

  .facets-drawer__close .svg-wrapper svg {
    width: 14px;
    height: 14px;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets--drawer .facets__status {
    display: none;
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-shrink: 0;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 20px;
    padding: 8px 20px;
    margin-top: auto;
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__drawer-actions .facets__clear-all {
    display: block;
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;
    color: #000;
    background-color: var(--color-background);
    border: 0.5px solid #000;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 1%;
    font-size: 13px;
    font-weight: 400;
    padding-block:10px;
    width:100%;
  }

  .facets__clear-all--active {
    display: block;
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 1;
    }
  }

  .facets__drawer-actions .facets__see-results {
    flex: 1 1 0;
    min-width: 0;
    background-color: #000;
    color: var(--color-background);
    text-transform: uppercase;
    letter-spacing: 1%;
    font-size: 13px;
    font-weight: 400;
    padding-block: 12px;
    border: 1px solid #000;
    border-radius: 0;
    padding-block:10px;
    width:100%
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }

  /* Drawer overrides: black text + lighter font weights */
  .facets--drawer,
  .facets--drawer .facets__form-wrapper,
  .facets--drawer .facets__summary,
  .facets--drawer .facets__label,
  .facets--drawer .facets__status,
  .facets--drawer .checkbox__label-text,
  .facets--drawer .facets__pill-label,
  .facets--drawer .facets__image-label,
  .facets--drawer .variant-option__button-label,
  .facets--drawer .show-more__button,
  .facets--drawer .price-facet__highest-price,
  .facets--drawer .facets__inputs label,
  .facets--drawer .sorting-filter summary {
    color: #000;
    font-weight: 400;
    line-height: 24px
  }

  .facets--drawer input:checked + label {
    font-weight: 400;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:123) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:125) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:126) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

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

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

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

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:129) */
.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);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:131) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:132) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:133) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:price (INDEX:134) */
.tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:price */

/* START_BLOCK:product-custom-property (INDEX:137) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:140) */
/* Product inventory styles */
  .product-inventory {
    display: inline-flex;
    align-items: center;
    padding-block: -8px;
  }

  .product-inventory__status {
    display: flex;
    align-items: center;
    font-size: 11px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.02em;
  }

  .product-inventory__text {
    color: #000000;
    text-transform: uppercase;
    font-weight: 400;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:141) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:145) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:147) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:148) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:149) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:152) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:_sai-artifacts (INDEX:153) */
@property --sai-color-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #121212;
}
@property --sai-color-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --sai-color-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #121212;
}
@property --sai-color-primary-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --sai-color-error {
  syntax: "<color>";
  inherits: true;
  initial-value: #c53030;
}
@property --sai-color-error-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

:where(html) {
  /* ───── Size ramp (open-props inspired) ───── */
  --sai-size-1: .25rem;
  --sai-size-2: .5rem;
  --sai-size-3: .75rem;
  --sai-size-4: 1rem;
  --sai-size-5: 1.5rem;
  --sai-size-6: 2rem;
  --sai-size-7: 3rem;
  --sai-size-8: 4rem;

  /* ───── Radii (numeric + semantic with Shopify bridges) ───── */
  --sai-radius-1: 2px;
  --sai-radius-2: 4px;
  --sai-radius-3: 8px;
  --sai-radius-4: 16px;
  --sai-radius-round: 999px;

  --sai-radius-sm: var(--sai-radius-1);
  /* Opportunistic bridge to Shopify where ~universal */
  --sai-radius-md: var(--buttons-radius, var(--sai-radius-2));
  --sai-radius-lg: var(--media-radius, var(--sai-radius-3));

  /* ───── Shadows (primitive + derived) ───── */
  --sai-shadow-color: 220 3% 15%;
  --sai-shadow-strength: 1%;
  --sai-shadow-1: 0 1px 2px -1px
    hsl(var(--sai-shadow-color) / calc(9% + var(--sai-shadow-strength)));
  --sai-shadow-2: 0 3px 5px -2px
    hsl(var(--sai-shadow-color) / calc(9% + var(--sai-shadow-strength)));
  --sai-shadow-3: 0 8px 16px -4px
    hsl(var(--sai-shadow-color) / calc(10% + var(--sai-shadow-strength)));

  /* ───── Motion ───── */
  --sai-ease-out-1: cubic-bezier(0.25, 0, 0.3, 1);
  --sai-ease-in-out-1: cubic-bezier(0.5, 0, 0.5, 1);
  --sai-ease-elastic: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  --sai-duration-1: 120ms;
  --sai-duration-2: 200ms;
  --sai-duration-3: 320ms;

  /* ───── Layout ───── */
  --sai-page-width: var(--page-width, 120rem);

  /* Color bridges — chained bets across Shopify conventions, terminating in
     Spectrum literals. Authors reference --sai-color-* only. Values resolve
     inside a .color-{scheme.id} scope (inherited from the host Shopify
     section); outside that scope the literal fallback wins. */
  --sai-color-bg: var(--color-body-background, rgb(var(--color-background, 255, 255, 255)));
  --sai-color-fg: var(--color-text, rgb(var(--color-foreground, 18, 18, 18)));
  --sai-color-primary: var(--color-button, rgb(var(--color-primary, 18, 18, 18)));
  --sai-color-primary-fg: var(
    --color-button-text,
    rgb(var(--color-primary-contrast, 255, 255, 255))
  );
  --sai-color-link: var(--color-link, var(--sai-color-primary));
  --sai-color-error: var(--color-error, #c53030);
  --sai-color-error-fg: var(--color-error-contrast, #ffffff);

  /* Typography bridges — Dawn-ish names with `inherit` as terminus so snippets
     gracefully pick up ancestor typography on any theme. */
  --sai-font-body: var(--font-body-family, inherit);
  --sai-font-body-style: var(--font-body-style, inherit);
  --sai-font-body-weight: var(--font-body-weight, inherit);
  --sai-font-body-weight-bold: var(--font-body-weight-bold, 700);
  --sai-font-heading: var(--font-heading-family, var(--sai-font-body));
  --sai-font-heading-style: var(--font-heading-style, inherit);
  --sai-font-heading-weight: var(--font-heading-weight, bold);
}

/* Full-bleed section breakout. Opt-in per instance: the per-instance wrapper
   sets data-spectrum-section-width="full" only when the default variant's
   content requests it, so instances that don't opt in never match this rule
   and stay byte-identical. The margin recipe pulls the section to the viewport
   edges from inside any centered constrained ancestor (the common page-width
   column) — 50% resolves against the ancestor's content box, 50vw against the
   viewport, so a centered column yields exactly the left/right viewport edges.
   Backgrounds live on the snippet root (width:100% of this wrapper), so they
   fill the bleed; content stays a centered column via the snippet's own inner
   max-width. 100vw includes the scrollbar gutter, so on classic (non-overlay)
   scrollbars the widened box overhangs by ~scrollbar-width; clipping the
   section itself would only clip its own content, not the page scroll it
   induces, so the root guard below clips the page instead. */
[data-spectrum-instance-id][data-spectrum-section-width="full"] {
  box-sizing: border-box;
  inline-size: 100vw;
  max-inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Root x-overflow guard for the breakout above. Global selector is deliberate
   and tightly scoped: :has() limits it to pages that actually contain an
   active full-bleed instance — every other page is untouched. `clip` (not
   `hidden`) so the root never becomes a scroll container and sticky/fixed
   descendants keep working. Engines without :has() skip the rule and degrade
   to ~scrollbar-width of horizontal overflow — never worse than no guard. */
html:has([data-spectrum-instance-id][data-spectrum-section-width="full"]) {
  overflow-x: clip;
}

/* Shared spinner utility — sized by --sai-spinner-size (default 1em).
   Color via --sai-spinner-color. Respects prefers-reduced-motion. */
.sai-spinner {
  --sai-spinner-size: 1em;
  --sai-spinner-color: currentColor;
  --sai-spinner-track: color-mix(in srgb, currentColor 25%, transparent);
  --sai-spinner-thickness: 2px;
  --sai-spinner-speed: 0.8s;

  display: inline-block;
  width: var(--sai-spinner-size);
  height: var(--sai-spinner-size);
  border: var(--sai-spinner-thickness) solid var(--sai-spinner-track);
  border-top-color: var(--sai-spinner-color);
  border-radius: 50%;
  animation: sai-spinner-spin var(--sai-spinner-speed) linear infinite;
  vertical-align: middle;
}

@keyframes sai-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sai-spinner {
    animation-duration: 2.4s;
  }
}
/* END_SNIPPET:_sai-artifacts */

/* START_SNIPPET:_sai-snippet-askpdp01 (INDEX:159) */
/* PDP Ask AI — conversational widget (askpdp01) */

.sai-askpdp01 {
  --sai-askpdp01-accent: var(--sai-color-primary, #2563eb);
  --sai-askpdp01-accent-fg: var(--sai-color-primary-fg, #ffffff);
  /* AI-mark gradient — brand accent, also overridable per-instance via props. */
  --sai-askpdp01-mark: linear-gradient(135deg, #0fbfa8, #2563eb);
  /* Neutral chrome is derived from the theme's fg/bg (not hardcoded greys) so
     the widget adapts to any storefront theme, including dark. color-mix is
     Interop-baseline. */
  --sai-askpdp01-card: var(--sai-color-bg);
  --sai-askpdp01-card-border: color-mix(in srgb, var(--sai-color-fg) 10%, transparent);
  --sai-askpdp01-hairline: color-mix(in srgb, var(--sai-color-fg) 8%, transparent);
  --sai-askpdp01-hairline-soft: color-mix(in srgb, var(--sai-color-fg) 5%, transparent);
  --sai-askpdp01-bubble: color-mix(in srgb, var(--sai-color-fg) 5%, var(--sai-color-bg));
  --sai-askpdp01-bubble-border: color-mix(in srgb, var(--sai-color-fg) 9%, transparent);
  --sai-askpdp01-title: var(--sai-color-fg);
  --sai-askpdp01-answer-fg: var(--sai-color-fg);
  --sai-askpdp01-muted: color-mix(in srgb, var(--sai-color-fg) 60%, transparent);
  --sai-askpdp01-faint: color-mix(in srgb, var(--sai-color-fg) 45%, transparent);
  --sai-askpdp01-chip-fg: color-mix(in srgb, var(--sai-color-fg) 85%, transparent);
  --sai-askpdp01-chip-border: color-mix(in srgb, var(--sai-color-fg) 12%, transparent);
  --sai-askpdp01-chip-border-strong: color-mix(in srgb, var(--sai-color-fg) 18%, transparent);
  --sai-askpdp01-input-border: color-mix(in srgb, var(--sai-color-fg) 14%, transparent);
  --sai-askpdp01-placeholder: color-mix(in srgb, var(--sai-color-fg) 40%, transparent);
  --sai-askpdp01-err-fg: var(--sai-color-error);
  --sai-askpdp01-err-bg: color-mix(in srgb, var(--sai-color-error) 8%, var(--sai-color-bg));
  --sai-askpdp01-err-border: color-mix(in srgb, var(--sai-color-error) 25%, transparent);
  --sai-askpdp01-err-avatar: color-mix(in srgb, var(--sai-color-error) 18%, var(--sai-color-bg));
  --sai-askpdp01-err-btn-border: color-mix(in srgb, var(--sai-color-error) 40%, transparent);
  --sai-askpdp01-err-btn-hover: color-mix(in srgb, var(--sai-color-error) 10%, var(--sai-color-bg));

  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 540px;
  margin-inline: auto;
  margin-block: var(--sai-size-7);
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sai-askpdp01-title);
}

.sai-askpdp01 *,
.sai-askpdp01 *::before,
.sai-askpdp01 *::after {
  box-sizing: border-box;
}

.sai-askpdp01__card {
  display: flex;
  flex-direction: column;
  background: var(--sai-askpdp01-card);
  border: 1px solid var(--sai-askpdp01-card-border);
  border-radius: 18px;
  /* Soft (default). Shadow tint is theme-derived; merchants pick soft/strong/
     none via the `card_shadow` prop (modifier classes below). */
  box-shadow: 0 1px 3px color-mix(in srgb, var(--sai-color-fg) 8%, transparent),
    0 12px 38px color-mix(in srgb, var(--sai-color-fg) 9%, transparent);
  overflow: hidden;
}

.sai-askpdp01__card--shadow-none {
  box-shadow: none;
}

.sai-askpdp01__card--shadow-strong {
  box-shadow: 0 2px 6px color-mix(in srgb, var(--sai-color-fg) 12%, transparent),
    0 20px 50px color-mix(in srgb, var(--sai-color-fg) 16%, transparent);
}

.sai-askpdp01__card[hidden] {
  display: none;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.sai-askpdp01__header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  border-block-end: 1px solid var(--sai-askpdp01-hairline);
}

.sai-askpdp01__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 10px;
  background: var(--sai-askpdp01-mark);
  color: #ffffff;
}

.sai-askpdp01__avatar svg,
.sai-askpdp01__avatar img {
  inline-size: 18px;
  block-size: 18px;
  object-fit: contain;
}

.sai-askpdp01__title {
  margin: 0;
  font-family: var(--sai-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sai-askpdp01-title);
}

.sai-askpdp01__status {
  margin-block-start: 2px;
}

.sai-askpdp01__status-text {
  font-size: 12px;
  color: var(--sai-askpdp01-muted);
}

/* ── Conversation body ────────────────────────────────────────────────────── */

.sai-askpdp01__body {
  padding: 16px 18px;
  min-block-size: 0;
  max-block-size: 320px;
  overflow-y: auto;
}

/* The last row keeps its inter-message bottom margin otherwise, leaving a gap
   above the input. Collapse it so the conversation sits flush. */
.sai-askpdp01__body > :last-child {
  margin-block-end: 0;
}

.sai-askpdp01__user {
  display: flex;
  justify-content: flex-end;
  margin-block-end: 12px;
}

.sai-askpdp01__user-bubble {
  max-inline-size: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  border-end-end-radius: 4px;
  background: var(--sai-askpdp01-accent);
  color: var(--sai-askpdp01-accent-fg);
  font-size: 14px;
  line-height: 1.5;
}

.sai-askpdp01__row {
  display: flex;
  gap: 10px;
  margin-block-end: 14px;
}

.sai-askpdp01__row--answer,
.sai-askpdp01__row--error {
  animation: sai-askpdp01-fade 0.25s ease;
}

.sai-askpdp01__bot-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 8px;
  background: var(--sai-askpdp01-mark);
  color: #ffffff;
}

.sai-askpdp01__bot-avatar svg,
.sai-askpdp01__bot-avatar img {
  inline-size: 15px;
  block-size: 15px;
  object-fit: contain;
}

.sai-askpdp01__typing {
  display: flex;
  gap: 4px;
  padding: 13px 15px;
  border-radius: 14px;
  border-start-start-radius: 4px;
  background: var(--sai-askpdp01-bubble);
  border: 1px solid var(--sai-askpdp01-bubble-border);
}

.sai-askpdp01__typing span {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--sai-askpdp01-faint);
  animation: sai-askpdp01-blink 1.2s infinite;
}

.sai-askpdp01__typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.sai-askpdp01__typing span:nth-child(3) {
  animation-delay: 0.4s;
}

.sai-askpdp01__answer {
  flex: 1;
  padding: 11px 14px;
  border-radius: 14px;
  border-start-start-radius: 4px;
  background: var(--sai-askpdp01-bubble);
  border: 1px solid var(--sai-askpdp01-bubble-border);
  color: var(--sai-askpdp01-answer-fg);
  font-size: 14px;
  line-height: 1.55;
}

.sai-askpdp01__answer > :first-child {
  margin-block-start: 0;
}
.sai-askpdp01__answer > :last-child {
  margin-block-end: 0;
}

.sai-askpdp01__err-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 8px;
  background: var(--sai-askpdp01-err-avatar);
  color: var(--sai-askpdp01-err-fg);
  font-size: 15px;
  font-weight: 700;
}

.sai-askpdp01__err {
  flex: 1;
  padding: 11px 14px;
  border-radius: 14px;
  border-start-start-radius: 4px;
  background: var(--sai-askpdp01-err-bg);
  border: 1px solid var(--sai-askpdp01-err-border);
  color: var(--sai-askpdp01-err-fg);
  font-size: 14px;
  line-height: 1.5;
}

.sai-askpdp01__err-msg {
  margin-block-end: 9px;
}

.sai-askpdp01__retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--sai-askpdp01-err-btn-border);
  border-radius: 8px;
  background: var(--sai-color-bg);
  color: var(--sai-askpdp01-err-fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sai-askpdp01__retry svg {
  inline-size: 14px;
  block-size: 14px;
}

.sai-askpdp01__retry:hover {
  background: var(--sai-askpdp01-err-btn-hover);
}

/* ── Suggested-question chips ──────────────────────────────────────────────── */

.sai-askpdp01__chips[hidden] {
  display: none;
}

.sai-askpdp01__chips-label {
  margin-block-end: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sai-askpdp01-faint);
}

.sai-askpdp01__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sai-askpdp01__chip {
  padding: 8px 13px;
  border: 1px solid var(--sai-askpdp01-chip-border);
  border-radius: 999px;
  background: var(--sai-color-bg);
  color: var(--sai-askpdp01-chip-fg);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--sai-duration-1) var(--sai-ease-out-1), border-color
    var(--sai-duration-1) var(--sai-ease-out-1);
}

.sai-askpdp01__chip:hover {
  background: var(--sai-askpdp01-hairline-soft);
  border-color: var(--sai-askpdp01-chip-border-strong);
}

/* ── Input row ────────────────────────────────────────────────────────────── */

.sai-askpdp01__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-block-start: 1px solid var(--sai-askpdp01-hairline);
}

.sai-askpdp01 .sai-askpdp01__input {
  flex: 1;
  min-inline-size: 0;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--sai-askpdp01-input-border);
  border-radius: 12px;
  outline: none;
  /* Reset theme-injected input chrome (Dawn adds a focus box-shadow halo and
     native appearance) so only our border communicates focus. */
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  background: var(--sai-color-bg);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sai-askpdp01-title);
}

.sai-askpdp01__input::placeholder {
  color: var(--sai-askpdp01-placeholder);
}

.sai-askpdp01 .sai-askpdp01__input:focus,
.sai-askpdp01 .sai-askpdp01__input:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--sai-askpdp01-accent);
}

.sai-askpdp01 .sai-askpdp01__input[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.sai-askpdp01 .sai-askpdp01__send {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border: none;
  border-radius: 12px;
  background: var(--sai-askpdp01-accent);
  color: var(--sai-askpdp01-accent-fg);
  cursor: pointer;
  transition: filter var(--sai-duration-1) var(--sai-ease-out-1);
}

.sai-askpdp01__send svg {
  inline-size: 18px;
  block-size: 18px;
}

.sai-askpdp01__send:hover {
  filter: brightness(0.93);
}

.sai-askpdp01 .sai-askpdp01__send[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.sai-askpdp01__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 18px 14px;
}

.sai-askpdp01__footer[hidden] {
  display: none;
}

.sai-askpdp01__powered {
  font-size: 11px;
  font-weight: 500;
  color: var(--sai-askpdp01-faint);
}

.sai-askpdp01__brand-link,
.sai-askpdp01__brand-link:hover,
.sai-askpdp01__brand-link:focus,
.sai-askpdp01__brand-link:active,
.sai-askpdp01__brand-link:visited {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.sai-askpdp01__brand-logo {
  display: block;
  block-size: 11px;
  inline-size: auto;
  /* Grayish (~#3D3C3D on light themes). The color is set on the logo element
     itself, so link :active/:visited/:hover never recolors it. */
  color: color-mix(in srgb, var(--sai-color-fg) 76%, transparent);
}

.sai-askpdp01__footer-sep {
  font-size: 11px;
  color: color-mix(in srgb, var(--sai-color-fg) 25%, transparent);
}

.sai-askpdp01__disclaimer {
  font-size: 11px;
  color: var(--sai-askpdp01-faint);
}

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes sai-askpdp01-blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes sai-askpdp01-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sai-askpdp01__chip,
  .sai-askpdp01__send {
    transition: none;
  }
  .sai-askpdp01__row--answer,
  .sai-askpdp01__row--error,
  .sai-askpdp01__typing span {
    animation: none;
  }
}
/* END_SNIPPET:_sai-snippet-askpdp01 */

/* START_SNIPPET:_sai-snippet-epda7k2m (INDEX:160) */
/* Enriched Product Description Accordion (epda7k2m) */

.sai-epda7k2m {
  --sai-epda7k2m-max-width: 64rem;
  --sai-epda7k2m-divider: rgba(0, 0, 0, 0.12);
  --sai-epda7k2m-clamp-height: 12rem;
  --sai-epda7k2m-fade-height: 4rem;

  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--sai-epda7k2m-max-width);
  margin-inline: auto;
  margin-block: var(--sai-size-5);
  padding-inline: var(--sai-size-4);
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sai-color-fg);
}

.sai-epda7k2m__container {
  display: block;
}

/* ── Accordion item ───────────────────────────────────────────────────────── */

.sai-epda7k2m__item {
  border-block-start: 1px solid var(--sai-epda7k2m-divider);
  border-block-end: 1px solid var(--sai-epda7k2m-divider);
}

.sai-epda7k2m__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sai-size-3);
  padding-block: var(--sai-size-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.sai-epda7k2m__summary::-webkit-details-marker {
  display: none;
}

.sai-epda7k2m__heading {
  margin: 0;
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--sai-color-fg);
}

.sai-epda7k2m__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--sai-color-fg);
  transition: transform 160ms ease;
}

.sai-epda7k2m__chevron-bar {
  display: block;
}

.sai-epda7k2m__chevron-bar--vertical {
  display: block;
}

.sai-epda7k2m__item:not([open]) .sai-epda7k2m__chevron-bar--vertical {
  display: block;
}

.sai-epda7k2m__item[open] .sai-epda7k2m__chevron-bar--vertical {
  display: none;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.sai-epda7k2m__body {
  position: relative;
  padding-block-end: var(--sai-size-5);
  color: var(--sai-color-fg);
}

/* Prose styles — opinionated but minimal; PCE rarely emits tables but we
   style them defensively so the rare case looks acceptable across themes. */

.sai-epda7k2m__body > :first-child {
  margin-block-start: 0;
}

.sai-epda7k2m__body > :last-child {
  margin-block-end: 0;
}

.sai-epda7k2m__body p {
  margin-block: var(--sai-size-3);
}

.sai-epda7k2m__body h2,
.sai-epda7k2m__body h3,
.sai-epda7k2m__body h4 {
  margin-block: var(--sai-size-4) var(--sai-size-2);
  font-family: var(--sai-font-heading);
  font-weight: var(--sai-font-heading-weight);
  line-height: 1.3;
}

.sai-epda7k2m__body h2 { font-size: 1.25rem; }
.sai-epda7k2m__body h3 { font-size: 1.125rem; }
.sai-epda7k2m__body h4 { font-size: 1rem; }

.sai-epda7k2m__body ul,
.sai-epda7k2m__body ol {
  margin-block: var(--sai-size-3);
  padding-inline-start: 1.5rem;
}

.sai-epda7k2m__body li {
  margin-block: var(--sai-size-1);
}

.sai-epda7k2m__body a {
  color: inherit;
  text-decoration: underline;
}

.sai-epda7k2m__body strong {
  font-weight: 600;
}

.sai-epda7k2m__body table {
  width: 100%;
  margin-block: var(--sai-size-3);
  border-collapse: collapse;
  border: 1px solid var(--sai-epda7k2m-divider);
}

.sai-epda7k2m__body th,
.sai-epda7k2m__body td {
  padding: var(--sai-size-2) var(--sai-size-3);
  border: 1px solid var(--sai-epda7k2m-divider);
  text-align: start;
  vertical-align: top;
}

.sai-epda7k2m__body th {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.03);
}

.sai-epda7k2m__body img {
  max-inline-size: 100%;
  block-size: auto;
}

/* ── Partially-open state ─────────────────────────────────────────────────── */

/* Body is clamped + faded; the inline CTA expands to full content. The
   data-state attribute is removed in JS once the merchant clicks the CTA,
   which reverts the body to its open height. */

.sai-epda7k2m__item[data-state="partially_open"] .sai-epda7k2m__body {
  max-block-size: var(--sai-epda7k2m-clamp-height);
  overflow: hidden;
  padding-block-end: calc(var(--sai-size-5) + var(--sai-epda7k2m-fade-height));
}

.sai-epda7k2m__item[data-state="partially_open"] .sai-epda7k2m__body::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--sai-epda7k2m-fade-height);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    var(--sai-color-bg, #fff)
  );
  pointer-events: none;
}

.sai-epda7k2m__expand-cta {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--sai-size-2);
  margin-inline: auto;
  display: inline-block;
  padding: var(--sai-size-2) var(--sai-size-4);
  background: transparent;
  border: 1px solid var(--sai-epda7k2m-divider);
  border-radius: 9999px;
  font-family: var(--sai-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sai-color-fg);
  cursor: pointer;
  z-index: 1;
  inline-size: max-content;
}

.sai-epda7k2m__expand-cta:hover,
.sai-epda7k2m__expand-cta:focus-visible {
  background: rgba(0, 0, 0, 0.04);
}

.sai-epda7k2m__expand-cta:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sai-epda7k2m__chevron {
    transition: none;
  }
}
/* END_SNIPPET:_sai-snippet-epda7k2m */

/* START_SNIPPET:_sai-snippet-epdsb4n7 (INDEX:161) */
/* Enriched Product Description Standalone (epdsb4n7) */

.sai-epdsb4n7 {
  --sai-epdsb4n7-max-width: 64rem;
  --sai-epdsb4n7-divider: rgba(0, 0, 0, 0.12);

  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--sai-epdsb4n7-max-width);
  margin-inline: auto;
  margin-block: var(--sai-size-5);
  padding-inline: var(--sai-size-4);
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sai-color-fg);
}

.sai-epdsb4n7__container {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-3);
}

.sai-epdsb4n7__heading {
  margin: 0;
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--sai-color-fg);
}

.sai-epdsb4n7__body {
  color: var(--sai-color-fg);
}

/* Prose styles — kept in sync with the accordion variant (epda7k2m) so
   merchants can swap between the two snippets without visual drift. */

.sai-epdsb4n7__body > :first-child {
  margin-block-start: 0;
}

.sai-epdsb4n7__body > :last-child {
  margin-block-end: 0;
}

.sai-epdsb4n7__body p {
  margin-block: var(--sai-size-3);
}

.sai-epdsb4n7__body h2,
.sai-epdsb4n7__body h3,
.sai-epdsb4n7__body h4 {
  margin-block: var(--sai-size-4) var(--sai-size-2);
  font-family: var(--sai-font-heading);
  font-weight: var(--sai-font-heading-weight);
  line-height: 1.3;
}

.sai-epdsb4n7__body h2 { font-size: 1.25rem; }
.sai-epdsb4n7__body h3 { font-size: 1.125rem; }
.sai-epdsb4n7__body h4 { font-size: 1rem; }

.sai-epdsb4n7__body ul,
.sai-epdsb4n7__body ol {
  margin-block: var(--sai-size-3);
  padding-inline-start: 1.5rem;
}

.sai-epdsb4n7__body li {
  margin-block: var(--sai-size-1);
}

.sai-epdsb4n7__body a {
  color: inherit;
  text-decoration: underline;
}

.sai-epdsb4n7__body strong {
  font-weight: 600;
}

.sai-epdsb4n7__body table {
  width: 100%;
  margin-block: var(--sai-size-3);
  border-collapse: collapse;
  border: 1px solid var(--sai-epdsb4n7-divider);
}

.sai-epdsb4n7__body th,
.sai-epdsb4n7__body td {
  padding: var(--sai-size-2) var(--sai-size-3);
  border: 1px solid var(--sai-epdsb4n7-divider);
  text-align: start;
  vertical-align: top;
}

.sai-epdsb4n7__body th {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.03);
}

.sai-epdsb4n7__body img {
  max-inline-size: 100%;
  block-size: auto;
}
/* END_SNIPPET:_sai-snippet-epdsb4n7 */

/* START_SNIPPET:_sai-snippet-f4qpdp01 (INDEX:162) */
/* PDP FAQs (f4qpdp01) */

.sai-f4qpdp01 {
  --sai-f4qpdp01-gap: var(--sai-size-5);
  --sai-f4qpdp01-max-width: 64rem;
  --sai-f4qpdp01-divider: rgba(0, 0, 0, 0.12);
  --sai-f4qpdp01-divider-strong: rgba(0, 0, 0, 0.22);
  --sai-f4qpdp01-surface: rgba(0, 0, 0, 0.04);
  --sai-f4qpdp01-surface-hover: rgba(0, 0, 0, 0.06);
  --sai-f4qpdp01-focus-ring: rgba(0, 0, 0, 0.08);
  --sai-f4qpdp01-spectral-1: #8b5cf6;
  --sai-f4qpdp01-spectral-2: #3b82f6;
  --sai-f4qpdp01-spectral-3: #14b8a6;
  --sai-f4qpdp01-spectral-4: #22c55e;
  --sai-f4qpdp01-spectral-5: #f59e0b;
  --sai-f4qpdp01-spectral-6: #ef4444;

  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--sai-f4qpdp01-max-width);
  margin-inline: auto;
  margin-block: var(--sai-size-7);
  padding-inline: var(--sai-size-4);
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sai-color-fg);
}

.sai-f4qpdp01__container {
  display: flex;
  flex-direction: column;
  gap: var(--sai-f4qpdp01-gap);
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.sai-f4qpdp01__header {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-2);
}

.sai-f4qpdp01__heading {
  margin: 0;
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--sai-color-fg);
}

.sai-f4qpdp01__subheading {
  margin: 0;
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--sai-color-fg);
  opacity: 0.7;
}

/* ── Accordion ─────────────────────────────────────────────────────────────── */

.sai-f4qpdp01__accordion {
  display: flex;
  flex-direction: column;
  border-block-start: 1px solid var(--sai-f4qpdp01-divider);
}

.sai-f4qpdp01__item {
  border-block-end: 1px solid var(--sai-f4qpdp01-divider);
}

.sai-f4qpdp01__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sai-size-4);
  padding: var(--sai-size-5) var(--sai-size-2);
  cursor: pointer;
  list-style: none;
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight-bold);
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--sai-color-fg);
}

.sai-f4qpdp01__summary::-webkit-details-marker,
.sai-f4qpdp01__summary::marker {
  display: none;
  content: "";
}

.sai-f4qpdp01__summary:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
  border-radius: var(--sai-radius-sm);
}

.sai-f4qpdp01__question {
  flex: 1;
}

.sai-f4qpdp01__chevron {
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  opacity: 0.6;
  transition: transform var(--sai-duration-2) var(--sai-ease-out-1), opacity var(--sai-duration-1)
    var(--sai-ease-out-1);
}

.sai-f4qpdp01__chevron svg {
  inline-size: 100%;
  block-size: 100%;
}

/* (The `[open]` chevron rotation rule is defined alongside the
   ::details-content block above — no second rule needed here.) */

/* Pure-CSS open/close animation via the spec-defined ::details-content
   pseudo-element (Interop 2024; Chrome 131+, Safari 18.2+, Firefox 134+).
   `interpolate-size: allow-keywords` lets `block-size` transition between
   0 and `auto`. `content-visibility: visible/hidden` flips at endpoints
   via `transition-behavior: allow-discrete` so layout/paint are skipped
   while collapsed but the transition still runs.
   No JS, no extra wrapper element. Falls back to instant toggle on
   browsers that don't support ::details-content. */
.sai-f4qpdp01__item {
  /* biome-ignore lint/correctness/noUnknownProperty: interpolate-size is
     a 2024 CSS spec property that biome's stylesheet validator doesn't
     yet recognize. Required for transitioning block-size: 0 ↔ auto. */
  interpolate-size: allow-keywords;
}

.sai-f4qpdp01__item::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: content-visibility var(--sai-duration-3) allow-discrete, block-size
    var(--sai-duration-3) var(--sai-ease-out-1), opacity var(--sai-duration-3) var(--sai-ease-out-1);
}

.sai-f4qpdp01__item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.sai-f4qpdp01__item[open] .sai-f4qpdp01__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.sai-f4qpdp01__answer {
  padding: 0 var(--sai-size-2) var(--sai-size-5) var(--sai-size-2);
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sai-color-fg);
  opacity: 0.8;
}

.sai-f4qpdp01__answer > :first-child {
  margin-block-start: 0;
}
.sai-f4qpdp01__answer > :last-child {
  margin-block-end: 0;
}

/* ── Ask block ─────────────────────────────────────────────────────────────── */

.sai-f4qpdp01__ask {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-4);
  padding: var(--sai-size-5);
  border: 1px solid var(--sai-f4qpdp01-divider);
  border-radius: var(--sai-radius-lg);
  background: var(--sai-f4qpdp01-surface);
}

.sai-f4qpdp01__ask-header {
  display: flex;
  align-items: center;
  gap: var(--sai-size-3);
}

.sai-f4qpdp01__sparkles {
  display: inline-flex;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--sai-color-fg);
}

.sai-f4qpdp01__sparkles svg {
  inline-size: 100%;
  block-size: 100%;
}

.sai-f4qpdp01__qa-heading {
  margin: 0;
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--sai-color-fg);
}

@property --sai-f4qpdp01-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes sai-f4qpdp01-spectral {
  from {
    --sai-f4qpdp01-angle: 0deg;
  }
  to {
    --sai-f4qpdp01-angle: 360deg;
  }
}

.sai-f4qpdp01__form {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--sai-size-2);
  padding: var(--sai-size-2) var(--sai-size-2) var(--sai-size-2) var(--sai-size-5);
  border: 1px solid var(--sai-f4qpdp01-divider-strong);
  border-radius: var(--sai-radius-round);
  background: var(--sai-color-bg);
  transition: border-color var(--sai-duration-1) var(--sai-ease-out-1), box-shadow
    var(--sai-duration-1) var(--sai-ease-out-1);
}

.sai-f4qpdp01__form::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--sai-f4qpdp01-angle),
    var(--sai-f4qpdp01-spectral-1) 0deg,
    var(--sai-f4qpdp01-spectral-2) 15deg,
    var(--sai-f4qpdp01-spectral-3) 30deg,
    var(--sai-f4qpdp01-spectral-4) 45deg,
    var(--sai-f4qpdp01-spectral-5) 60deg,
    var(--sai-f4qpdp01-spectral-6) 75deg,
    transparent 90deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sai-f4qpdp01-spectral 3s linear infinite;
  pointer-events: none;
  z-index: -1;
}

.sai-f4qpdp01__form:focus-within {
  outline: 0;
  border-color: var(--sai-color-fg);
  box-shadow: 0 0 0 3px var(--sai-f4qpdp01-focus-ring);
}

.sai-f4qpdp01__form:focus-within::before {
  padding: 2.5px;
  inset: -2.5px;
}

.sai-f4qpdp01 .sai-f4qpdp01__input {
  flex: 1;
  box-sizing: border-box;
  min-inline-size: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  background-color: transparent;
  border-color: transparent;
  padding: 0;
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--sai-color-fg);
}

.sai-f4qpdp01__input::placeholder {
  color: var(--sai-color-fg);
  opacity: 0.5;
}

.sai-f4qpdp01 .sai-f4qpdp01__input:focus,
.sai-f4qpdp01 .sai-f4qpdp01__input:focus-visible {
  outline: 0;
  box-shadow: none;
  border: 0;
  background-color: transparent;
}

.sai-f4qpdp01 .sai-f4qpdp01__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 0;
  border-radius: var(--sai-radius-round);
  cursor: pointer;
  background: var(--sai-color-primary);
  background-color: var(--sai-color-primary);
  color: var(--sai-color-primary-fg);
  transition: opacity var(--sai-duration-1) var(--sai-ease-out-1), transform var(--sai-duration-1)
    var(--sai-ease-out-1);
}

.sai-f4qpdp01__send svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: inherit;
}

.sai-f4qpdp01__send:hover {
  opacity: 0.88;
}
.sai-f4qpdp01__send:active {
  transform: scale(0.96);
}

.sai-f4qpdp01 .sai-f4qpdp01__send[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--sai-color-primary);
  background-color: var(--sai-color-primary);
  color: var(--sai-color-primary-fg);
}

.sai-f4qpdp01 .sai-f4qpdp01__input[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  background-color: transparent;
  color: var(--sai-color-fg);
  -webkit-text-fill-color: var(--sai-color-fg);
}

/* ── Exchange (single Q+A turn — replaces on each new submit) ──────────────── */

.sai-f4qpdp01__exchange {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-3);
}

.sai-f4qpdp01__exchange-question {
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight-bold);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--sai-color-fg);
  opacity: 0.75;
}

.sai-f4qpdp01__exchange-answer {
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sai-color-fg);
}

.sai-f4qpdp01__exchange-answer > :first-child {
  margin-block-start: 0;
}
.sai-f4qpdp01__exchange-answer > :last-child {
  margin-block-end: 0;
}

.sai-f4qpdp01__feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 12px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--sai-f4qpdp01-divider);
  font-family: var(--sai-font-body);
}
.sai-f4qpdp01__feedback-label {
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--sai-color-fg) 55%, transparent);
}
.sai-f4qpdp01__feedback-btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--sai-f4qpdp01-divider-strong);
  background: transparent;
  color: color-mix(in srgb, var(--sai-color-fg) 85%, transparent);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 6px 14px;
  border-radius: 999px;
  transition: border-color 120ms ease, color 120ms ease;
}
.sai-f4qpdp01__feedback-btn:hover {
  border-color: var(--sai-f4qpdp01-divider-strong);
}
.sai-f4qpdp01__feedback-btn--active {
  border-color: var(--sai-color-primary);
  color: var(--sai-color-primary);
}
.sai-f4qpdp01__feedback[data-voted] .sai-f4qpdp01__feedback-btn:not(.sai-f4qpdp01__feedback-btn--active) {
  opacity: 0.45;
  cursor: default;
}

/* Shimmer skeleton — two lines while waiting for the response. */
.sai-f4qpdp01__shimmer {
  display: block;
}

/* `:empty` qualifier overrides theme resets that hide empty divs
   (e.g. `div:empty { display: none }` in many Shopify themes). The
   shimmer divs intentionally have no content. */
.sai-f4qpdp01__shimmer-line,
.sai-f4qpdp01__shimmer-line:empty {
  display: block;
  box-sizing: border-box;
  block-size: 1rem;
  min-block-size: 1rem;
  margin-block-end: var(--sai-size-2);
  border-radius: var(--sai-radius-sm);
  background: var(--sai-f4qpdp01-divider-strong);
  animation: sai-f4qpdp01-shimmer 1.2s ease-in-out infinite;
}

.sai-f4qpdp01__shimmer-line:last-child {
  margin-block-end: 0;
}

.sai-f4qpdp01__shimmer-line:nth-child(1) {
  inline-size: 80%;
}
.sai-f4qpdp01__shimmer-line:nth-child(2) {
  inline-size: 60%;
}

@keyframes sai-f4qpdp01-shimmer {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Error state with optional retry. */
.sai-f4qpdp01__exchange-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sai-size-3);
  font-family: var(--sai-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sai-color-error);
}

.sai-f4qpdp01__retry {
  display: inline-flex;
  align-items: center;
  gap: var(--sai-size-1);
  border: 1px solid var(--sai-color-error);
  border-radius: var(--sai-radius-md);
  padding: var(--sai-size-1) var(--sai-size-3);
  cursor: pointer;
  background: transparent;
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight-bold);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--sai-color-error);
  transition: background var(--sai-duration-1) var(--sai-ease-out-1);
}

.sai-f4qpdp01__retry:hover {
  background: var(--sai-f4qpdp01-surface-hover);
}

/* Follow-up suggestion chips, rendered under the success state. */
.sai-f4qpdp01__followups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sai-size-2);
}

.sai-f4qpdp01__followup {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sai-f4qpdp01-divider);
  border-radius: var(--sai-radius-md);
  padding: var(--sai-size-2) var(--sai-size-4);
  cursor: pointer;
  background: var(--sai-color-bg);
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--sai-color-fg);
  text-align: left;
  transition: background var(--sai-duration-1) var(--sai-ease-out-1), border-color
    var(--sai-duration-1) var(--sai-ease-out-1);
}

.sai-f4qpdp01__followup:hover {
  background: var(--sai-f4qpdp01-surface-hover);
  border-color: var(--sai-f4qpdp01-divider-strong);
}

/* ── Footer ────────────────────────────────────────────────────────────────── */

.sai-f4qpdp01__footer {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sai-size-2);
  font-family: var(--sai-font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sai-color-fg);
  opacity: 0.55;
}

.sai-f4qpdp01__faqs-section {
  display: flex;
  flex-direction: column;
  gap: var(--sai-f4qpdp01-gap);
}

.sai-f4qpdp01__faqs-section[hidden],
.sai-f4qpdp01__ask[hidden],
.sai-f4qpdp01__footer[hidden] {
  display: none;
}

.sai-f4qpdp01__brand {
  font-weight: var(--sai-font-body-weight-bold);
}

.sai-f4qpdp01__divider {
  opacity: 0.5;
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sai-f4qpdp01__chevron,
  .sai-f4qpdp01__form,
  .sai-f4qpdp01__send,
  .sai-f4qpdp01__followup,
  .sai-f4qpdp01__retry {
    transition: none;
  }
  .sai-f4qpdp01__item::details-content {
    transition: none;
  }
  .sai-f4qpdp01__shimmer-line,
  .sai-f4qpdp01__form::before {
    animation: none;
  }
}
/* END_SNIPPET:_sai-snippet-f4qpdp01 */

/* START_SNIPPET:_sai-snippet-nvy4z5v7 (INDEX:163) */
/* Virtual Try-On (nvy4z5v7) */

.sai-nvy4z5v7 {
  display: block;
  box-sizing: border-box;
  margin-block: var(--sai-size-4);
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  color: var(--sai-color-fg);
}

.sai-nvy4z5v7__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sai-size-2);
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 3.5rem;
  padding: var(--sai-size-3) var(--sai-size-5);
  border: 1px solid transparent;
  border-radius: var(--sai-radius-md);
  /* Clip the moving sheen to the button's rounded box. The attract-ring is an
     outset box-shadow, which overflow does not clip, so the pulse still shows. */
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight-bold);
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  transition: opacity var(--sai-duration-1) var(--sai-ease-out-1), transform
    var(--sai-duration-1) var(--sai-ease-out-1), background-color var(--sai-duration-1)
    var(--sai-ease-out-1);
}

/* Style modifiers map onto theme color tokens — no hardcoded palette. */
.sai-nvy4z5v7__button--primary {
  background-color: var(--sai-color-primary);
  border-color: var(--sai-color-primary);
  color: var(--sai-color-primary-fg);
}

.sai-nvy4z5v7__button--secondary {
  background-color: var(--sai-color-bg);
  border-color: var(--sai-color-fg);
  color: var(--sai-color-fg);
}

.sai-nvy4z5v7__button--outline {
  background-color: transparent;
  border-color: var(--sai-color-fg);
  color: var(--sai-color-fg);
}

@media (hover: hover) {
  .sai-nvy4z5v7__button:hover {
    opacity: 0.88;
  }
}

.sai-nvy4z5v7__button:active {
  transform: scale(0.99);
}

.sai-nvy4z5v7__button:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
}

.sai-nvy4z5v7__icon {
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.sai-nvy4z5v7__icon svg {
  inline-size: 100%;
  block-size: 100%;
}

/* Expressive treatment for the filled primary CTA only: a periodic light sheen
   and an attract-ring pulse on first paint. Both are built from the theme's
   own --sai-color-primary (the sheen is a neutral white-alpha gradient; the
   ring is a primary-derived shadow via color-mix) so the button keeps the
   merchant's palette — no hardcoded accent. Outline/secondary stay calm. */
.sai-nvy4z5v7__shine {
  position: absolute;
  inset-block: 0;
  inline-size: 34%;
  inset-inline-start: 0;
  background: linear-gradient(
    100deg,
    transparent,
    rgb(255 255 255 / 0.42),
    transparent
  );
  pointer-events: none;
  z-index: 0;
  transform: translateX(-180%) skewX(-18deg);
  animation: sai-nvy4z5v7-shine 3.6s ease-in-out infinite;
}

.sai-nvy4z5v7__button--primary {
  animation: sai-nvy4z5v7-attract 2.4s var(--sai-ease-out-1) 3;
}

/* The label/icon sit above the sheen. */
.sai-nvy4z5v7__icon,
.sai-nvy4z5v7__label {
  position: relative;
  z-index: 1;
}

@keyframes sai-nvy4z5v7-shine {
  0%,
  8% {
    transform: translateX(-180%) skewX(-18deg);
  }
  48%,
  100% {
    transform: translateX(320%) skewX(-18deg);
  }
}

@keyframes sai-nvy4z5v7-attract {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sai-color-primary) 45%, transparent);
  }
  70% {
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--sai-color-primary) 0%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sai-color-primary) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sai-nvy4z5v7__button {
    transition: none;
  }
  .sai-nvy4z5v7__button--primary {
    animation: none;
  }
  .sai-nvy4z5v7__shine {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Modal — built and appended to <body> by the JS asset on first open.
   A native <dialog> is used so the modal escapes theme overflow/transform
   clipping (top layer), traps focus, closes on Esc, and gets ::backdrop for
   free. These rules live on <body>-level nodes, so they are intentionally
   not nested under .sai-nvy4z5v7 — but every class still carries the
   sai-nvy4z5v7__ prefix, so the selectors stay snippet-scoped.
   ───────────────────────────────────────────────────────────────────────── */

.sai-nvy4z5v7__dialog {
  box-sizing: border-box;
  /* Design role-colours mapped onto the merchant's theme tokens. The modal
     keeps the studio look on any storefront by deriving its ink/line/accent
     ramp from --sai-color-fg / --sai-color-primary rather than hardcoding a
     palette. */
  --o-ink: var(--sai-color-fg);
  --o-ink-2: color-mix(in srgb, var(--sai-color-fg) 68%, transparent);
  --o-ink-3: color-mix(in srgb, var(--sai-color-fg) 46%, transparent);
  --o-line: color-mix(in srgb, var(--sai-color-fg) 14%, transparent);
  --o-line-2: color-mix(in srgb, var(--sai-color-fg) 8%, transparent);
  --o-accent: var(--sai-color-primary);
  --o-accent-soft: color-mix(in srgb, var(--o-accent) 12%, var(--sai-color-bg));
  --o-on-stage: #ffffff;
  /* ONE locked footprint for the entire flow. Consent → photo → processing →
     result all share the same frame, so the modal never resizes as the shopper
     advances — only the content inside it changes. Sized in px (capped to the
     viewport) so it stays generously sized on themes that scale rem from a
     small root font-size. */
  inline-size: min(960px, calc(100vw - 24px));
  block-size: min(680px, calc(100dvh - 24px));
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 20px;
  background-color: var(--sai-color-bg);
  color: var(--sai-color-fg);
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  overflow: hidden;
}

.sai-nvy4z5v7__dialog::backdrop {
  background-color: rgb(0 0 0 / 0.55);
}

/* Entrance: the frame rises and fades in as it opens. Native <dialog> applies
   [open] the moment showModal() runs, so the animation plays on first paint. */
.sai-nvy4z5v7__dialog[open] {
  animation: sai-nvy4z5v7-fade-up 0.25s var(--sai-ease-out-1);
}

@keyframes sai-nvy4z5v7-fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sai-nvy4z5v7__dialog[open] {
    animation: none;
  }
}

/* Every element inside the modal uses border-box sizing so the snippet's
   px/rem paddings land predictably. The snippet sets the properties it cares
   about explicitly on its own scoped classes. */
.sai-nvy4z5v7__dialog *,
.sai-nvy4z5v7__dialog *::before,
.sai-nvy4z5v7__dialog *::after {
  box-sizing: border-box;
}

.sai-nvy4z5v7__shell {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

/* Input steps (consent / colour / photo / processing) center their content
   inside the fixed-width modal so a short form doesn't stretch edge-to-edge.
   The header stays full-width (close pinned right). The two-pane looks result
   (--looks) and the full-bleed single-image result (--result) opt out — they
   fill the whole width. */
.sai-nvy4z5v7__dialog:not(.sai-nvy4z5v7__dialog--looks):not(.sai-nvy4z5v7__dialog--result)
  .sai-nvy4z5v7__body,
.sai-nvy4z5v7__dialog:not(.sai-nvy4z5v7__dialog--looks):not(.sai-nvy4z5v7__dialog--result)
  .sai-nvy4z5v7__footer {
  inline-size: 100%;
  max-inline-size: 34rem;
  margin-inline: auto;
}

.sai-nvy4z5v7__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sai-size-3);
  padding: var(--sai-size-4) var(--sai-size-5);
  border-block-end: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.sai-nvy4z5v7__title {
  margin: 0;
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.sai-nvy4z5v7__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--sai-radius-round);
  background-color: transparent;
  color: currentColor;
  cursor: pointer;
}

@media (hover: hover) {
  .sai-nvy4z5v7__close:hover {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }
}

.sai-nvy4z5v7__close:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
}

.sai-nvy4z5v7__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-block-size: 0;
  padding: var(--sai-size-5);
  overflow-y: auto;
  /* Full-width states (error / rate-limit) center their message instead of
     pinning it to the top. `safe` keeps tall content top-aligned + scrollable.
     The two-pane studio body (--looks) overrides this below. */
  justify-content: safe center;
}

.sai-nvy4z5v7__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sai-size-3);
  padding: var(--sai-size-4) var(--sai-size-5);
  border-block-start: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.sai-nvy4z5v7__step-title {
  margin: 0 0 var(--sai-size-2);
  font-size: 1rem;
  font-weight: var(--sai-font-body-weight-bold);
}

/* Action buttons inside the modal — primary / ghost variants. */
.sai-nvy4z5v7__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sai-size-2);
  min-block-size: 3.25rem;
  padding: var(--sai-size-2) var(--sai-size-5);
  border: 1px solid transparent;
  border-radius: var(--sai-radius-md);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: var(--sai-font-body-weight-bold);
  line-height: 1.3;
  cursor: pointer;
  transition: opacity var(--sai-duration-1) var(--sai-ease-out-1);
}

@media (hover: hover) {
  .sai-nvy4z5v7__action:not([disabled]):hover {
    opacity: 0.88;
  }
}

.sai-nvy4z5v7__action:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
}

.sai-nvy4z5v7__action[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* The `hidden` attribute must beat the `display` declaration in the base
   rule above. A bare `[hidden]` selector (0,1,0) only ties the
   `.sai-nvy4z5v7__action` class, and the later base rule wins the cascade —
   so the JS-toggled "Try Complete Look" button would stay visible with no
   FBT items selected. Qualifying the selector with the class lifts it to
   (0,2,0) so `hidden` reliably wins. */
.sai-nvy4z5v7__action[hidden] {
  display: none;
}

.sai-nvy4z5v7__action--primary {
  background-color: var(--sai-color-primary);
  border-color: var(--sai-color-primary);
  color: var(--sai-color-primary-fg);
  flex: 1 1 auto;
}

.sai-nvy4z5v7__action--ghost {
  background-color: transparent;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  color: currentColor;
}

/* Consent step — granular checkboxes. */
.sai-nvy4z5v7__consent-list {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-3);
  margin: 0 0 var(--sai-size-4);
}

.sai-nvy4z5v7__check {
  display: flex;
  align-items: flex-start;
  gap: var(--sai-size-3);
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
}

.sai-nvy4z5v7__dialog input[type="checkbox"],
.sai-nvy4z5v7__dialog input[type="checkbox"]:hover,
.sai-nvy4z5v7__dialog input[type="checkbox"]:checked,
.sai-nvy4z5v7__dialog input[type="checkbox"]:checked:hover {
  -webkit-appearance: checkbox;
  appearance: auto;
  flex-shrink: 0;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-block-start: 0.0625rem;
  accent-color: var(--sai-color-primary);
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
  opacity: 1;
}

/* Photo step. */
/* The saved-photo step: a short instruction, a composed portrait preview frame
   (consistent 3:4 like the result hero so any uploaded aspect reads as an
   intentional preview, not a small floating image), then a centered delete. */
.sai-nvy4z5v7__photo-hint {
  margin: 0 0 var(--sai-size-4);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
  color: color-mix(in srgb, currentColor 70%, transparent);
}

.sai-nvy4z5v7__photo-frame {
  inline-size: 100%;
  max-inline-size: 14rem;
  aspect-ratio: 3 / 4;
  margin: 0 auto var(--sai-size-3);
  border-radius: var(--sai-radius-md);
  overflow: hidden;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.sai-nvy4z5v7__photo-preview {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* Per-family display framing for the result/preview frames. The default crop is
   the garment 3/4 (full-length); jewellery reframes to a head-and-shoulders
   neckline and makeup to a square face crop, so a necklace or lip-shade try-on
   reads at a sensible crop instead of a full-length portrait. The hook is
   data-vto-family on the dialog, set by the runtime from the resolved try-on
   family; an absent or 'garment' value matches no rule here and leaves the 3/4
   default untouched. */
.sai-nvy4z5v7__dialog[data-vto-family='jewellery'] .sai-nvy4z5v7__photo-frame,
.sai-nvy4z5v7__dialog[data-vto-family='jewellery'] .sai-nvy4z5v7__fbt-thumb {
  aspect-ratio: 4 / 5;
}

.sai-nvy4z5v7__dialog[data-vto-family='makeup'] .sai-nvy4z5v7__photo-frame,
.sai-nvy4z5v7__dialog[data-vto-family='makeup'] .sai-nvy4z5v7__fbt-thumb {
  aspect-ratio: 1 / 1;
}

.sai-nvy4z5v7__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sai-size-2);
  padding: var(--sai-size-6) var(--sai-size-4);
  margin-block-end: var(--sai-size-4);
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--sai-radius-md);
  text-align: center;
}

.sai-nvy4z5v7__dropzone-hint {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: color-mix(in srgb, currentColor 65%, transparent);
}

.sai-nvy4z5v7__file-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Processing step. */
.sai-nvy4z5v7__processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sai-size-4);
  padding: var(--sai-size-7) var(--sai-size-4);
  text-align: center;
}

.sai-nvy4z5v7__processing .sai-spinner {
  --sai-spinner-size: 2.5rem;
  --sai-spinner-color: var(--sai-color-primary);
}

.sai-nvy4z5v7__processing-text {
  font-size: 0.9375rem;
  font-weight: var(--sai-font-body-weight-bold);
}

/* Result step. */
.sai-nvy4z5v7__result-frame {
  position: relative;
  margin-block-end: var(--sai-size-4);
  border-radius: var(--sai-radius-md);
  overflow: hidden;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.sai-nvy4z5v7__result-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.sai-nvy4z5v7__badge {
  position: absolute;
  inset-block-start: var(--sai-size-2);
  inset-inline-end: var(--sai-size-2);
  padding: var(--sai-size-1) var(--sai-size-2);
  border-radius: var(--sai-radius-sm);
  background-color: rgb(0 0 0 / 0.7);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: var(--sai-font-body-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sai-nvy4z5v7__watermark {
  position: absolute;
  inset-block-end: var(--sai-size-2);
  inset-inline-start: var(--sai-size-2);
  display: inline-flex;
  align-items: center;
  padding: var(--sai-size-1) var(--sai-size-2);
  border-radius: var(--sai-radius-sm);
  background-color: rgb(0 0 0 / 0.55);
  color: #ffffff;
  text-decoration: none;
}

.sai-nvy4z5v7__watermark-logo {
  display: block;
  block-size: 13px;
  inline-size: auto;
  fill: currentColor;
}

/* Two-pane result stage: badge sits top-left (the floating close owns
   top-right); watermark is a bare serif wordmark bottom-right. */
.sai-nvy4z5v7__stage--result .sai-nvy4z5v7__badge {
  inset-block-start: 12px;
  inset-inline: 12px auto;
  border-radius: 999px;
  background-color: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(6px);
}

.sai-nvy4z5v7__stage--result .sai-nvy4z5v7__watermark {
  inset-block-end: 11px;
  inset-inline: auto 13px;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  font-family: var(--sai-font-heading);
  font-weight: var(--sai-font-heading-weight);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: rgb(255 255 255 / 0.88);
}

.sai-nvy4z5v7__disclaimer {
  margin: 0 0 var(--sai-size-4);
  font-size: 0.75rem;
  line-height: 1.5;
  color: color-mix(in srgb, currentColor 65%, transparent);
}

/* In-image loading — shown on the try-on image while a filmstrip look change or
   scene change regenerates, so the rest of the modal stays put. The result
   frame is position:relative, so this covers exactly the image. A subtle
   frosted base (::before) dims the previous result; the label pill reads
   "working" without a spinner. */
.sai-nvy4z5v7__result-loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-block-end: var(--sai-size-5);
  overflow: hidden;
}

.sai-nvy4z5v7__result-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--sai-color-bg) 32%, transparent);
  backdrop-filter: blur(1px);
}

.sai-nvy4z5v7__result-loading-text {
  position: relative;
  z-index: 1;
  padding: var(--sai-size-2) var(--sai-size-4);
  border-radius: var(--sai-radius-round);
  background-color: color-mix(in srgb, var(--sai-color-bg) 88%, transparent);
  color: var(--sai-color-fg);
  font-size: 0.8125rem;
  font-weight: var(--sai-font-body-weight-bold);
  letter-spacing: 0.01em;
}

/* Animated trailing dots on the label. */
.sai-nvy4z5v7__result-loading-text::after {
  content: '';
  animation: sai-nvy4z5v7-dots 1.4s steps(1) infinite;
}

@keyframes sai-nvy4z5v7-dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

@media (prefers-reduced-motion: reduce) {
  .sai-nvy4z5v7__result-loading-text::after {
    animation: none;
  }
}

/* Result step — full-bleed variant. The result is the only step that drops
   the header bar: the close floats over the image as a translucent disc and
   the generated image bleeds to the dialog edges. Scoped to the
   .sai-nvy4z5v7__dialog--result modifier (toggled by _setStep) so the
   consent / colour / photo steps keep their normal header. */
.sai-nvy4z5v7__dialog--result .sai-nvy4z5v7__header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2;
  /* The title is hidden on this step, so the lone close must be pinned right
     rather than left (the base rule's space-between would send it left). */
  justify-content: flex-end;
  border-block-end: none;
  pointer-events: none;
}

.sai-nvy4z5v7__dialog--result .sai-nvy4z5v7__title {
  display: none;
}

/* Floating close — a translucent disc legible over any image. */
.sai-nvy4z5v7__dialog--result .sai-nvy4z5v7__close {
  pointer-events: auto;
  background-color: rgb(0 0 0 / 0.45);
  color: #ffffff;
}

@media (hover: hover) {
  .sai-nvy4z5v7__dialog--result .sai-nvy4z5v7__close:hover {
    background-color: rgb(0 0 0 / 0.62);
  }
}

/* Image bleeds to the dialog edges; the dialog's own radius + overflow:hidden
   round the top corners. The pull-up cancels the body's top padding only when
   the frame is the first child — a transient notice, when present, keeps it. */
.sai-nvy4z5v7__dialog--result .sai-nvy4z5v7__result-frame {
  margin-inline: calc(-1 * var(--sai-size-5));
  border-radius: 0;
}

.sai-nvy4z5v7__dialog--result .sai-nvy4z5v7__result-frame:first-child {
  margin-block-start: calc(-1 * var(--sai-size-5));
}

/* Keep the AI badge clear of the floating close (both sit top-right). */
.sai-nvy4z5v7__dialog--result .sai-nvy4z5v7__badge {
  inset-inline: var(--sai-size-2) auto;
}

/* Result actions share one row evenly rather than wrapping to a stack. */
.sai-nvy4z5v7__dialog--result .sai-nvy4z5v7__footer {
  flex-wrap: nowrap;
}

.sai-nvy4z5v7__dialog--result .sai-nvy4z5v7__footer .sai-nvy4z5v7__action {
  flex: 1 1 0;
  min-inline-size: 0;
}

.sai-nvy4z5v7__section-title {
  margin: var(--sai-size-5) 0 var(--sai-size-2);
  font-size: 0.8125rem;
  font-weight: var(--sai-font-body-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Scene changer — horizontal thumbnail strip. */
.sai-nvy4z5v7__scene-strip {
  display: flex;
  gap: var(--sai-size-2);
  margin: 0;
  padding: 0 0 var(--sai-size-1);
  list-style: none;
  overflow-x: auto;
}

.sai-nvy4z5v7__scene {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--sai-size-1);
  inline-size: 5rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--sai-radius-md);
  background-color: transparent;
  color: currentColor;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
}

.sai-nvy4z5v7__scene[aria-pressed='true'] {
  border-color: var(--sai-color-primary);
  box-shadow: inset 0 0 0 1px var(--sai-color-primary);
}

.sai-nvy4z5v7__scene:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
}

.sai-nvy4z5v7__scene[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.sai-nvy4z5v7__scene-thumb {
  aspect-ratio: 1 / 1;
  inline-size: 100%;
  object-fit: cover;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.sai-nvy4z5v7__scene-name {
  padding: 0 var(--sai-size-1) var(--sai-size-1);
  font-size: 0.6875rem;
  line-height: 1.3;
  text-align: center;
}

/* FBT recommendations. */
.sai-nvy4z5v7__fbt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--sai-size-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sai-nvy4z5v7__fbt-card {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-2);
  padding: var(--sai-size-2);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--sai-radius-md);
}

.sai-nvy4z5v7__fbt-thumb {
  aspect-ratio: 3 / 4;
  inline-size: 100%;
  border-radius: var(--sai-radius-sm);
  object-fit: cover;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.sai-nvy4z5v7__fbt-name {
  font-size: 0.8125rem;
  font-weight: var(--sai-font-body-weight-bold);
  line-height: 1.35;
}

.sai-nvy4z5v7__fbt-price {
  font-size: 0.8125rem;
  color: color-mix(in srgb, currentColor 75%, transparent);
}

.sai-nvy4z5v7__fbt-actions {
  display: flex;
  gap: var(--sai-size-2);
  margin-block-start: auto;
}

.sai-nvy4z5v7__fbt-btn {
  flex: 1 1 0;
  min-block-size: 2.25rem;
  padding: var(--sai-size-1) var(--sai-size-2);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--sai-radius-sm);
  background-color: transparent;
  color: currentColor;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: var(--sai-font-body-weight-bold);
  cursor: pointer;
}

@media (hover: hover) {
  .sai-nvy4z5v7__fbt-btn:hover {
    background-color: color-mix(in srgb, currentColor 8%, transparent);
  }
}

.sai-nvy4z5v7__fbt-btn:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 1px;
}

.sai-nvy4z5v7__fbt-btn[aria-pressed='true'] {
  background-color: var(--sai-color-primary);
  border-color: var(--sai-color-primary);
  color: var(--sai-color-primary-fg);
}

/* ─────────────────────────────────────────────────────────────────────────
   Editorial-look filmstrip ("Tap to wear") + active look's product list.
   ───────────────────────────────────────────────────────────────────────── */
.sai-nvy4z5v7__looks-strip {
  display: flex;
  gap: var(--sai-size-3);
  margin: 0;
  padding: 0 0 var(--sai-size-1);
  list-style: none;
  overflow-x: auto;
}

.sai-nvy4z5v7__look {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--sai-size-2);
  inline-size: 5.5rem;
  padding: 0;
  border: none;
  background: none;
  color: currentColor;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}

.sai-nvy4z5v7__look[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.sai-nvy4z5v7__look-thumb-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  inline-size: 100%;
  border-radius: var(--sai-radius-md);
  border: 2px solid transparent;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
  overflow: hidden;
}

.sai-nvy4z5v7__look[aria-pressed='true'] .sai-nvy4z5v7__look-thumb-wrap {
  border-color: var(--sai-color-primary);
  box-shadow: 0 0 0 1px var(--sai-color-primary);
}

.sai-nvy4z5v7__look-thumb {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* When a look has no styled hero image, the tile is a collage of the look's
   actual product images — so the tile always matches the items in the look. */
.sai-nvy4z5v7__look-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 1px;
  inline-size: 100%;
  block-size: 100%;
}

.sai-nvy4z5v7__look-collage-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* An odd last image spans both columns so the grid never leaves a gap. */
.sai-nvy4z5v7__look-collage-img:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.sai-nvy4z5v7__look-count {
  position: absolute;
  inset-block-end: var(--sai-size-1);
  inset-inline-end: var(--sai-size-1);
  min-inline-size: 1.125rem;
  padding: 0 0.25rem;
  border-radius: var(--sai-radius-round);
  background-color: var(--sai-color-bg);
  color: var(--sai-color-fg);
  font-size: 0.6875rem;
  font-weight: var(--sai-font-body-weight-bold);
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.sai-nvy4z5v7__look-name {
  font-size: 0.75rem;
  line-height: 1.3;
  color: color-mix(in srgb, currentColor 70%, transparent);
}

.sai-nvy4z5v7__look[aria-pressed='true'] .sai-nvy4z5v7__look-name {
  color: currentColor;
  font-weight: var(--sai-font-body-weight-bold);
}

/* Active look's product list — header (eyebrow + heading + piece count) then a
   row per product with a size picker + add. */
.sai-nvy4z5v7__look-head {
  margin-block-end: var(--sai-size-3);
}

.sai-nvy4z5v7__look-eyebrow {
  font-size: 0.6875rem;
  font-weight: var(--sai-font-body-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 50%, transparent);
}

.sai-nvy4z5v7__look-heading {
  margin-block-start: 0.125rem;
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 1.375rem;
  line-height: 1.15;
}

.sai-nvy4z5v7__look-meta {
  margin-block-start: 0.25rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, currentColor 58%, transparent);
}

.sai-nvy4z5v7__lookrow-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sai-nvy4z5v7__lookrow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0;
  border-block-start: 1px solid var(--o-line-2);
}

.sai-nvy4z5v7__lookrow-list .sai-nvy4z5v7__lookrow:first-child {
  border-block-start: none;
  padding-block-start: 0;
}

.sai-nvy4z5v7__lookrow-thumb {
  flex-shrink: 0;
  inline-size: 54px;
  block-size: 66px;
  border-radius: 9px;
  object-fit: cover;
  background-color: color-mix(in srgb, var(--sai-color-fg) 8%, transparent);
}

.sai-nvy4z5v7__lookrow-info {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.sai-nvy4z5v7__lookrow-role {
  font-size: 10px;
  font-weight: var(--sai-font-body-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--o-ink-3);
}

.sai-nvy4z5v7__lookrow-name {
  margin-block-start: 2px;
  font-size: 14px;
  font-weight: var(--sai-font-body-weight-bold);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sai-nvy4z5v7__lookrow-price {
  margin-block-start: 2px;
  font-size: 13px;
  color: var(--o-ink-2);
}

.sai-nvy4z5v7__lookrow-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.sai-nvy4z5v7__lookrow-variant {
  min-block-size: 38px;
  padding: 0 12px;
  border: 1px solid var(--o-line);
  border-radius: 9px;
  background-color: var(--sai-color-bg);
  color: var(--o-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.sai-nvy4z5v7__lookrow-variant:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 1px;
}

.sai-nvy4z5v7__lookrow-add {
  flex-shrink: 0;
  min-block-size: 38px;
  padding: 0 16px;
  /* Match the adjacent variant-select's hairline (--o-line) rather than a full
     --o-ink border, which reads as a heavy near-black box on dark-ink themes. */
  border: 1px solid var(--o-line);
  border-radius: 9px;
  background-color: var(--sai-color-bg);
  color: var(--o-ink);
  font-family: inherit;
  font-size: 13px;
  /* Match the adjacent variant select's weight (500); bold (700) made the
     "Add" read heavier/darker than the rest of the row's controls. */
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

@media (hover: hover) {
  .sai-nvy4z5v7__lookrow-add:not([disabled]):hover {
    background-color: var(--o-ink);
    color: var(--sai-color-bg);
  }
}

.sai-nvy4z5v7__lookrow-add[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

.sai-nvy4z5v7__lookrow-add:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Two-pane editorial-look result lightbox. Left (stage): the try-on image +
   the "Tap to wear" filmstrip. Right (panel): the worn look's products + the
   add-to-bag action. Stacks to a single column on narrow viewports.
   ───────────────────────────────────────────────────────────────────────── */
/* The two-pane layout supplies its own close (in the panel head) + add (in the
   panel foot), so the shared shell header/footer are hidden. */
.sai-nvy4z5v7__dialog--looks .sai-nvy4z5v7__header,
.sai-nvy4z5v7__dialog--looks .sai-nvy4z5v7__footer {
  display: none;
}

.sai-nvy4z5v7__dialog--looks .sai-nvy4z5v7__body {
  display: flex;
  min-block-size: 0;
  padding: 0;
  overflow: hidden;
}

.sai-nvy4z5v7__lightbox {
  position: relative;
  display: flex;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
}

/* Left pane ("stage"). Consent/photo/processing fill it edge-to-edge with a
   single visual; the result turns it into a padded column (hero + filmstrip).
   Fixed width so the flexible panel carries the richer controls. */
.sai-nvy4z5v7__stage {
  position: relative;
  flex: none;
  inline-size: 420px;
  min-inline-size: 0;
  overflow: hidden;
  background-color: var(--o-accent-soft);
}

.sai-nvy4z5v7__stage--result {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background-color: color-mix(in srgb, var(--sai-color-fg) 6%, var(--sai-color-bg));
}

/* Result hero fills the padded stage above the filmstrip (object-fit cover
   keeps any aspect from distorting). */
.sai-nvy4z5v7__stage--result .sai-nvy4z5v7__result-frame {
  flex: 1 1 auto;
  min-block-size: 0;
  inline-size: 100%;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 16px -14px rgb(0 0 0 / 0.35);
}

.sai-nvy4z5v7__stage--result .sai-nvy4z5v7__result-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* Makeup before/after — the shopper's own photo beside the generated result so
   the lip-shade change is easy to judge. A static side-by-side (no slider or
   toggle) is the robust default: no interaction state, and each half cover-crops
   to the same frame the makeup family already faces. The frame's AI badge sits
   top-start and the watermark bottom-end, so the pane labels sit bottom-centre to
   stay clear of both. */
.sai-nvy4z5v7__ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  inline-size: 100%;
  block-size: 100%;
}

.sai-nvy4z5v7__ba-pane {
  position: relative;
  margin: 0;
  min-inline-size: 0;
  overflow: hidden;
}

/* Hairline seam so the two halves read as a deliberate comparison. */
.sai-nvy4z5v7__ba-pane + .sai-nvy4z5v7__ba-pane {
  border-inline-start: 1px solid rgb(255 255 255 / 0.5);
}

.sai-nvy4z5v7__ba-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.sai-nvy4z5v7__ba-label {
  position: absolute;
  inset-block-end: 10px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 11px;
  font-weight: var(--sai-font-body-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Full-bleed stage visual for consent / photo / processing. */
.sai-nvy4z5v7__stage-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: var(--o-accent-soft);
}

.sai-nvy4z5v7__stage-img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* Aspirational/empty placeholder fill when no styled image is available. */
.sai-nvy4z5v7__stage-card--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--o-accent) 30%, var(--sai-color-bg)),
    color-mix(in srgb, var(--o-accent) 10%, var(--sai-color-bg))
  );
  color: color-mix(in srgb, var(--o-accent) 55%, transparent);
}

/* Italic editorial caption along the bottom of a stage visual. */
.sai-nvy4z5v7__stage-cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 48px 26px 26px;
  background-image: linear-gradient(to top, rgb(0 0 0 / 0.62), transparent);
  color: var(--o-on-stage);
  font-family: var(--sai-font-heading);
  font-style: italic;
  font-weight: var(--sai-font-heading-weight);
  font-size: 26px;
  line-height: 1.2;
  max-inline-size: 13ch;
}

/* Processing — the shopper's photo dimmed under a soft "developing" pulse, so it
   reads as the AI working on THEIR image. */
.sai-nvy4z5v7__stage-img--dim {
  filter: brightness(0.62) saturate(0.85);
}

.sai-nvy4z5v7__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sai-nvy4z5v7__scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--o-accent) 10%, transparent);
  mix-blend-mode: screen;
  animation: sai-nvy4z5v7-develop 3.4s ease-in-out infinite alternate;
}

.sai-nvy4z5v7__scan-label {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 22px;
  background-image: linear-gradient(0deg, rgb(0 0 0 / 0.55), transparent);
  color: var(--o-on-stage);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--sai-font-body-weight-bold);
  display: flex;
  align-items: center;
  gap: 7px;
}

@keyframes sai-nvy4z5v7-develop {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sai-nvy4z5v7__scan::after {
    animation: none;
  }
}

/* Calm, deliberate generation status in the panel — a single advancing line
   with a pulsing dot. Replaces a big spinner + jumpy centered messages, which
   read as placeholder rather than product. */
.sai-nvy4z5v7__gen-status {
  display: flex;
  align-items: center;
  gap: var(--sai-size-2);
  margin: 0 0 var(--sai-size-3);
  font-size: 0.9375rem;
  font-weight: var(--sai-font-body-weight-bold);
  line-height: 1.3;
}

.sai-nvy4z5v7__gen-dot {
  flex-shrink: 0;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--sai-radius-round);
  background-color: var(--sai-color-primary);
  animation: sai-nvy4z5v7-pulse 1.2s ease-in-out infinite;
}

@keyframes sai-nvy4z5v7-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sai-nvy4z5v7__gen-dot {
    animation: none;
  }
}

/* Right pane ("panel") — the flexible controls column. */
.sai-nvy4z5v7__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  background-color: var(--sai-color-bg);
  /* Subtle seam between the stage and the controls. Desktop only — the mobile
     query stacks the panes and clears this (a stacked left border reads as a
     stray vertical line). */
  border-inline-start: 1px solid var(--o-line);
}

/* Step-dots header (consent / photo / processing). */
.sai-nvy4z5v7__panel-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 26px 30px 0;
}

.sai-nvy4z5v7__step-dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 999px;
  background-color: var(--o-line);
  transition: inline-size 0.3s ease, background-color 0.3s ease;
}

.sai-nvy4z5v7__step-dot--done {
  background-color: var(--o-accent);
}

.sai-nvy4z5v7__step-dot--active {
  inline-size: 20px;
  background-color: var(--o-accent);
}

.sai-nvy4z5v7__step-label {
  margin-inline-start: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--o-ink-3);
}

.sai-nvy4z5v7__panel-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-block-size: 0;
  padding: 18px 22px 22px;
  overflow-y: auto;
  /* Short steps (uploading, photo-ready, processing) center in the tall fixed
     frame so they don't strand at the top over a void. `safe` falls back to
     top-aligned when content is taller than the panel (consent), so nothing
     gets clipped above the scroll. */
  justify-content: safe center;
}

.sai-nvy4z5v7__panel-body--result {
  padding-block-start: 28px;
  /* The result panel has real content (eyebrow, name, product list); keep it
     top-aligned. Only the sparse input steps use the centering on the base
     .sai-nvy4z5v7__panel-body rule. */
  justify-content: flex-start;
}

.sai-nvy4z5v7__panel-foot {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 16px 22px;
  /* Same hairline as the stage/panel divider so the modal's separators read
     as one system. */
  border-block-start: 1px solid var(--o-line);
  background-color: var(--sai-color-bg);
}

.sai-nvy4z5v7__panel-foot--row {
  flex-direction: row;
  gap: 11px;
}

.sai-nvy4z5v7__panel-foot .sai-nvy4z5v7__action {
  inline-size: 100%;
}

.sai-nvy4z5v7__panel-foot--row .sai-nvy4z5v7__action {
  inline-size: auto;
}

/* Floating circular close — one control over the whole frame, every step. */
.sai-nvy4z5v7__float-close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  z-index: 20;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--o-line);
  background-color: color-mix(in srgb, var(--sai-color-bg) 90%, transparent);
  color: var(--o-ink);
  cursor: pointer;
  backdrop-filter: blur(4px);
}

@media (hover: hover) {
  .sai-nvy4z5v7__float-close:hover {
    background-color: var(--sai-color-bg);
  }
}

.sai-nvy4z5v7__float-close:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
}

/* Panel headings + lede shared by the input steps. */
.sai-nvy4z5v7__panel-h2 {
  margin: 0 0 12px;
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.sai-nvy4z5v7__panel-lede {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--o-ink-2);
  max-inline-size: 42ch;
}

/* Consent — bordered selectable cards. */
.sai-nvy4z5v7__consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sai-nvy4z5v7__consent-row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  text-align: start;
  inline-size: 100%;
  padding: 14px 15px;
  border-radius: 12px;
  border: 1px solid var(--o-line);
  background-color: var(--sai-color-bg);
  color: var(--o-ink);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.sai-nvy4z5v7__consent-row[aria-pressed='true'] {
  border-color: var(--o-accent);
  background-color: var(--o-accent-soft);
}

.sai-nvy4z5v7__consent-row:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
}

.sai-nvy4z5v7__consent-box {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 1px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--o-line);
  background-color: var(--sai-color-bg);
  color: var(--sai-color-primary-fg);
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.sai-nvy4z5v7__consent-row[aria-pressed='true'] .sai-nvy4z5v7__consent-box {
  border-color: var(--o-accent);
  background-color: var(--o-accent);
}

.sai-nvy4z5v7__consent-title {
  display: block;
  font-size: 14px;
  font-weight: var(--sai-font-body-weight-bold);
  color: var(--o-ink);
}

.sai-nvy4z5v7__consent-desc {
  display: block;
  font-size: 12.5px;
  color: var(--o-ink-3);
  margin-block-start: 2px;
}

.sai-nvy4z5v7__reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--o-ink-3);
  text-align: center;
}

/* Processing panel — progress bar + status stepper. */
.sai-nvy4z5v7__proc-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 16px;
  font-weight: 500;
  color: var(--o-ink);
}

.sai-nvy4z5v7__proc-bar {
  block-size: 6px;
  margin-block: 4px 0;
  border-radius: 999px;
  /* A soft tint of the theme accent so the track reads as a progress rail, not
     a hairline divider. */
  background-color: color-mix(in srgb, var(--o-accent) 16%, var(--sai-color-bg));
  overflow: hidden;
}

/* Scoped under the bar (specificity 0,2,0) so it outranks themes whose base
   CSS hides empty elements — e.g. Dawn/Horizon `div:empty { display:none }`
   at (0,1,1). The fill is an intentionally-empty styled div; without this the
   theme blanks it and the bar never appears to move. */
.sai-nvy4z5v7__proc-bar .sai-nvy4z5v7__proc-fill {
  display: block;
  block-size: 100%;
  inline-size: 0;
  border-radius: 999px;
  /* Solid accent fill (not a fade) so the filled portion stays high-contrast
     against the light track on monochrome themes, where a gradient to a lighter
     tint washes into the track and the bar reads as static. */
  background-color: var(--o-accent);
  transition: inline-size 0.25s linear;
}

.sai-nvy4z5v7__proc-steps {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-block-start: 24px;
}

.sai-nvy4z5v7__proc-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--o-ink-3);
}

.sai-nvy4z5v7__proc-step--active {
  color: var(--o-ink);
  font-weight: var(--sai-font-body-weight-bold);
}

.sai-nvy4z5v7__proc-step--done {
  color: var(--o-ink);
}

.sai-nvy4z5v7__proc-step-dot {
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background-color: var(--o-line);
}

.sai-nvy4z5v7__proc-step--active .sai-nvy4z5v7__proc-step-dot {
  background-color: color-mix(in srgb, var(--o-accent) 65%, white);
}

.sai-nvy4z5v7__proc-step--done .sai-nvy4z5v7__proc-step-dot {
  background-color: var(--o-accent);
}

.sai-nvy4z5v7__proc-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--o-ink-3);
}

/* Result panel — eyebrow + name row + solo hint + custom size select. */
.sai-nvy4z5v7__result-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-accent);
  font-weight: var(--sai-font-body-weight-bold);
  margin-block-end: 6px;
}

.sai-nvy4z5v7__result-headrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  /* Clear the floating close (top-right of the frame) so the piece count never
     sits under it. */
  padding-inline-end: 40px;
  margin-block-end: 20px;
}

.sai-nvy4z5v7__result-name {
  margin: 0;
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 26px;
  line-height: 1.1;
}

.sai-nvy4z5v7__result-pieces {
  font-size: 13px;
  color: var(--o-ink-3);
  white-space: nowrap;
}

.sai-nvy4z5v7__solo-hint {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  color: var(--o-ink-2);
  background-color: var(--o-accent-soft);
  padding: 12px 14px;
  border-radius: 11px;
  margin-block-end: 18px;
}

/* Custom select with chevron, used for the per-product size picker. */
.sai-nvy4z5v7__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sai-nvy4z5v7__select-wrap .sai-nvy4z5v7__lookrow-variant {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 28px;
}

.sai-nvy4z5v7__select-chevron {
  position: absolute;
  inset-inline-end: 9px;
  pointer-events: none;
  color: var(--o-ink-3);
}

/* Photo step — dropzone + ready chip (override the legacy token-based rules
   above with the studio's px treatment). */
.sai-nvy4z5v7__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 22px;
  margin: 0;
  border: 1.5px dashed var(--o-line);
  border-radius: 14px;
  background-color: color-mix(in srgb, var(--sai-color-fg) 3%, var(--sai-color-bg));
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

@media (hover: hover) {
  /* The resting icon tile and the dropzone's hover wash both derive from
     --o-accent-soft. Hovering to that exact wash makes the icon tile dissolve
     into the background. Keep the hover wash lighter than the tile, and deepen
     the tile on hover, so the two stay distinct. */
  .sai-nvy4z5v7__dropzone:hover {
    border-color: var(--o-accent);
    background-color: color-mix(in srgb, var(--o-accent) 5%, var(--sai-color-bg));
  }
  .sai-nvy4z5v7__dropzone:hover .sai-nvy4z5v7__dropzone-icon {
    background-color: color-mix(in srgb, var(--o-accent) 18%, var(--sai-color-bg));
  }
}

.sai-nvy4z5v7__dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 12px;
  background-color: var(--o-accent-soft);
  color: var(--o-accent);
}

.sai-nvy4z5v7__dropzone-hint {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--o-ink-2);
}

.sai-nvy4z5v7__ready-chip {
  display: inline-flex;
  /* The panel is a centering flex column; keep the chip hugging its label
     instead of stretching across the full panel width. */
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: var(--sai-font-body-weight-bold);
  color: var(--sai-color-success, #2e7d4f);
  background-color: color-mix(in srgb, var(--sai-color-success, #2e7d4f) 14%, var(--sai-color-bg));
  padding: 8px 12px;
  border-radius: 9px;
}

@media (max-width: 48rem) {
  /* Full-screen edge-to-edge sheet on phones. `margin: 0` removes the base rule's
     centered gutter; `100%` (not 100vw) fills the viewport without a scrollbar
     sliver in a preview iframe. */
  .sai-nvy4z5v7__dialog {
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    border-radius: 0;
  }
  .sai-nvy4z5v7__body {
    overflow-y: auto;
  }
  /* Single scroll on phones + tablets: the whole two-pane sheet (stage visual +
     panel controls) scrolls as ONE column. The desktop --looks body is a
     clipped flex row that hands the scroll to an inner panel, which trapped the
     product list in a short, separately-scrolling pane. Making the sheet body a
     plain block scroll container and letting the lightbox grow past the viewport
     moves the scroll to the sheet itself. */
  .sai-nvy4z5v7__dialog--looks .sai-nvy4z5v7__body {
    display: block;
    overflow-y: auto;
  }
  .sai-nvy4z5v7__lightbox {
    flex-direction: column;
    min-block-size: 100%;
    block-size: auto;
  }
  /* Drop the inner panel scroll — panel content flows into the sheet's single
     scroll instead of nesting its own scrollbar. */
  .sai-nvy4z5v7__panel-body {
    overflow: visible;
  }
  /* Stage becomes a banner across the top; result gives it a touch more height
     for the hero + filmstrip. */
  .sai-nvy4z5v7__stage {
    inline-size: 100%;
    flex: none;
    block-size: 42vh;
  }
  /* Result stage sizes to its content now that the sheet scrolls as one: a
     prominent portrait hero (the generated try-on) with the "Tap to wear"
     filmstrip flowing beneath it, instead of both being crammed into a fixed
     52vh band that shrank the image to a letterbox. */
  .sai-nvy4z5v7__stage--result {
    block-size: auto;
  }
  .sai-nvy4z5v7__stage--result .sai-nvy4z5v7__result-frame {
    flex: none;
    aspect-ratio: 3 / 4;
    /* Portrait at phone widths (≈4:3 tall); capped so the wider tablet end of
       this breakpoint doesn't blow the hero up to near-full-screen. */
    max-block-size: 62vh;
  }
  .sai-nvy4z5v7__panel {
    flex: 1 1 auto;
    border-inline-start: none;
  }
  /* Equal-width footer buttons on phones/tablets. The base primary action
     flex-grows (1 1 auto) so it otherwise renders wider than the ghost beside
     it; a zero flex-basis on both makes the row split evenly. */
  .sai-nvy4z5v7__panel-foot--row .sai-nvy4z5v7__action {
    flex: 1 1 0;
  }
  /* Only the result's add-to-bag CTA pins to the bottom while the sheet scrolls;
     the input-step footers (consent / photo / processing) share the
     .sai-nvy4z5v7__panel-foot class, so the result is singled out via its
     sibling result panel-body. The safe-area inset keeps the pinned bar clear of
     the home indicator on notched phones; the base rule supplies the background
     + top hairline so scrolling content doesn't bleed through. */
  .sai-nvy4z5v7__panel-body--result ~ .sai-nvy4z5v7__panel-foot {
    position: sticky;
    inset-block-end: 0;
    padding-block-end: calc(16px + env(safe-area-inset-bottom));
  }
  .sai-nvy4z5v7__float-close {
    inset-block-start: calc(16px + env(safe-area-inset-top));
    inset-inline-end: calc(16px + env(safe-area-inset-right));
  }
  /* Phone summary row: thumbnail + name/price with Add pinned right on line 1;
     the size-select drops to line 2 under the name so the centre info keeps the
     row width. `display: contents` promotes the select + Add out of their
     wrapper so both can be placed directly in this grid. */
  .sai-nvy4z5v7__lookrow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'thumb info   add'
      '.     select select';
    column-gap: 13px;
    row-gap: 8px;
    align-items: center;
  }
  .sai-nvy4z5v7__lookrow-thumb {
    grid-area: thumb;
    align-self: start;
  }
  .sai-nvy4z5v7__lookrow-info {
    grid-area: info;
  }
  .sai-nvy4z5v7__lookrow-controls {
    display: contents;
  }
  .sai-nvy4z5v7__lookrow-controls .sai-nvy4z5v7__select-wrap {
    grid-area: select;
    justify-self: start;
  }
  .sai-nvy4z5v7__lookrow-controls .sai-nvy4z5v7__lookrow-add {
    grid-area: add;
  }
}

/* Inline notices — errors, warnings, rate-limit messages. */
.sai-nvy4z5v7__notice {
  margin: 0 0 var(--sai-size-4);
  padding: var(--sai-size-3);
  border-radius: var(--sai-radius-md);
  font-size: 0.875rem;
  line-height: 1.5;
}

.sai-nvy4z5v7__notice--warning {
  background-color: color-mix(in srgb, var(--sai-color-fg) 8%, transparent);
}

.sai-nvy4z5v7__notice--error {
  background-color: var(--sai-color-error);
  color: var(--sai-color-error-fg);
}

.sai-nvy4z5v7__error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sai-size-3);
  padding: var(--sai-size-6) var(--sai-size-4);
  text-align: center;
}

.sai-nvy4z5v7__delete-link {
  display: block;
  margin: var(--sai-size-2) auto 0;
  padding: var(--sai-size-1);
  border: none;
  background: none;
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-family: inherit;
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sai-nvy4z5v7__delete-link:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sai-nvy4z5v7__action {
    transition: none;
  }
}
/* END_SNIPPET:_sai-snippet-nvy4z5v7 */

/* START_SNIPPET:_sai-snippet-pgd72kxn (INDEX:164) */
/* PDP - Product Group Display (pgd72kxn).
 *
 * Token discipline: this file uses only Spectrum `--sai-*` design tokens
 * (which bridge to the merchant's Shopify theme variables) and theme-neutral
 * semi-transparent overlays for hairlines. No brand colors / fonts / spacing
 * are hardcoded as hex or magic numbers. Per-instance Styling overrides are
 * applied by the platform CSS baker against the selectors declared in
 * meta.json's style.nodes[]; this block ships the theme-aware defaults that
 * merchants see before tweaking.
 */

/* Outer container */
.sai-pgd72kxn {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-5);
  box-sizing: border-box;
  inline-size: 100%;
  padding: var(--sai-size-4) 0;
  font-family: var(--sai-font-body);
  font-weight: var(--sai-font-body-weight);
  color: var(--sai-color-fg);
}

.sai-pgd72kxn__group {
  display: flex;
  flex-direction: column;
  gap: var(--sai-pgd72kxn-row-gap, var(--sai-size-4));
}

/* Option row (label + values) */
.sai-pgd72kxn__option {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-3);
}

.sai-pgd72kxn__option-label {
  font-size: 15px;
  line-height: 1.4;
  font-weight: var(--sai-font-body-weight);
  letter-spacing: 0.01em;
}
/* Override <strong>'s default bold so the selected value reads as medium-
 * emphasised against the regular-weight option label, not as full bold. */
.sai-pgd72kxn__option-current-value {
  font-weight: 600;
}

.sai-pgd72kxn__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sai-size-3);
  align-items: flex-start;
}

/* Swatch (shared) */
.sai-pgd72kxn__swatch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sai-size-2);
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease;
}

.sai-pgd72kxn__swatch:focus-visible {
  outline: 2px solid var(--sai-color-primary);
  outline-offset: 3px;
  border-radius: var(--sai-radius-sm);
}

.sai-pgd72kxn__swatch:hover:not(.is-oos):not(.is-disabled) {
  opacity: 0.92;
}

.sai-pgd72kxn__swatch-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.sai-pgd72kxn__value-label {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.005em;
  font-weight: var(--sai-font-body-weight);
  max-inline-size: 8rem;
  text-align: center;
  word-break: break-word;
}

/* Color swatch (hex) */
.sai-pgd72kxn__swatch--color .sai-pgd72kxn__swatch-visual {
  border-radius: var(--sai-radius-round);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.sai-pgd72kxn__swatch-fill {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
}

/* Selected color swatch — currentColor ring drawn via a ::before
 * pseudo-element overlay. Earlier attempts using `box-shadow` and `outline`
 * both got invalidated on Dawn: Dawn's button-reset CSS removes outline,
 * and box-shadow rendering with the --sai-color-* tokens silently fails
 * because Dawn ships `--color-foreground` as a bare RGB triplet (an
 * invalid CSS color). A ::before pseudo with `border: 2px solid
 * currentColor` is immune to both — Dawn doesn't reset pseudo-element
 * borders, and `currentColor` always resolves to the inherited page text
 * color. Requires position:relative + overflow:visible on the host so the
 * ring extends past the swatch edge. Merchants override via the
 * `color_swatch_selected` style node from Studio Styling. */
.sai-pgd72kxn__swatch--color.is-selected .sai-pgd72kxn__swatch-visual {
  border: 0;
  position: relative;
  overflow: visible;
}
.sai-pgd72kxn__swatch--color.is-selected .sai-pgd72kxn__swatch-visual::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid currentColor;
  border-radius: inherit;
  pointer-events: none;
}
.sai-pgd72kxn__swatch--color.is-selected .sai-pgd72kxn__value-label {
  font-weight: var(--sai-font-body-weight-bold);
}

/* Image swatch */
.sai-pgd72kxn__swatch--image .sai-pgd72kxn__swatch-visual {
  border-radius: var(--sai-radius-md);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.sai-pgd72kxn__swatch-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.sai-pgd72kxn__swatch--image.is-selected .sai-pgd72kxn__swatch-visual {
  border: 0;
  position: relative;
  overflow: visible;
}
.sai-pgd72kxn__swatch--image.is-selected .sai-pgd72kxn__swatch-visual::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid currentColor;
  border-radius: inherit;
  pointer-events: none;
}

.sai-pgd72kxn__swatch--image.is-selected .sai-pgd72kxn__value-label {
  font-weight: var(--sai-font-body-weight-bold);
}

/* Text swatch */
.sai-pgd72kxn__swatch--text {
  flex-direction: column;
}

/* Default rectangular pill. Single-pixel theme-neutral hairline, transparent
 * fill, muted text color. Generous touch padding. Square corners by default;
 * `text_preset: button-pill` rounds them fully via a kind-scoped override
 * further down. Merchants override via the `text_swatch` /
 * `text_swatch_selected` style nodes from Studio's Styling section. */
.sai-pgd72kxn__swatch--text .sai-pgd72kxn__swatch-visual {
  inline-size: auto;
  block-size: auto;
  padding: var(--sai-size-3) var(--sai-size-4);
  border: 1px solid rgba(0, 0, 0, 0.22);
  background: transparent;
  border-radius: 0;
  color: var(--sai-color-fg);
  opacity: 0.65;
  font-size: 15px;
  line-height: 1.2;
  font-weight: var(--sai-font-body-weight);
  white-space: nowrap;
}

.sai-pgd72kxn__swatch-text {
  display: inline-block;
}

/* Selected: tonal surface fill + 2px currentColor border. Uses
 * `currentColor` rather than --sai-color-* tokens because Dawn-family
 * themes ship --color-foreground as a bare RGB triplet (invalid color)
 * which silently invalidates token-based border-color declarations.
 * currentColor inherits the page text color and is always valid.
 * Merchants override via the `text_swatch_selected` style node.
 */
.sai-pgd72kxn__swatch--text.is-selected .sai-pgd72kxn__swatch-visual {
  background: rgba(0, 0, 0, 0.06);
  border-color: currentColor;
  border-width: 2px;
  opacity: 1;
  font-weight: var(--sai-font-body-weight-bold);
}

/* The value label is redundant for text swatches (the swatch IS the label),
 * so hide it when the text-swatch path renders. */
.sai-pgd72kxn__swatch--text .sai-pgd72kxn__value-label {
  display: none;
}

/* Hide color-swatch value labels when the merchant has turned off
 * `show_color_value_label`. Image swatches keep theirs — the image alone
 * doesn't identify the value. */
.sai-pgd72kxn--no-color-value-label .sai-pgd72kxn__swatch--color .sai-pgd72kxn__value-label {
  display: none;
}

/* Size modifier — applied to the visual element.
 * Targets:
 *   - `--small`  visible visuals meet WCAG 2.2 AA "Target Size (Minimum)"
 *     (24×24 CSS px). The full clickable button is taller than the visual
 *     because the value-label sits below it, so the effective hit area
 *     exceeds the visual's footprint.
 *   - `--medium` text pills meet WCAG 2.5.5 AAA "Target Size (Enhanced)"
 *     (44×44 CSS px) so they're usable on cramped mobile PDPs.
 *   - `--large`  is the merchant's choice for image-heavy collections. */
.sai-pgd72kxn--small .sai-pgd72kxn__swatch--color .sai-pgd72kxn__swatch-visual {
  inline-size: 32px;
  block-size: 32px;
}
.sai-pgd72kxn--small .sai-pgd72kxn__swatch--image .sai-pgd72kxn__swatch-visual {
  inline-size: 56px;
  block-size: 56px;
}
.sai-pgd72kxn--small .sai-pgd72kxn__swatch--text .sai-pgd72kxn__swatch-visual {
  min-block-size: 44px;
  font-size: 14px;
}

.sai-pgd72kxn--medium .sai-pgd72kxn__swatch--color .sai-pgd72kxn__swatch-visual {
  inline-size: 40px;
  block-size: 40px;
}
.sai-pgd72kxn--medium .sai-pgd72kxn__swatch--image .sai-pgd72kxn__swatch-visual {
  inline-size: 80px;
  block-size: 80px;
}
.sai-pgd72kxn--medium .sai-pgd72kxn__swatch--text .sai-pgd72kxn__swatch-visual {
  min-block-size: 48px;
  font-size: 15px;
}

.sai-pgd72kxn--large .sai-pgd72kxn__swatch--color .sai-pgd72kxn__swatch-visual {
  inline-size: 52px;
  block-size: 52px;
}
.sai-pgd72kxn--large .sai-pgd72kxn__swatch--image .sai-pgd72kxn__swatch-visual {
  inline-size: 104px;
  block-size: 104px;
}
.sai-pgd72kxn--large .sai-pgd72kxn__swatch--text .sai-pgd72kxn__swatch-visual {
  min-block-size: 60px;
  font-size: 16px;
  padding: var(--sai-size-3) var(--sai-size-5);
}

/* States — OOS + incompatible.
 * Per-kind OOS state hooks — selectors declared in meta.json so merchants
 * can override OOS look (e.g. grey fill + strikethrough on text pills) from
 * Studio's Styling section. Selectors target the visual span (where the
 * configured border / background / etc. is actually visible).
 */
.sai-pgd72kxn__swatch--color.is-oos .sai-pgd72kxn__swatch-visual,
.sai-pgd72kxn__swatch--image.is-oos .sai-pgd72kxn__swatch-visual,
.sai-pgd72kxn__swatch--text.is-oos .sai-pgd72kxn__swatch-visual {
  /* Per-kind hook — merchant overrides land here via the per-instance bake. */
}

/* Fade the inner colored fill / image / text-pill instead of the whole
 * swatch-visual container. The visual hosts the selected-state box-shadow
 * ring; keeping it at full opacity means the ring stays sharp even on
 * sold-out swatches that are also the current selection. */
.sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__swatch-fill,
.sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__swatch-img,
.sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__swatch-text {
  opacity: 0.5;
}

.sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__value-label {
  opacity: 0.7;
}

/* Diagonal slash across the swatch visual for OOS — matches the "sold out"
 * convention used by Aritzia, Madewell, & most fashion PDPs. Drawn as a
 * 2px line via linear-gradient on a pseudo-element so it lays cleanly on
 * top of color fills, images, AND text pills. Pointer-events disabled so
 * the swatch stays clickable. */
.sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__swatch-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(0, 0, 0, 0.5) calc(50% - 1px),
    rgba(0, 0, 0, 0.5) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
  border-radius: inherit;
}

.sai-pgd72kxn__swatch.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Price + diff */
.sai-pgd72kxn__price {
  font-size: 13px;
  line-height: 1.3;
  font-weight: var(--sai-font-body-weight-bold);
}

.sai-pgd72kxn__price-diff {
  font-size: 13px;
  line-height: 1.2;
}

.sai-pgd72kxn__price-diff.is-positive {
  color: var(--sai-color-fg);
}

.sai-pgd72kxn__price-diff.is-negative {
  color: var(--sai-color-link);
}

/* Hidden JSON payload (consumed by the IIFE; never visible) */
.sai-pgd72kxn__data {
  display: none;
}

/* ── Per-kind presets ────────────────────────────────────────────────────
 * Three independent preset axes — `color_preset`, `image_preset`,
 * `text_preset` — each drives a kind-scoped modifier class on the outer
 * container. Rules in this block target ONLY the relevant kind, so picking
 * `color_preset: dots` doesn't touch image or text rows.
 *
 * All rules can be overridden by:
 *   1. Other Configure props (swatch_size / show_*) — cascade.
 *   2. Studio Styling section (per-instance bake on data-spectrum-instance-id).
 */

/* ─── color_preset ─── */

/* circular — baseline, no override needed (default static rules apply). */

/* square — chain `.sai-pgd72kxn` to outrank the `--circular` shape modifier
 * AND the "Color swatches default to circular" override.
 */
.sai-pgd72kxn.sai-pgd72kxn--color-preset-square .sai-pgd72kxn__swatch--color .sai-pgd72kxn__swatch-visual {
  border-radius: 0;
}

/* dots — tiny indicators, label + price hidden for color rows. */
.sai-pgd72kxn--color-preset-dots .sai-pgd72kxn__swatch--color .sai-pgd72kxn__swatch-visual {
  inline-size: 14px;
  block-size: 14px;
  border-radius: var(--sai-radius-round);
}
.sai-pgd72kxn--color-preset-dots .sai-pgd72kxn__swatch--color .sai-pgd72kxn__value-label,
.sai-pgd72kxn--color-preset-dots .sai-pgd72kxn__swatch--color ~ .sai-pgd72kxn__price {
  display: none;
}

/* in-pill — color dot + label inline inside a rounded outer pill. */
.sai-pgd72kxn--color-preset-in-pill .sai-pgd72kxn__swatch--color {
  flex-direction: row;
  align-items: center;
  gap: var(--sai-size-2);
  padding: var(--sai-size-1) var(--sai-size-1);
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--sai-radius-round);
}
.sai-pgd72kxn--color-preset-in-pill .sai-pgd72kxn__swatch--color.is-selected {
  border-color: currentColor;
  border-width: 2px;
}
/* When the in-pill preset is active, the pill's own outline communicates
 * selection — hide the inner color-circle ring to avoid a double-outline. */
.sai-pgd72kxn--color-preset-in-pill .sai-pgd72kxn__swatch--color.is-selected .sai-pgd72kxn__swatch-visual::before {
  display: none;
}
.sai-pgd72kxn--color-preset-in-pill .sai-pgd72kxn__swatch--color .sai-pgd72kxn__swatch-visual {
  inline-size: 20px;
  block-size: 20px;
}
.sai-pgd72kxn--color-preset-in-pill .sai-pgd72kxn__swatch--color .sai-pgd72kxn__value-label {
  font-size: 13px;
  max-inline-size: none;
}

/* ─── image_preset ─── */

/* rounded-tile — baseline, no override needed. */

/* polaroid — Swatch-King style: clean image tile with rounded corners,
 * label + price as plain text below the tile, and a conditional badge
 * bar (NEW / SALE / SOLD OUT) overlaid on the bottom of the image only
 * when the backing product carries that state.
 */
.sai-pgd72kxn--image-preset-polaroid .sai-pgd72kxn__values {
  align-items: stretch;
}
.sai-pgd72kxn--image-preset-polaroid .sai-pgd72kxn__swatch--image {
  padding: 6px 8px 8px;
  gap: var(--sai-size-2);
  border: 1px solid transparent;
  border-radius: var(--sai-radius-md);
  background: transparent;
  align-items: stretch;
}
.sai-pgd72kxn--image-preset-polaroid .sai-pgd72kxn__swatch--image .sai-pgd72kxn__swatch-visual {
  border: 0;
  border-radius: var(--sai-radius-sm);
  overflow: hidden;
  position: relative;
  box-shadow: none;
}
/* Polaroid: selection ring wraps the entire card (image + label + price),
 * not just the image. Suppress the inner image-tile box-shadow added by the
 * global rule for image.is-selected. */
.sai-pgd72kxn--image-preset-polaroid .sai-pgd72kxn__swatch--image.is-selected {
  border-color: var(--sai-color-fg);
}
.sai-pgd72kxn--image-preset-polaroid .sai-pgd72kxn__swatch--image.is-selected .sai-pgd72kxn__swatch-visual {
  box-shadow: none;
}
.sai-pgd72kxn--image-preset-polaroid .sai-pgd72kxn__swatch--image .sai-pgd72kxn__value-label {
  font-size: 13px;
  font-weight: var(--sai-font-body-weight);
  color: var(--sai-color-fg);
  text-align: center;
  inline-size: 100%;
  max-inline-size: none;
}
.sai-pgd72kxn--image-preset-polaroid .sai-pgd72kxn__swatch--image .sai-pgd72kxn__price {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: var(--sai-font-body-weight);
  inline-size: 100%;
  text-align: center;
}
.sai-pgd72kxn--image-preset-polaroid .sai-pgd72kxn__swatch--image.is-oos .sai-pgd72kxn__value-label {
  opacity: 0.6;
}

/* Polaroid badge bar — full-width strip along the bottom of the image.
 * Overrides the default top-right pill badge. Applies only inside the
 * polaroid preset and only to image swatches. */
.sai-pgd72kxn--image-preset-polaroid .sai-pgd72kxn__swatch--image .sai-pgd72kxn__badge {
  inset-block-start: auto;
  inset-block-end: 0;
  inset-inline: 0;
  border-radius: 0;
  padding: 4px 8px;
  font-size: 11px;
  text-align: center;
  inline-size: 100%;
}

/* square-tile — truly square corners (0 radius) so the selected box-shadow
 * ring renders as a sharp rectangle, matching the swatch shape. */
.sai-pgd72kxn.sai-pgd72kxn--image-preset-square-tile .sai-pgd72kxn__swatch--image .sai-pgd72kxn__swatch-visual {
  border-radius: 0;
}

/* ─── text_preset ─── */

/* button — baseline (rectangular pill), no override needed. */

/* button-pill — fully rounded ends. */
.sai-pgd72kxn--text-preset-button-pill .sai-pgd72kxn__swatch--text .sai-pgd72kxn__swatch-visual {
  border-radius: var(--sai-radius-round);
}

/* button-with-price — Swatch-King-style divided pill: label section on top,
 * price section below, separated by a hairline divider. Selected state
 * inverts the label section to dark, keeps the price section light. */
.sai-pgd72kxn--text-preset-button-with-price .sai-pgd72kxn__swatch--text .sai-pgd72kxn__swatch-visual {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: var(--sai-radius-sm);
  overflow: hidden;
  min-block-size: 56px;
  min-inline-size: 80px;
  background: var(--sai-color-bg);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.sai-pgd72kxn--text-preset-button-with-price .sai-pgd72kxn__swatch--text .sai-pgd72kxn__swatch-text {
  display: block;
  inline-size: 100%;
  text-align: center;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: var(--sai-font-body-weight-bold);
  color: currentColor;
  border-block-end: 1px solid rgba(0, 0, 0, 0.12);
  background: white;
}
.sai-pgd72kxn--text-preset-button-with-price .sai-pgd72kxn__swatch--text .sai-pgd72kxn__price--inline {
  display: block;
  inline-size: 100%;
  text-align: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: var(--sai-font-body-weight);
  color: rgba(0, 0, 0, 0.6);
  background: white;
}
/* Selected button-with-price: dark top section, light bottom. Uses
 * literal `black`/`white` named colors because Dawn-family themes ship
 * --color-foreground / --color-background as bare RGB triplets that
 * resolve to invalid CSS colors — the inversion silently fails to render
 * with `var(--sai-color-fg)` / `var(--sai-color-bg)`. Named CSS colors
 * are always valid and pass the hex-literal audit. Merchants override
 * via the `text_swatch_selected` style node. */
.sai-pgd72kxn--text-preset-button-with-price .sai-pgd72kxn__swatch--text.is-selected .sai-pgd72kxn__swatch-visual {
  border-color: black;
  background: white;
}
.sai-pgd72kxn--text-preset-button-with-price .sai-pgd72kxn__swatch--text.is-selected .sai-pgd72kxn__swatch-text {
  background: black;
  color: white;
  border-block-end-color: black;
}
.sai-pgd72kxn--text-preset-button-with-price .sai-pgd72kxn__swatch--text.is-oos .sai-pgd72kxn__swatch-text {
  opacity: 0.55;
}

/* compact — smaller pills, hide price-diff for text rows. */
.sai-pgd72kxn--text-preset-compact .sai-pgd72kxn__swatch--text .sai-pgd72kxn__swatch-visual {
  padding: var(--sai-size-2) var(--sai-size-3);
  font-size: 13px;
  min-block-size: 32px;
}
.sai-pgd72kxn--text-preset-compact .sai-pgd72kxn__swatch--text ~ .sai-pgd72kxn__price-diff {
  display: none;
}

/* ── price_position ───────────────────────────────────────────────────────
 * Layout tweak when text-pill price is rendered inside the visual span.
 */
.sai-pgd72kxn--price-inside-pill .sai-pgd72kxn__swatch--text .sai-pgd72kxn__swatch-visual {
  flex-direction: column;
  align-items: center;
  gap: var(--sai-size-1);
}
.sai-pgd72kxn__price--inline {
  font-size: 11px;
  font-weight: var(--sai-font-body-weight);
  line-height: 1;
  letter-spacing: 0.005em;
}

/* ── gap_px ─────────────────────────────────────────────────────────────── */
.sai-pgd72kxn__values {
  gap: var(--sai-pgd72kxn-gap, var(--sai-size-3));
}

/* ── oos_display ─────────────────────────────────────────────────────────
 * `hidden` is handled in Liquid (the swatch is skipped). The other three
 * modes split the existing OOS treatment (opacity + line-through) into
 * standalone variants. Default-mode classes are already at the top of
 * this stylesheet — these modifier rules override them.
 */
/* Faded only — drop the diagonal slash, keep the fade. */
.sai-pgd72kxn--oos-faded .sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__swatch-visual::after {
  display: none;
}
/* Strikethrough only — drop the fade, keep the diagonal slash on the swatch. */
.sai-pgd72kxn--oos-strikethrough .sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__swatch-visual,
.sai-pgd72kxn--oos-strikethrough .sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__swatch-fill,
.sai-pgd72kxn--oos-strikethrough .sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__swatch-img,
.sai-pgd72kxn--oos-strikethrough .sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__swatch-text,
.sai-pgd72kxn--oos-strikethrough .sai-pgd72kxn__swatch.is-oos .sai-pgd72kxn__value-label {
  opacity: 1;
}

/* ── Badges (NEW / SALE / SOLD OUT) ──────────────────────────────────────
 * Absolutely positioned inside .sai-pgd72kxn__swatch-visual (which is
 * `position: relative` via the swatch-visual default below). One badge per
 * swatch; priority resolved in Liquid as OOS > SALE > NEW. Default colors
 * use theme tokens; merchants can override each via Studio Styling on the
 * `badge_new` / `badge_sale` / `badge_oos` style.nodes.
 */
.sai-pgd72kxn__swatch-visual {
  position: relative;
}
/* Badges only render on image-kind swatches. The Liquid template gates the
 * emit, but a CSS gate is added as defence-in-depth: hides any leaked badge
 * span on color/text rows even when stale HTML is served (cached storefront
 * pages predating the Liquid fix). */
.sai-pgd72kxn__swatch--color .sai-pgd72kxn__badge,
.sai-pgd72kxn__swatch--text .sai-pgd72kxn__badge {
  display: none !important;
}
.sai-pgd72kxn__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: var(--sai-font-body-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--sai-color-primary-fg);
  border-radius: var(--sai-radius-sm);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}
/* NEW: theme-neutral dark green (no green token in the design system —
 * rgba() is allowed by the hex-audit rule). Merchants can override via
 * Studio Styling on the badge_new style.node. */
.sai-pgd72kxn__badge--new {
  background: rgba(31, 122, 60, 1);
}
.sai-pgd72kxn__badge--sale {
  background: var(--sai-color-error);
  color: var(--sai-color-error-fg);
}
.sai-pgd72kxn__badge--oos {
  background: rgba(0, 0, 0, 0.65);
  color: var(--sai-color-bg);
}
/* END_SNIPPET:_sai-snippet-pgd72kxn */

/* START_SNIPPET:_sai-snippet-phbk5x9q (INDEX:165) */
/* Product Highlights Block (phbk5x9q) */

.sai-phbk5x9q {
  --sai-phbk5x9q-max-width: 64rem;
  --sai-phbk5x9q-divider: rgba(0, 0, 0, 0.12);
  --sai-phbk5x9q-muted: rgba(0, 0, 0, 0.6);
  --sai-phbk5x9q-badge-max-height: 40px;
  --sai-phbk5x9q-grid-gap-row: var(--sai-size-4);
  --sai-phbk5x9q-grid-gap-col: var(--sai-size-5);

  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--sai-phbk5x9q-max-width);
  margin-inline: auto;
  margin-block: var(--sai-size-5);
  padding-inline: var(--sai-size-4);
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sai-color-fg);
}

.sai-phbk5x9q__container {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-5);
}

/* ── Header (accordion or standalone) ─────────────────────────────────────── */

.sai-phbk5x9q__item {
  border-block-start: 1px solid var(--sai-phbk5x9q-divider);
  border-block-end: 1px solid var(--sai-phbk5x9q-divider);
}

.sai-phbk5x9q__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sai-size-3);
  padding-block: var(--sai-size-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.sai-phbk5x9q__summary::-webkit-details-marker {
  display: none;
}

.sai-phbk5x9q__heading {
  margin: 0;
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--sai-color-fg);
}

.sai-phbk5x9q__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--sai-color-fg);
  transition: transform 160ms ease;
}

.sai-phbk5x9q__chevron-bar--vertical {
  display: block;
}

.sai-phbk5x9q__item[open] .sai-phbk5x9q__chevron-bar--vertical {
  display: none;
}

/* Standalone mode — same header treatment as the accordion summary, no
   toggle. */

.sai-phbk5x9q__section-header {
  display: block;
  padding-block: var(--sai-size-4);
  border-block-start: 1px solid var(--sai-phbk5x9q-divider);
  border-block-end: 1px solid var(--sai-phbk5x9q-divider);
}

.sai-phbk5x9q__section-header .sai-phbk5x9q__heading {
  margin: 0;
}

/* ── Body content ─────────────────────────────────────────────────────────── */

.sai-phbk5x9q__body {
  padding-block: var(--sai-size-4) var(--sai-size-5);
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-5);
}

/* ── Badge row ────────────────────────────────────────────────────────────── */

.sai-phbk5x9q__badge {
  display: inline-flex;
  align-items: center;
}

/* Badge image: clamp the height so a small icon-style upload looks small;
   `width: auto` + `object-fit: contain` let a larger merchant upload scale
   gracefully without overflowing the row. */
.sai-phbk5x9q__badge-img {
  display: block;
  max-block-size: var(--sai-phbk5x9q-badge-max-height);
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

/* ── Attribute grid ───────────────────────────────────────────────────────── */

.sai-phbk5x9q__attrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sai-phbk5x9q-grid-gap-col);
  row-gap: var(--sai-phbk5x9q-grid-gap-row);
}

.sai-phbk5x9q__attr {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-1);
  min-inline-size: 0;
}

.sai-phbk5x9q__attr-label {
  font-family: var(--sai-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--sai-phbk5x9q-muted);
}

.sai-phbk5x9q__attr-value {
  font-family: var(--sai-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sai-color-fg);
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .sai-phbk5x9q__attrs {
    grid-template-columns: 1fr;
  }
}

/* ── Bullets section ──────────────────────────────────────────────────────── */

.sai-phbk5x9q__bullets-section {
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-2);
}

.sai-phbk5x9q__bullets-heading {
  margin: 0;
  font-family: var(--sai-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sai-phbk5x9q-muted);
}

.sai-phbk5x9q__bullets {
  margin: 0;
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--sai-size-1);
}

.sai-phbk5x9q__bullet {
  margin: 0;
  font-family: var(--sai-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sai-color-fg);
}

.sai-phbk5x9q__bullet-title {
  font-weight: 600;
}

.sai-phbk5x9q__bullet-detail {
  font-weight: 400;
  color: var(--sai-phbk5x9q-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sai-phbk5x9q__chevron {
    transition: none;
  }
}
/* END_SNIPPET:_sai-snippet-phbk5x9q */

/* START_SNIPPET:_sai-snippet-qsh181xu (INDEX:166) */
/* Shoppable Video Stories (qsh181xu) */

/* ==========================================================================
   Shoppable Video Stories — base layout
   --------------------------------------------------------------------------
   Author-static CSS. Per-instance values (background, typography, spacing,
   shadows) come from variant.content.style and bake into a sibling
   <style data-spectrum-style> element. Selectors stay at single-class
   specificity so the per-instance rules win the cascade.
   ========================================================================== */

.sai-qsh181xu {
  display: block;
  width: 100%;
}

.sai-qsh181xu__container {
  max-width: var(--page-width, 1200px);
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-block: 1.5rem;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.sai-qsh181xu__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-end: 1rem;
  align-items: center;
  text-align: center;
}

.sai-qsh181xu__title {
  margin: 0;
  font-family: var(--font-heading-family, inherit);
  font-weight: var(--font-heading-weight, 600);
  font-size: 1.25rem;
  line-height: 1.25;
  color: rgb(var(--color-foreground, 18 18 18));
}

.sai-qsh181xu__description {
  margin: 0;
  font-family: var(--font-body-family, inherit);
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgb(var(--color-foreground, 18 18 18));
  opacity: 0.7;
}

/* ── Preview tray ───────────────────────────────────────────────────────── */

.sai-qsh181xu__tray {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 0.5rem;
  /* Center horizontally when content fits; with `safe`, alignment falls back
     to flex-start when content overflows so the first preview is never
     clipped at the leading edge. */
  justify-content: safe center;
}

.sai-qsh181xu__tray::-webkit-scrollbar {
  display: none;
}
.sai-qsh181xu__tray {
  scrollbar-width: none;
}

.sai-qsh181xu__preview {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  scroll-snap-align: start;
}

/* Suppress the UA focus ring on pointer/touch + when focus returns
   programmatically after the lightbox closes — only show a visible ring for
   keyboard navigation. */
.sai-qsh181xu__preview:focus {
  outline: none;
}

.sai-qsh181xu__preview:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Frame is the outer ring — Instagram-style pink/orange/yellow gradient
   with a 3px white inset between ring and poster. The two-layer
   `padding-box` + `border-box` background trick: padding-box receives
   the white inset, the transparent border sees the gradient through
   border-box. The poster image (set by JS on the inner __preview-poster)
   sits inside the white inset. Same ring on all 3 preview_shape values
   — only the corner radius changes per shape. */
.sai-qsh181xu__preview-frame {
  display: block;
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  padding: 3px;
  border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)
    border-box;
  box-sizing: border-box;
}

.sai-qsh181xu__preview-poster {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.06);
  background-size: cover;
  background-position: center;
}

/* Per-shape — apply matching radius to BOTH outer frame and inner poster. */
.sai-qsh181xu--shape-circle .sai-qsh181xu__preview-frame,
.sai-qsh181xu--shape-circle .sai-qsh181xu__preview-poster {
  border-radius: 50%;
}

.sai-qsh181xu--shape-square .sai-qsh181xu__preview-frame,
.sai-qsh181xu--shape-square .sai-qsh181xu__preview-poster {
  border-radius: 0;
}

.sai-qsh181xu--shape-rounded .sai-qsh181xu__preview-frame {
  border-radius: 14px;
}
.sai-qsh181xu--shape-rounded .sai-qsh181xu__preview-poster {
  /* Inner radius is slightly smaller than outer for a clean concentric look. */
  border-radius: 8px;
}

/* Optional centered play badge — gated by the show_preview_play_button prop.
   Sits above the poster so it appears on every preview shape. The triangle
   icon is built with `currentColor` so the disc + glyph share the same
   white/dark contrast pair. */
.sai-qsh181xu__preview-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

/* Author `display: inline-flex` above wins over the UA stylesheet's
   `[hidden] { display: none }` rule, so the toggle requires an explicit
   override at the same specificity. */
.sai-qsh181xu__preview-play[hidden] {
  display: none;
}

.sai-qsh181xu__preview-play svg {
  /* Optical centering — the triangle's center of mass sits left of the
     bounding-box center; nudge a hair right so it reads centered in the disc. */
  margin-left: 2px;
}

.sai-qsh181xu__preview-label {
  display: block;
  max-width: 5.5rem;
  font-family: var(--font-body-family, inherit);
  font-size: 0.75rem;
  line-height: 1.2;
  color: rgb(var(--color-foreground, 18 18 18));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Skeleton state — shimmer on the inner poster while JS upgrades the card.
   Targets __preview-poster (not __preview-frame) so the gradient ring on
   the frame stays untouched while the poster animates. */
.sai-qsh181xu__preview--placeholder .sai-qsh181xu__preview-poster {
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: sai-qsh181xu-shimmer 1.4s ease-in-out infinite;
}

@keyframes sai-qsh181xu-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sai-qsh181xu__preview--placeholder .sai-qsh181xu__preview-poster {
    animation: none;
  }
}

/* ── Fullscreen dialog ──────────────────────────────────────────────────── */

.sai-qsh181xu__dialog[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  border: none;
  overflow: hidden;
}

.sai-qsh181xu__dialog::backdrop {
  background: rgba(0, 0, 0, 0.95);
}

/* Close, mute, nav buttons — explicit width/height keeps the circles
   identical regardless of inner icon dimensions. */
.sai-qsh181xu__dialog-close,
.sai-qsh181xu__dialog-mute,
.sai-qsh181xu__dialog-nav {
  position: absolute;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 3;
  border-radius: 50%;
  padding: 0;
  box-sizing: border-box;
}

/* Stacked vertically on the right edge — close on top, mute below.
   Same button sizing as before (14/20 px icons, 0.625rem padding). */
.sai-qsh181xu__dialog-close {
  top: 1rem;
  right: 1rem;
}
.sai-qsh181xu__dialog-mute {
  /* close at top: 1rem (16px) + 36px height = 52px bottom; +36px gap = 88px (5.5rem) */
  top: 5.5rem;
  right: 1rem;
}

/* Defensive — SVG icons inside the mute toggle ignore the [hidden] attribute
   in some user agents (display defaults compete with [hidden]). Force the
   inactive state to display:none. JS toggles `.hidden` between the two SVGs. */
.sai-qsh181xu__dialog-mute svg[hidden],
.sai-qsh181xu__dialog-mute svg.sai-qsh181xu__mute-icon--muted[hidden],
.sai-qsh181xu__dialog-mute svg.sai-qsh181xu__mute-icon--sound[hidden] {
  display: none !important;
}

.sai-qsh181xu__dialog-close:focus-visible,
.sai-qsh181xu__dialog-mute:focus-visible,
.sai-qsh181xu__dialog-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.sai-qsh181xu__dialog-nav {
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

@media (min-width: 750px) {
  .sai-qsh181xu__dialog-nav:not([hidden]) {
    display: inline-flex;
  }
}

.sai-qsh181xu__dialog-nav--prev {
  left: 1rem;
}
.sai-qsh181xu__dialog-nav--next {
  right: 1rem;
}

/* Progress strip — one segment per slide. On mobile it spans the
   full-bleed slide-frame; on tablet+ it's constrained to match the 9:16
   frame width so it visually belongs to the video, not the dialog. */
.sai-qsh181xu__progress {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  gap: 4px;
  z-index: 4;
}

/* Author `display: flex` above wins over the UA stylesheet's
   `[hidden] { display: none }` rule, so the toggle requires an explicit
   override at the same specificity. */
.sai-qsh181xu__progress[hidden] {
  display: none;
}

@media (min-width: 750px) {
  .sai-qsh181xu__progress {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(calc(100% - 2rem), calc(100dvh * 9 / 16 - 2rem));
  }
}

.sai-qsh181xu__progress-segment {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  border-radius: 1px;
}

.sai-qsh181xu__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width 100ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .sai-qsh181xu__progress-fill {
    transition: none;
  }
}

/* Slide track */
.sai-qsh181xu__slides {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

.sai-qsh181xu__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

/* On mobile, the frame is full-bleed (fills viewport edge-to-edge). On
   tablet+ it's constrained to 9:16 and centered with a dark backdrop on
   either side — matches the grid lightbox pattern on larger screens. */
.sai-qsh181xu__slide-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

@media (min-width: 750px) {
  .sai-qsh181xu__slide-frame {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
    max-width: 100%;
  }
}

.sai-qsh181xu__slide-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Asset slots — every slide carries one wrapper per asset (video or image).
   Only one is visible at a time; the rest sit positioned but `hidden`. */
.sai-qsh181xu__asset {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Author `display: flex` above wins over the UA stylesheet's
   `[hidden] { display: none }` rule, so the toggle requires an explicit
   override at the same specificity. */
.sai-qsh181xu__asset[hidden] {
  display: none;
}

.sai-qsh181xu__asset-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

/* ── Product card overlay (matches grid lightbox layout) ───────────────
   Sits inside the 9:16 frame, anchored to the bottom with a gradient mask
   for legibility. 3-column grid: image | title+price | ATC button. */

.sai-qsh181xu__product-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 12px 12px 16px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    transparent 100%
  );
  pointer-events: auto;
}

/* Horizontal strip — one card per tagged product. Grid sibling pattern:
   flex row + scroll-snap so swipes settle one card at a time on mobile,
   trackpad / drag scrolls feel native on desktop. Scrollbar hidden. */
.sai-qsh181xu__product-overlay-scroll {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.sai-qsh181xu__product-overlay-scroll::-webkit-scrollbar {
  display: none;
}

.sai-qsh181xu__product-card {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  border-radius: 12px;
  text-decoration: none;
  box-sizing: border-box;
  /* Default (2+ cards): card takes 80% of the strip — leaves a 20% peek
     of the next card so the user knows there's more to swipe to. The
     :only-child rule below takes over for single-card slides. Width
     scales with the strip on every viewport (no cap). */
  flex: 0 0 80%;
  scroll-snap-align: start;
}

.sai-qsh181xu__product-overlay-scroll > .sai-qsh181xu__product-card:only-child {
  flex: 0 0 100%;
}

.sai-qsh181xu__product-image-wrap {
  display: block;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.sai-qsh181xu__product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sai-qsh181xu__product-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.sai-qsh181xu__product-title {
  margin: 0;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.sai-qsh181xu__product-price {
  margin: 0;
  font-family: var(--font-body-family, inherit);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #1a1a1a;
  opacity: 0.8;
}

.sai-qsh181xu__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  font-weight: 700;
  background: #121212;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.sai-qsh181xu__cta:hover:not(:disabled) {
  opacity: 0.9;
}

.sai-qsh181xu__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.sai-qsh181xu__cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Mini-PDP bottom sheet (quickshop) ─────────────────────────────────
   Layout adapted from the Lotto theme's `sv-quickshop` pattern: backdrop
   covers the dialog, panel slides up from the bottom on mobile and is
   centered/constrained on tablet+. Theme color + font variables only.
   ────────────────────────────────────────────────────────────────────── */

.sai-qsh181xu__quickshop {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.sai-qsh181xu__quickshop[hidden] {
  display: none;
}

.sai-qsh181xu__quickshop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
  pointer-events: auto;
  cursor: pointer;
}

.sai-qsh181xu__quickshop--open .sai-qsh181xu__quickshop-backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.sai-qsh181xu__quickshop-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 88%;
  background: rgb(var(--color-background, 255 255 255));
  color: rgb(var(--color-foreground, 18 18 18));
  border-radius: 16px 16px 0 0;
  padding: 20px 20px 22px;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--font-body-family, inherit);
}

.sai-qsh181xu__quickshop--open .sai-qsh181xu__quickshop-panel {
  transform: translateY(0);
}

.sai-qsh181xu__quickshop-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgb(var(--color-foreground, 18 18 18));
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sai-qsh181xu__quickshop-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.sai-qsh181xu__quickshop-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.sai-qsh181xu__quickshop-header {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding-right: 36px;
}

.sai-qsh181xu__quickshop-media {
  width: 130px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.sai-qsh181xu__quickshop-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sai-qsh181xu__quickshop-meta {
  min-width: 0;
  padding-top: 4px;
}

.sai-qsh181xu__quickshop-title {
  display: block;
  font-family: var(--font-heading-family, var(--font-body-family, inherit));
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: rgb(var(--color-foreground, 18 18 18));
  text-decoration: none;
  margin: 0 0 8px;
}

.sai-qsh181xu__quickshop-title:hover {
  text-decoration: underline;
}

.sai-qsh181xu__quickshop-price {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.sai-qsh181xu__quickshop-price-compare {
  font-weight: 400;
  text-decoration: line-through;
  opacity: 0.55;
  font-size: 13px;
}

.sai-qsh181xu__quickshop-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--color-foreground, 18 18 18));
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.sai-qsh181xu__quickshop-view:hover,
.sai-qsh181xu__quickshop-view:focus-visible {
  opacity: 0.85;
  text-decoration: underline;
}

.sai-qsh181xu__quickshop-view-icon {
  flex-shrink: 0;
  display: inline-block;
}

/* Options container — N stacked group cards. The card pattern keeps each
   attribute visually scoped + makes the selected-value label legible at a
   glance. */
.sai-qsh181xu__quickshop-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sai-qsh181xu__quickshop-group {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sai-qsh181xu__quickshop-group-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.2;
}

.sai-qsh181xu__quickshop-group-name {
  color: rgb(var(--color-foreground, 18 18 18));
  opacity: 0.55;
}

.sai-qsh181xu__quickshop-group-selected {
  color: rgb(var(--color-foreground, 18 18 18));
  font-weight: 600;
}

.sai-qsh181xu__quickshop-group-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Pill — three flavors. Text-only is the default; swatch-color and
   swatch-image add a leading visual marker but share the same chrome. */
.sai-qsh181xu__quickshop-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 64px;
  padding: 10px 14px;
  background: rgb(var(--color-background, 255 255 255));
  color: rgb(var(--color-foreground, 18 18 18));
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  font-family: var(--font-body-family, inherit);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}

.sai-qsh181xu__quickshop-pill:hover {
  border-color: rgba(0, 0, 0, 0.6);
}

.sai-qsh181xu__quickshop-pill:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.sai-qsh181xu__quickshop-pill--selected,
.sai-qsh181xu__quickshop-pill--selected:hover {
  border-color: rgb(var(--color-foreground, 18 18 18));
  border-width: 2px;
  /* Compensate for the +1px border so the pill doesn't shift on select. */
  padding: 9px 13px;
}

.sai-qsh181xu__quickshop-pill--oos {
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Swatch leading element — sits before the label. Color swatches use the
   inline `background-color` set by JS; image swatches use `background-image`.
   Border keeps light swatches legible against a white pill background. */
.sai-qsh181xu__quickshop-pill-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.sai-qsh181xu__quickshop-pill--swatch-color .sai-qsh181xu__quickshop-pill-swatch,
.sai-qsh181xu__quickshop-pill--swatch-image .sai-qsh181xu__quickshop-pill-swatch {
  /* Selected variants get a thicker outer ring around the swatch to mirror
     the pill's selected state at the swatch level too. */
  box-shadow: 0 0 0 1px rgb(var(--color-background, 255 255 255));
}

.sai-qsh181xu__quickshop-pill-label {
  display: inline-block;
}

.sai-qsh181xu__quickshop-atc {
  width: 100%;
  margin-top: 4px;
  padding: 18px 20px;
  background: rgb(var(--color-foreground, 18 18 18));
  color: rgb(var(--color-background, 255 255 255));
  border: none;
  border-radius: 4px;
  font-family: var(--font-heading-family, var(--font-body-family, inherit));
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.sai-qsh181xu__quickshop-atc:hover:not(:disabled) {
  opacity: 0.88;
}

.sai-qsh181xu__quickshop-atc:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sai-qsh181xu__quickshop-atc:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media screen and (min-width: 750px) {
  /* Mirror the 9:16 slide-frame width so the bottom sheet visually belongs
     to the video, not the dialog. Same math used by the progress strip. */
  .sai-qsh181xu__quickshop-panel {
    max-width: min(100%, calc(100dvh * 9 / 16));
    border-radius: 16px;
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sai-qsh181xu__quickshop-panel,
  .sai-qsh181xu__quickshop-backdrop {
    transition: none;
  }
}

/* ── Tablet+ layout tweaks ────────────────────────────────────────────── */

@media (min-width: 750px) {
  .sai-qsh181xu__preview-frame {
    width: 6.5rem;
    height: 6.5rem;
  }
  .sai-qsh181xu__title {
    font-size: 1.5rem;
  }
}

@media (min-width: 990px) {
  .sai-qsh181xu__container {
    padding-inline: 2rem;
    padding-block: 2rem;
  }
}
/* END_SNIPPET:_sai-snippet-qsh181xu */

/* START_SNIPPET:_sai-snippet-svmk8tqx (INDEX:167) */
/* Shoppable Videos (svmk8tqx) */

/* ───── 1. Block-root tokens ───── */

.sai-svmk8tqx {
  --sai-svmk8tqx-gap: var(--sai-size-3);
}

/* ───── 2. Section shell ───── */

.sai-svmk8tqx__container {
  max-width: var(--sai-page-width);
  margin-inline: auto;
  padding-block: var(--sai-size-6);
  padding-inline: var(--sai-size-4);
  box-sizing: border-box;
}

.sai-svmk8tqx__header {
  text-align: center;
  margin-block-end: var(--sai-size-4);
}

.sai-svmk8tqx__heading {
  font-family: var(--sai-font-heading);
  font-style: var(--sai-font-heading-style);
  font-weight: var(--sai-font-heading-weight);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--sai-color-fg);
  margin: 0;
}

.sai-svmk8tqx__subheading {
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--sai-color-fg);
  margin: 0.75rem auto 0;
  max-width: 42rem;
}

/* ───── 3. Card strip — mobile-first base (horizontal scroll-snap) ───── */

.sai-svmk8tqx__grid {
  display: flex;
  flex-direction: row;
  gap: var(--sai-svmk8tqx-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.sai-svmk8tqx__grid::-webkit-scrollbar {
  display: none;
}

.sai-svmk8tqx__card {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  flex-shrink: 0;
  width: 38vw;
  min-width: 130px;
  scroll-snap-align: start;
}

.sai-svmk8tqx__card:focus-visible {
  outline: 2px solid var(--sai-color-fg);
  outline-offset: 2px;
}

.sai-svmk8tqx__card-video {
  aspect-ratio: 9 / 16;
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: transform var(--sai-duration-3) var(--sai-ease-out-1);
}

.sai-svmk8tqx__card-video > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.sai-svmk8tqx__card-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--sai-duration-3) var(--sai-ease-out-1);
}

.sai-svmk8tqx__card:hover .sai-svmk8tqx__card-video,
.sai-svmk8tqx__card:focus-visible .sai-svmk8tqx__card-video,
.sai-svmk8tqx__card:hover .sai-svmk8tqx__card-poster,
.sai-svmk8tqx__card:focus-visible .sai-svmk8tqx__card-poster {
  transform: scale(1.04);
}

.sai-svmk8tqx__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.08);
  transition: background var(--sai-duration-2) var(--sai-ease-out-1);
}

.sai-svmk8tqx__card:hover .sai-svmk8tqx__play,
.sai-svmk8tqx__card:focus-visible .sai-svmk8tqx__play {
  background: rgba(0, 0, 0, 0.18);
}

.sai-svmk8tqx__play-btn {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform var(--sai-duration-1) var(--sai-ease-out-1), background
    var(--sai-duration-1) var(--sai-ease-out-1);
}

.sai-svmk8tqx__card:hover .sai-svmk8tqx__play-btn,
.sai-svmk8tqx__card:focus-visible .sai-svmk8tqx__play-btn {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 1);
}

/* Placeholder + unavailable share the same slot dimensions as a real card
   (aspect-ratio + width inherited from .sai-svmk8tqx__card above) so the
   JS swap from placeholder → real-or-unavailable is CLS-free. Both are
   inert (pointer-events:none, aria-hidden) — only real cards open the
   dialog. */
.sai-svmk8tqx__card--placeholder,
.sai-svmk8tqx__card--unavailable {
  background: rgba(0, 0, 0, 0.06);
  cursor: default;
  pointer-events: none;
}

.sai-svmk8tqx__card--unavailable {
  display: grid;
  place-items: center;
  color: var(--sai-color-fg);
  font-family: var(--sai-font-body);
  font-size: 0.75rem;
  text-align: center;
  padding: 8px;
  opacity: 0.6;
}

.sai-svmk8tqx__card--unavailable::after {
  content: "Video unavailable";
}

/* ───── 4. Dialog — mobile-first base (vertical scroll-snap) ───── */

.sai-svmk8tqx__dialog {
  padding: 0;
  border: none;
  border-radius: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #000;
  margin: 0;
}

.sai-svmk8tqx__dialog[open] {
  display: flex;
  flex-direction: column;
  animation: sai-svmk8tqx-dialog-fadein var(--sai-duration-2) var(--sai-ease-out-1);
}

@keyframes sai-svmk8tqx-dialog-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.sai-svmk8tqx__dialog::backdrop {
  background: rgba(0, 0, 0, 0.9);
}

.sai-svmk8tqx__dialog-close {
  position: absolute;
  top: 16px;
  left: 12px;
  z-index: 20;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
  transition: background var(--sai-duration-1) var(--sai-ease-out-1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sai-svmk8tqx__dialog-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sai-svmk8tqx__dialog-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.sai-svmk8tqx__dialog-mute {
  position: absolute;
  bottom: 140px;
  right: 12px;
  z-index: 20;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0;
  transition: background var(--sai-duration-1) var(--sai-ease-out-1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sai-svmk8tqx__dialog-mute:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sai-svmk8tqx__dialog-mute:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.sai-svmk8tqx__dialog-nav {
  display: none;
}

/* Class rule above (and the tablet+ override at min-width:768px) wins
   against the UA `[hidden]` rule by specificity, so without this explicit
   override the JS-toggled `hidden` attribute would silently fail to hide
   nav buttons on tablet+. Same idiom used for __product-btn[hidden]. */
.sai-svmk8tqx__dialog-nav[hidden] {
  display: none;
}

.sai-svmk8tqx__dialog-slides {
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  height: 100dvh;
  position: relative;
  flex: 1;
}

.sai-svmk8tqx__dialog-slides::-webkit-scrollbar {
  display: none;
}

.sai-svmk8tqx__dialog-slide {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  scroll-snap-align: start;
  background: #000;
  overflow: hidden;
}

.sai-svmk8tqx__dialog-video {
  aspect-ratio: 9 / 16;
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.sai-svmk8tqx__dialog-video > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.sai-svmk8tqx__dialog-products {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 12px 12px 16px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    transparent 100%
  );
  pointer-events: auto;
}

.sai-svmk8tqx__dialog-products-scroll {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.sai-svmk8tqx__dialog-products-scroll::-webkit-scrollbar {
  display: none;
}

/* ───── 5. Product card — viewport-agnostic ───── */

.sai-svmk8tqx__product-card {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 8px 10px;
  text-decoration: none;
  color: #1a1a1a;
  flex-shrink: 0;
  width: 92%;
  max-width: 360px;
  box-sizing: border-box;
  scroll-snap-align: start;
}

.sai-svmk8tqx__product-img-wrap {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.sai-svmk8tqx__product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--sai-duration-2) var(--sai-ease-out-1);
}

.sai-svmk8tqx__product-card:hover .sai-svmk8tqx__product-img {
  transform: scale(1.05);
}

.sai-svmk8tqx__product-info {
  min-width: 0;
}

.sai-svmk8tqx__product-title {
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #1a1a1a;
  text-decoration: none;
  margin: 0 0 3px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sai-svmk8tqx__product-price {
  font-family: var(--sai-font-body);
  font-style: var(--sai-font-body-style);
  font-weight: var(--sai-font-body-weight-bold);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 4px;
  white-space: nowrap;
}

.sai-svmk8tqx__product-price--compare {
  font-weight: var(--sai-font-body-weight);
  text-decoration: line-through;
  opacity: 0.5;
  white-space: nowrap;
}

.sai-svmk8tqx__product-action {
  flex-shrink: 0;
}

.sai-svmk8tqx__product-btn {
  display: block;
  width: 96px;
  padding: 8px 0;
  background: var(--sai-color-primary);
  color: var(--sai-color-primary-fg);
  border: none;
  border-radius: 100px;
  font-family: var(--sai-font-body);
  font-size: 0.75rem;
  font-weight: var(--sai-font-body-weight-bold);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--sai-duration-1) var(--sai-ease-out-1);
}

/* Our display:block above has the same specificity as the UA [hidden]
   rule, and loads later — so [hidden] doesn't win by default. Restore it
   for this button family. */
.sai-svmk8tqx__product-btn[hidden] {
  display: none;
}

.sai-svmk8tqx__product-btn:hover {
  opacity: 0.85;
}

.sai-svmk8tqx__product-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ATC button in loading state — keep width stable by hiding the label via
   visibility (not display) and centering the spinner over it. */
.sai-svmk8tqx__product-btn[data-state="loading"] {
  position: relative;
  opacity: 1; /* override :disabled opacity so the spinner stays crisp */
}

.sai-svmk8tqx__product-btn[data-state="loading"] .sai-svmk8tqx__product-btn-label {
  visibility: hidden;
}

.sai-svmk8tqx__product-btn-spinner {
  --sai-spinner-size: 14px;

  display: none;
  position: absolute;
  /* Center via inset + margin:auto (not translate), so the `transform`
     property stays available for the spinner's rotate animation. */
  inset: 0;
  margin: auto;
  /* color + track come from TOKENS defaults via currentColor — the button
     sets color: var(--sai-color-primary-fg), which the spinner inherits. */
}

.sai-svmk8tqx__product-btn[data-state="loading"] .sai-svmk8tqx__product-btn-spinner {
  display: inline-block;
}

/* View-cart variant — inverse of the primary button so it reads as a
   confirmed/next-step affordance rather than another ATC. */
.sai-svmk8tqx__product-btn--view-cart {
  background: var(--sai-color-bg);
  color: var(--sai-color-primary);
  border: 1px solid var(--sai-color-primary);
  padding: 7px 0; /* -1 on each side to compensate for the 1px border */
}

/* ───── 6. Tablet+ (@media min-width: 768px) — horizontal card sizing + desktop dialog ───── */

@media (min-width: 768px) {
  .sai-svmk8tqx__card {
    width: 25vw;
    min-width: 180px;
    max-width: 260px;
  }

  .sai-svmk8tqx__dialog-close {
    top: 16px;
    right: 16px;
    left: auto;
    width: 40px;
    height: 40px;
  }

  .sai-svmk8tqx__dialog-mute {
    top: 64px;
    right: 16px;
    bottom: auto;
    width: 40px;
    height: 40px;
  }

  .sai-svmk8tqx__dialog-nav {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0;
    transition: background var(--sai-duration-1) var(--sai-ease-out-1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .sai-svmk8tqx__dialog-nav:hover {
    background: rgba(255, 255, 255, 0.25);
  }

  .sai-svmk8tqx__dialog-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .sai-svmk8tqx__dialog-nav:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  .sai-svmk8tqx__dialog-nav--prev {
    left: 24px;
  }
  .sai-svmk8tqx__dialog-nav--next {
    right: 24px;
  }

  .sai-svmk8tqx__dialog-slides {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overflow-y: hidden;
    scroll-snap-type: none;
    min-height: 0;
    height: auto;
  }

  .sai-svmk8tqx__dialog-slide {
    position: absolute;
    width: min(380px, calc(100vw - 180px));
    aspect-ratio: 9 / 16;
    max-height: 82dvh;
    min-height: 0;
    height: auto;
    max-width: none;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    transition: transform 0.4s var(--sai-ease-out-1), opacity 0.4s var(--sai-ease-out-1);
  }

  .sai-svmk8tqx__dialog-slides--snap .sai-svmk8tqx__dialog-slide {
    transition: none;
  }

  .sai-svmk8tqx__dialog-slide[data-position="center"] {
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 3;
  }

  .sai-svmk8tqx__dialog-slide[data-position="left"] {
    transform: translateX(calc(-100% - 48px)) scale(0.85);
    opacity: 0.35;
    z-index: 2;
    pointer-events: none;
  }

  .sai-svmk8tqx__dialog-slide[data-position="right"] {
    transform: translateX(calc(100% + 48px)) scale(0.85);
    opacity: 0.35;
    z-index: 2;
    pointer-events: none;
  }

  .sai-svmk8tqx__dialog-slide[data-position="hidden"] {
    transform: translateX(200%) scale(0.7);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
  }

  .sai-svmk8tqx__dialog-products {
    pointer-events: none;
  }

  .sai-svmk8tqx__dialog-slide[data-position="center"] .sai-svmk8tqx__dialog-products {
    pointer-events: auto;
  }
}

/* ───── 7. Grid preset (self-contained) ───── */

.sai-svmk8tqx--grid {
  --sai-svmk8tqx-gap: var(--sai-size-4);
}

.sai-svmk8tqx--grid .sai-svmk8tqx__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: visible;
  scroll-snap-type: none;
  width: 100%;
  max-width: var(--sai-page-width);
}

.sai-svmk8tqx--grid .sai-svmk8tqx__card {
  width: auto;
  min-width: 0;
  max-width: none;
}

@media (min-width: 768px) {
  .sai-svmk8tqx--grid .sai-svmk8tqx__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1440px) {
  .sai-svmk8tqx--grid {
    --sai-svmk8tqx-gap: var(--sai-size-5);
  }
  .sai-svmk8tqx--grid .sai-svmk8tqx__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ───── 8. Story progress bar + tap zones ───── */

.sai-svmk8tqx__story-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  gap: 3px;
  padding: 8px 6px 0;
  box-sizing: border-box;
  pointer-events: none;
}

.sai-svmk8tqx__story-seg {
  flex: 1;
  height: 3px;
  border-radius: 1.5px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.sai-svmk8tqx__story-seg-fill {
  display: block !important;
  width: 0%;
  height: 100%;
  border-radius: 1.5px;
  background: #fff;
  will-change: width;
}

.sai-svmk8tqx__story-seg-fill[data-done] {
  width: 100%;
  animation: none;
}

.sai-svmk8tqx__story-seg-fill[data-active] {
  animation: sai-svmk8tqx-story-fill linear forwards;
}

.sai-svmk8tqx__story-seg-fill[data-paused] {
  animation-play-state: paused;
}

@keyframes sai-svmk8tqx-story-fill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.sai-svmk8tqx__story-media {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.sai-svmk8tqx__story-asset {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sai-svmk8tqx__story-asset[hidden] {
  display: none;
}

.sai-svmk8tqx__story-asset .sai-svmk8tqx__dialog-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sai-svmk8tqx__story-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sai-svmk8tqx__story-tap {
  display: block !important;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sai-svmk8tqx__story-tap--prev {
  left: 0;
  width: 30%;
}

.sai-svmk8tqx__story-tap--next {
  right: 0;
  width: 70%;
}

@media (min-width: 768px) {
  .sai-svmk8tqx__story-tap {
    display: none !important;
  }
}

.sai-svmk8tqx__card-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

/* ───── 9. Reduced motion ───── */

@media (prefers-reduced-motion: reduce) {
  .sai-svmk8tqx__dialog {
    animation: none;
  }
  .sai-svmk8tqx__dialog-slide {
    transition: none;
  }
  .sai-svmk8tqx__story-seg-fill {
    transition: none !important;
    animation: none !important;
  }
}
/* END_SNIPPET:_sai-snippet-svmk8tqx */

/* START_SNIPPET:background-media (INDEX:171) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:172) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:173) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:175) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:176) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__landscape {
    display: none;
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-products (INDEX:178) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    display: grid;
    grid-template-columns: clamp(5rem, 25cqi, 10rem) minmax(0, 1fr);
    grid-template-rows: 1fr min-content min-content;
    grid-template-areas:
      'media details'
      'media quantity'
      'media error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(5rem, 25cqi, 10rem) minmax(0, 1fr);
    grid-template-rows: min-content min-content 1fr min-content min-content;
    grid-template-areas:
      'media details'
      'media variants'
      'media unit_price'
      'media quantity'
      'media error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  .cart-items__table-row--pending-removal {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: 2px;
  }

  .cart-items__details * {
    font-size: 12px;
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: 12px !important;
    color: var(--color-foreground);
    text-transform: uppercase !important;
    font-weight: 400;
    letter-spacing: 0.02em;
    display: block;
    margin-block-start: 0;
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
    text-transform: uppercase;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    align-self: end;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: 100%;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: 12px;
    height: 20px;
    --quantity-selector-width: auto;
    flex: 0 0 auto;
    width: auto;
    min-width: unset;
    border: 1px solid rgb(0 0 0 / 0.25);
    border-radius: 0 !important;
  }

  .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    flex: 0 0 20px;
    border-radius: 0 !important;
  }

  .cart-items__quantity .quantity-selector .quantity-minus {
    border-right: 1px solid rgb(0 0 0 / 0.25);
  }

  .cart-items__quantity .quantity-selector .quantity-plus {
    border-left: 1px solid rgb(0 0 0 / 0.25);
  }

  .cart-items__quantity .quantity-selector input[type='number'] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-width: 20px;
    padding: 0;
    font-size: 11px;
    flex: 0 0 20px;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
    align-self: stretch;
  }

  .cart-items__inline-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-block-start: 2px;
  }

  .cart-items__inline-price .cart-items__sale-price {
    color: #d32f2f !important;
    font-weight: bold;
    font-size: 12px !important;
  }

  .cart-items__inline-price .cart-items__compare-price {
    color: #000 !important;
    opacity: 1 !important;
    font-size: 12px !important;
    text-decoration: line-through;
  }

  .cart-items__remove-text {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-foreground);
    cursor: pointer;
    width: auto !important;
    height: auto !important;
    min-height: unset;
  }

  .cart-items__remove-text:not(.cart-items__move-to-wishlist) {
    margin-left: auto;
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: layout without price column */
    .cart-items__table-row {
      grid-template-columns: 10rem 1fr 1fr;
      grid-template-rows: 1fr min-content;
      grid-template-areas:
        'media details quantity'
        'media details error';
    }

    .cart-items__quantity {
      grid-area: initial;
      margin-top: 0;
      align-self: end;
    }

    /* Cart drawer: separate areas for variants */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity'
        'media variants variants'
        'media unit_price unit_price'
        'media error error';

      .cart-items__quantity {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

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

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: auto;
      height: 20px;
      width: auto;
    }

    .cart-items .quantity-selector button {
      width: 20px;
      height: 20px;
    }

    .cart-items .quantity-selector input {
      max-width: 20px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }

  /* Desktop: portrait images in cart drawer to match Tectonic */
  @media screen and (min-width: 750px) {
    .cart-drawer .cart-items__media-container {
      aspect-ratio: 3 / 4;
    }
  }

  /* Mobile web: tighten cart line for mweb drawer */
  @media screen and (max-width: 749px) {
    .cart-items__details *,
    .cart-items__inline-price *,
    .cart-items__quantity *,
    .cart-items__remove-text {
      font-size: 10px !important;
    }

    .cart-items__quantity .quantity-selector input[type='number'] {
      font-size: 10px !important;
    }

    .cart-items__table-row {
      column-gap: var(--gap-sm);
    }

    .cart-items__quantity {
      margin-block-start: var(--margin-3xs);
      gap: var(--gap-2xs);
    }

    .cart-items__quantity-controls {
      gap: 10px;
    }

    .cart-items__quantity .quantity-selector {
      height: 18px;
    }

    .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
      width: 18px;
      height: 18px;
      min-width: 18px;
      min-height: 18px;
      flex: 0 0 18px;
    }

    .cart-items__quantity .quantity-selector input[type='number'] {
      width: 18px;
      height: 18px;
      min-width: 18px;
      max-width: 18px;
      flex: 0 0 18px;
    }
  }

  .cart-items__move-to-wishlist {
    color: var(--color-foreground);
    white-space: nowrap;
    margin-left: auto;
  }

  .cart-items__move-to-wishlist:hover {
    opacity: 0.7;
  }

  .cart-items__move-to-wishlist:disabled {
    opacity: 0.3;
    cursor: wait;
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:179) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-drawer__summary .cart-totals,
  .cart-drawer__summary .cart-totals:not(:has(.cart-actions)) {
    border-block-start: none;
    padding-block-start: 0;
    margin-block-start: 0;
    gap: var(--gap-2xs);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  /* Hide tax note in cart drawer to match Tectonic */
  .cart-drawer__summary .cart-totals__tax-note {
    display: none;
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  /* Desktop: bold subtotal label to match Tectonic */
  @media screen and (min-width: 750px) {
    .cart-drawer__summary .cart-totals__total-label {
      font-weight: 700;
      text-transform: uppercase;
    }
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
    border-radius: 0 !important;
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:181) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      /* only allow interactive elements to be clickable separate from .collection-card__link */
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:183) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:184) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:185) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:186) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:187) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--drawer .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0 28px;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form (INDEX:191) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    /* border-radius: var(--options-border-radius); */
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form */

/* START_SNIPPET:grid-density-controls (INDEX:193) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double),
  .column-options__option:has(.column-picker-mobile--multi) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out),
  .column-options__option:has(.column-picker--multi) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--multi) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--multi) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    /* padding: var(--padding-2xs); */
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  /* Show inactive path by default, hide active path */
  .column-picker .grid-icon-active {
    display: none;
  }

  .column-picker .grid-icon-inactive {
    display: inline;
  }

  /* When checked: show active path, hide inactive path */
  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
  }

  .column-options__option-input:checked ~ .column-picker .grid-icon-active {
    display: inline;
  }

  .column-options__option-input:checked ~ .column-picker .grid-icon-inactive {
    display: none;
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:194) */
.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:195) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-md) var(--padding-lg);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
      --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 90vw;
    height: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: #fff;
    scrollbar-width: none;

    @media screen and (min-width: 750px) {
      width: 480px;
      max-width: 95vw;
      height: 100%;
      background-color: var(--color-background);
    }
  }

  .cart-drawer__dialog::-webkit-scrollbar {
    display: none;
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
    scrollbar-width: none;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  .cart-drawer__content::-webkit-scrollbar {
    display: none;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__heading--custom {
    font-size: 29px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    font-weight: bold;

    @media screen and (min-width: 750px) {
      font-size: 28px !important;
    }
  }

  .cart-drawer__count {
    font-size: 29px;
    font-weight: inherit;

    @media screen and (min-width: 750px) {
      font-size: 28px;
    }
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-sm);
    border-bottom: none;
    margin-bottom: var(--gap-sm);

    @media screen and (min-width: 750px) {
      padding-bottom: var(--gap-md);
      margin-bottom: var(--gap-md);
    }
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-2xs) var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xs);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: #fff;
    border-top: 1px solid rgb(0 0 0 / 0.12);

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-lg);
      gap: var(--gap-sm);
      background-color: var(--color-background);
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: none;
    padding-block-start: 0;
  }

  .cart-drawer__summary .cart-totals {
    border-block-start: none !important;
    padding-block-start: 0 !important;
    margin-block-start: 0 !important;
  }

  .cart-drawer__summary .cart-actions {
    border-block: none;
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    padding-top: var(--padding-md);
    overflow-y: auto;
    scrollbar-width: none;
    mask-image: none !important;
    -webkit-mask-image: none !important;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
      padding-top: var(--padding-xl);
    }
  }

  .cart-drawer__items::-webkit-scrollbar {
    display: none;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-sm);
    border-bottom: none;
    margin-bottom: var(--gap-sm);

    @media screen and (min-width: 750px) {
      padding-bottom: var(--gap-md);
      margin-bottom: var(--gap-md);
    }
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: 1px solid rgb(0 0 0 / 0.12);
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer .cart-promo-strip {
    background-color: var(--color-foreground);
    color: var(--color-background);
    text-align: center;
    padding: 10px 16px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .cart-drawer .cart-promo-strip__link {
    color: var(--color-background);
    text-decoration: none;
  }

  .cart-drawer .cart-promo-strip__cta {
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-inline-start: 4px;
  }

  .cart-drawer .cart-promo-strip__link:hover .cart-promo-strip__cta {
    text-decoration-thickness: 2px;
  }

  .cart-drawer .cart-promo-strip__message {
    margin: 0;
  }

  .cart-callout-strip {
    text-align: left;
    padding: 12px 16px 0px 0px;
    font-family: var(--font-body--family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-foreground);
    /* border-top: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10)); */
  }

  .cart-callout-strip__link {
    color: var(--color-foreground);
    text-decoration: none;
  }

  .cart-callout-strip__cta {
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-inline-start: 4px;
  }

  .cart-callout-strip__link:hover .cart-callout-strip__cta {
    text-decoration-thickness: 2px;
  }

  .cart-callout-strip__message {
    margin: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;
    align-items: center;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-drawer__heading .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

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

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }

      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }

  /* ── Cart Drawer Recommendations ── */
  .cart-reco {
    padding-top: var(--gap-xl);
    margin-top: var(--gap-md);
    padding-bottom: var(--gap-3xl);
    border: none;
  }

  .cart-reco__heading {
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    margin-left: -2px;
  }

  .cart-reco__scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--gap-xs);
    scrollbar-width: none;
  }

  .cart-reco__scroll::-webkit-scrollbar {
    display: none;
  }

  .cart-reco__card {
    flex: 0 0 calc(50% - 6px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
  }

  /* ── Image wrapper (relative for badge positioning) ── */
  .cart-reco__image-wrap {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }

  .cart-reco__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Badges on image ── */
  .cart-reco__badge-new {
    position: absolute;
    bottom: 48px;
    left: 8px;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
  }

  .cart-reco__badge-discount {
    position: absolute;
    bottom: 16px;
    left: 8px;
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    z-index: 2;
  }

  .cart-reco__badge-soldout {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--color-background);
    color: var(--color-foreground);
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    z-index: 2;
  }

  /* ── Quick add button (mobile only) ── */
  .cart-reco__quick-add {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s ease;
    padding: 0;
  }

  .cart-reco__quick-add:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .cart-reco__quick-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .cart-reco__quick-add-icon {
    font-size: 20px;
    color: #000;
    font-weight: 300;
    line-height: 1;
  }

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

  /* ── Card details ── */
  .cart-reco__details {
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .cart-reco__title {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    margin: 0;
  }

  /* ── Price ── */
  .cart-reco__price-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  .cart-reco__compare-price {
    font-size: 14px;
    color: #000;
    text-decoration: line-through;
    font-weight: 400;
  }

  .cart-reco__sale-price {
    font-size: 14px;
    color: #d32f2f;
    font-weight: 600;
  }

  .cart-reco__regular-price {
    font-size: 14px;
    color: #000;
    font-weight: 600;
  }

  /* ── Tax / GST info ── */
  .cart-reco__tax-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .cart-reco__tax-inclusive {
    font-size: 10px;
    color: #666;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 500;
  }

  .cart-reco__tax-gst {
    font-size: 10px;
    color: #000;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 700;
  }

  /* ── Mobile tweaks ── */
  @media screen and (max-width: 749px) {
    .cart-reco__heading {
      font-size: 28px;
    }

    .cart-reco__title {
      font-size: 11px;
    }

    .cart-reco__compare-price,
    .cart-reco__sale-price,
    .cart-reco__regular-price {
      font-size: 11px;
    }

    .cart-reco__tax-inclusive,
    .cart-reco__tax-gst {
      font-size: 9px;
    }

    .cart-reco__badge-new,
    .cart-reco__badge-discount {
      font-size: 8px;
      padding: 3px 6px;
    }

    .cart-reco__badge-new {
      bottom: 40px;
    }

    .cart-reco__badge-discount {
      bottom: 12px;
    }
  }

  /* ── Cart Reco Variant Selector Popup ── */
  .cart-reco__card {
    position: relative;
  }

  /* Mobile: popup shown via JS display:block */
  .cart-reco__card .variant-selector-popup {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .cart-reco__card .variant-selector-popup[style*="block"] {
      display: block !important;
    }

    .cart-reco__card .variant-popup-header h3 {
      font-size: 9px !important;
    }

    .cart-reco__card .variant-popup-option {
      font-size: 10px !important;
    }
  }

  /* Desktop: variant selector as horizontal frosted-glass bar */
  @media screen and (min-width: 750px) {
    .cart-reco__card .variant-selector-popup {
      display: block !important;
      height: auto !important;
      opacity: 0 !important;
      transform: translateY(100%) !important;
      pointer-events: none !important;
      transition: transform 0.3s ease, opacity 0.3s ease !important;
      background: rgba(255, 255, 255, 0.75) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      box-shadow: none !important;
      border: 1px solid rgba(255, 255, 255, 0.5) !important;
      border-radius: 0 !important;
      overflow: visible !important;
    }

    .cart-reco__card .variant-selector-popup[style*="block"] {
      opacity: 0 !important;
      transform: translateY(100%) !important;
      pointer-events: none !important;
    }

    .cart-reco__card:hover .variant-selector-popup,
    .cart-reco__card:hover .variant-selector-popup[style*="block"] {
      opacity: 1 !important;
      transform: translateY(0) !important;
      pointer-events: auto !important;
    }

    .cart-reco__card .variant-popup-content {
      background: transparent !important;
      padding: 10px 8px !important;
      overflow: visible !important;
    }

    .cart-reco__card .variant-popup-header {
      display: none !important;
    }

    .cart-reco__card .variant-popup-options {
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      gap: 6px !important;
      margin-bottom: 0 !important;
      justify-content: flex-start !important;
      align-items: center !important;
      overflow-x: auto !important;
      scrollbar-width: none !important;
    }

    .cart-reco__card .variant-popup-options::-webkit-scrollbar {
      display: none !important;
    }

    .cart-reco__card .variant-popup-option {
      width: auto !important;
      flex-shrink: 0 !important;
      padding: 4px 10px !important;
      font-size: 16px !important;
      background: transparent !important;
      border: none !important;
      font-weight: 400 !important;
      color: #000000 !important;
    }

    .cart-reco__card .variant-popup-option:hover:not(:disabled) {
      background: rgba(0, 0, 0, 0.08) !important;
      border-radius: 4px !important;
    }

    .cart-reco__card .variant-popup-option--unavailable,
    .cart-reco__card .variant-popup-option:disabled {
      color: #000000 !important;
      text-decoration: line-through !important;
    }
  }

  /* ── Cart Reco Shimmer / Skeleton ── */
  @keyframes cart-reco-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .cart-reco__shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: cart-reco-shimmer 1.5s ease-in-out infinite;
    border-radius: 0;
  }

  .cart-reco__shimmer-heading {
    height: 28px;
    width: 60%;
    margin-bottom: 8px;
    margin-left: -2px;
  }

  .cart-reco__shimmer-card {
    flex: 0 0 calc(50% - 6px);
  }

  .cart-reco__shimmer-image {
    aspect-ratio: 3 / 4;
    width: 100%;
  }

  .cart-reco__shimmer-details {
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .cart-reco__shimmer-title {
    height: 14px;
    width: 85%;
  }

  .cart-reco__shimmer-price {
    height: 14px;
    width: 40%;
  }

  .cart-reco__shimmer-tax {
    height: 10px;
    width: 55%;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-reco__shimmer {
      animation: none;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:196) */
.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;
  }

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

  /* ================================
   * Mobile drawer customizations
   * ================================ */

  /* Position drawer below header so header + announcement bar remain visible */
  @media screen and (max-width: 749px) {
    .menu-drawer {
      top: var(--drawer-top-offset, var(--header-height, 60px));
      height: calc(100dvh - var(--drawer-top-offset, var(--header-height, 60px)));
      box-shadow: none;
      width: 80vw;
    }

    .menu-drawer__backdrop {
      top: var(--drawer-top-offset, var(--header-height, 60px));
    }

    /* Search icon 24x24 on mobile, shifted right */
    .search-action .svg-wrapper svg {
      width: 24px !important;
      height: 24px !important;
    }
    .search-action {
      margin-inline-end: -6px !important;
    }

    /* Cart icon 23x23 on mobile */
    cart-icon .svg-wrapper svg {
      width: 23px !important;
      height: 23px !important;
    }

    /* Half-size close icon on mobile */
    .header__icon--menu .header-drawer-icon--close {
      width: calc(var(--icon-size-xs) * 0.75) !important;
      height: calc(var(--icon-size-xs) * 0.75) !important;
    }

    /* Hide drawer's own close button on mobile - the header X handles closing */
    .menu-drawer .menu-drawer__close-button {
      display: none;
    }

    /* Remove divider lines between menu items */
    .menu-drawer__list-item--divider,
    .menu-drawer__menu-container--divider {
      border-block-end: none !important;
    }

    /* Equal spacing between all menu items */
    .menu-drawer .menu-drawer__menu-item {
      padding-block: 10px !important;
      min-height: unset !important;
    }

    .menu-drawer .menu-drawer__menu-item--mainlist {
      font-size: 0.75rem !important;
      font-weight: 900 !important;
      line-height: 24px !important;
    }

    .menu-drawer .menu-drawer__menu-item--child,
    .menu-drawer .menu-drawer__menu-item--parent {
      font-size: 0.625rem;
      font-weight: 400;
      line-height: 1.5;
      padding-block: 12px !important;
    }

    /* Smaller + icons on mobile, bolder */
    .menu-drawer svg {
      width: 10px;
      height: 10px;
    }

    .menu-drawer .icon-plus svg {
      --icon-stroke-width: 2.5 !important;
    }

    /* Shift + icons to left, remove extra padding that causes unequal spacing */
    .menu-drawer .icon-plus {
      padding-inline-start: 0 !important;
      margin-inline-end: 50px !important;
    }

    .menu-drawer__menu-item > .svg-wrapper {
      padding-block: 0 !important;
    }

    /* Remove border between header and drawer */
    .header__row--top,
    .header__row--top:not(.divider--page-width),
    .header__row--top .header__columns {
      border-bottom: none !important;
      --border-bottom-width: 0px !important;
      --border-bottom-width-mobile: 0px !important;
    }
  }

  /* ================================
   * Footer navigation
   * ================================ */
  .menu-drawer__footer-nav {
    margin-top: auto;
    background-color: #e7e7e7;
    padding: var(--padding-lg) var(--padding-xl);
  }

  .menu-drawer__footer-nav-account {
    margin-bottom: 0;
  }

  .menu-drawer__footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .menu-drawer__footer-nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    text-decoration: none;
    color: var(--color-foreground);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
  }

  .menu-drawer__footer-nav-link:hover {
    color: var(--color-foreground);
  }

  .menu-drawer__footer-nav-link .svg-wrapper {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-inline-end: 30px;
  }

  .menu-drawer__footer-nav-link .svg-wrapper svg {
    width: 10px;
    height: 10px;
  }

  .menu-drawer__footer-nav-link--no-chevron {
    padding-top: 16px;
  }

  /* 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:jumbo-text (INDEX:208) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:211) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    border: 1px solid;
    margin-top: 2px;
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
    border: 1px solid;
    margin-top: 2px;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
    padding-bottom:8px
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:212) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

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

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 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: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:213) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:218) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:219) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

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

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:220) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-products-list (INDEX:222) */
.predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:223) */
.predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-resource-carousel */

/* START_SNIPPET:price-filter (INDEX:224) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-card (INDEX:227) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:228) */
.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 {
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      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:229) */
.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 (INDEX:230) */
.dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
  }

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

  .dialog--preloading {
    opacity: 0;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

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

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

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

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

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

  .dialog-zoomed-gallery__dialog {
    view-transition-name: zoom-dialog-ui;
  }

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

  /* ── Video play badge on zoom dialog thumbnails ── */
  .dialog-thumbnails-list__thumbnail {
    position: relative;
  }

  .dialog-thumbnails-list__play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(24px, 25%, 32px);
    height: clamp(24px, 25%, 32px);
    background-color: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .dialog-thumbnails-list__play-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:231) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:232) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal (INDEX:233) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

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

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:234) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:235) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:236) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:search-modal (INDEX:241) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

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

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

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

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

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

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

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

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

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

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

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

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

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

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

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

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

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:242) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:243) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:247) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:249) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-controls (INDEX:251) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

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

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

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow (INDEX:253) */
slideshow-slides {
    align-items: var(--slideshow-align-items, normal);
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }
/* END_SNIPPET:slideshow */

/* START_SNIPPET:sorting (INDEX:254) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

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

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets--drawer .sorting-filter__label {
    font-size: 1rem;
    font-weight: 400;
    color: #000;
  }

  /* Drawer sort: checkbox-style square UI */
  .facets--drawer .sorting-filter__checkmark {
    visibility: visible;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: var(--checkbox-border);
    border-radius: 0;
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid;
  }

  .facets--drawer .sorting-filter__checkmark svg {
    display: none;
  }

  .facets--drawer .sorting-filter__input:checked ~ .sorting-filter__checkmark {
    border-color: var(--color-foreground);
    background-color: var(--color-background);
    position: relative;
  }

  .facets--drawer .sorting-filter__input:checked ~ .sorting-filter__checkmark::after {
    content: '';
    position: absolute;
    width: calc(var(--checkbox-size) * 0.55);
    height: calc(var(--checkbox-size) * 0.55);
    background-color: var(--color-foreground);
  }

  /* Remove hover effects on sort options in drawer */
  .facets--drawer .sorting-filter__option:hover {
    background-color: transparent;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: block;
    }
  }

  /* In the drawer, sort options expand inline like filter accordions (not as a popover) */
  .facets--drawer .sorting-filter__options {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    width: 100%;
    min-width: unset;
    background-color: transparent;
  }

  .facets--drawer .sorting-filter__options-inner {
    padding: 0 20px;

    @media screen and (min-width: 750px) {
      padding: 0 28px;
    }
  }

  .facets--drawer .sorting-filter__option {
    min-width: unset;
    max-width: unset;
    padding: var(--padding-2xs) 0;
  }

  .facets--drawer .sorting-filter .facets__summary {
    padding-inline: 20px;

    @media screen and (min-width: 750px) {
      padding-inline: 28px;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:265) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:274) */
/* Inventory and Size Guide Container */
  .inventory-size-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -8px;
    width: 100%;
  }

  .inventory-wrapper {
    flex: 1;
  }

  .size-guide-wrapper {
    flex-shrink: 0;
  }

  .size-guide-wrapper .sc-trigger {
    font-size: 11px;
    text-decoration: underline;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-weight: 400;
    letter-spacing: 0.02em;
  }

  /* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:276) */
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);
    }
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:277) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:278) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */