/** Shopify CDN: Minification failed

Line 2538:16 Expected identifier but found whitespace
Line 2538:22 Unexpected "{"
Line 2538:29 Expected ":"
Line 2539:20 Expected identifier but found whitespace
Line 2539:22 Unexpected "{"
Line 2539:29 Expected ":"
Line 2540:20 Expected identifier but found whitespace
Line 2540:22 Unexpected "{"
Line 2540:29 Expected ":"
Line 2541:16 Expected identifier but found whitespace
... and 17 more hidden warnings

**/
/* START_SECTION:ash-announcement-bar (INDEX:2) */
.ash-ann {
    width: 100%;
    background: var(--ash-ann-bg, #0a0a0a);
    color: var(--ash-ann-fg, #fff);
    border-top: var(--ash-ann-bt, 0);
    border-bottom: var(--ash-ann-bb, 0);
    overflow: hidden;
  }
  .ash-ann--sticky {
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .ash-ann__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ash-ann-h, 38px);
    padding-inline: var(--ash-ann-pad, 16px);
    font-family: var(--font-body--family);
    font-size: var(--ash-ann-fs-m, 12px);
    letter-spacing: var(--ash-ann-ls, 0.08em);
    font-weight: var(--ash-ann-fw, 500);
    line-height: 1.3;
  }
  @media (min-width: 750px) {
    .ash-ann__inner { font-size: var(--ash-ann-fs-d, 13px); }
  }
  .ash-ann__inner--gradient {
    background: linear-gradient(90deg, var(--ash-ann-bg, #0a0a0a) 0%, var(--ash-ann-bg2, #1a1a1a) 50%, var(--ash-ann-bg, #0a0a0a) 100%);
  }
  .ash-ann a, .ash-ann a:hover, .ash-ann a:visited {
    color: inherit;
    text-decoration: var(--ash-ann-link-deco, none);
  }
  .ash-ann__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 1;
  }
  .ash-ann__item--no-upper { text-transform: none; }
  .ash-ann__msg {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  .ash-ann__msg > * { display: inline; margin: 0; line-height: 1; vertical-align: middle; }
  .ash-ann__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 auto;
  }
  .ash-ann__icon svg, .ash-ann__icon img { width: 14px; height: 14px; display: block; }
  .ash-ann__icon img { object-fit: contain; }

  /* Rotator */
  .ash-ann__rotator {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ash-ann-h, 38px);
  }
  .ash-ann__slides {
    position: relative;
    display: grid;
    grid-template-areas: 'stack';
    flex: 1 1 auto;
    text-align: center;
  }
  .ash-ann__slide {
    grid-area: stack;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 350ms ease, transform 350ms ease, visibility 0s linear 350ms;
    padding-inline: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ash-ann-h, 38px);
  }
  .ash-ann__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 350ms ease, transform 350ms ease, visibility 0s;
  }
  /* Slide-up mode: outgoing slide rises and fades upward, incoming
     slide rises from below. Driven by .ash-ann--anim-slide-up on the
     section root + .is-leaving on the slide leaving the stack. */
  .ash-ann--anim-slide-up .ash-ann__slide {
    transform: translateY(100%);
    transition: opacity 500ms ease, transform 500ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 500ms;
  }
  .ash-ann--anim-slide-up .ash-ann__slide.is-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: opacity 500ms ease, transform 500ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }
  .ash-ann--anim-slide-up .ash-ann__slide.is-leaving {
    transform: translateY(-100%);
    opacity: 0;
    visibility: visible;
    transition: opacity 500ms ease, transform 500ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 500ms;
  }
  .ash-ann__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s ease;
  }
  .ash-ann__arrow:hover { opacity: 1; }
  .ash-ann__arrow--prev { left: 6px; }
  .ash-ann__arrow--next { right: 6px; }

  /* Marquee */
  .ash-ann__marquee {
    width: 100%;
    overflow: hidden;
  }
  .ash-ann__track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    will-change: transform;
    animation: ash-ann-marquee var(--marquee-speed, 30s) linear infinite;
  }
  .ash-ann__track-group {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto;
    padding-right: 0;
  }
  .ash-ann__track-group .ash-ann__item { margin-right: 18px; }
  .ash-ann__sep {
    display: inline-flex;
    align-items: center;
    margin-right: 18px;
    opacity: 0.6;
  }
  @keyframes ash-ann-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Grid */
  .ash-ann__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 8px 24px;
    width: 100%;
    text-align: center;
    place-items: center;
  }
  @media (min-width: 750px) {
    .ash-ann__grid {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
  }
  .ash-ann__grid .ash-ann__item { justify-content: center; }

  /* Close */
  .ash-ann__close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
    transition: opacity 0.15s ease;
  }
  .ash-ann__close:hover { opacity: 1; }
/* END_SECTION:ash-announcement-bar */
/* START_SECTION:ash-fbt-featured (INDEX:9) */
.ash-fbtf { width: 100%; }
  .ash-fbtf__inner { max-width: 1280px; margin: 0 auto; padding-inline: 16px; position: relative; }
  .ash-fbtf__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
  .ash-fbtf__head-text { flex: 1 1 auto; min-width: 0; }
  .ash-fbtf__heading { margin: 0; font-family: var(--font-heading--family, inherit); font-size: clamp(1.3rem, 2.5vw, 1.85rem); font-weight: 400; }
  .ash-fbtf__sub { margin: 6px 0 0; opacity: 0.7; font-size: 0.95rem; }
  .ash-fbtf__scroller {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 4px;
  }
  .ash-fbtf__scroller::-webkit-scrollbar { display: none; }
  .ash-fbtf__card {
    flex: 0 0 calc(50% - 8px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  @media (min-width: 750px) {
    .ash-fbtf__card { flex-basis: calc(25% - 12px); }
  }
  @media (min-width: 1100px) {
    .ash-fbtf__card { flex-basis: calc(20% - 13px); }
  }
  .ash-fbtf__nav {
    display: none;
    gap: 8px;
    flex: 0 0 auto;
  }
  @media (min-width: 750px) { .ash-fbtf__nav { display: inline-flex; } }
  .ash-fbtf__nav-btn {
    width: 38px; height: 38px;
    border-radius: 999px;
    background: var(--color-background);
    border: 1px solid rgb(0 0 0 / 0.12);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .ash-fbtf__nav-btn:hover { background: var(--color-foreground); color: var(--color-background); border-color: var(--color-foreground); }
/* END_SECTION:ash-fbt-featured */
/* START_SECTION:ash-footer (INDEX:10) */
.ash-footer {
    background: var(--ash-ft-bg, #fff);
    color: var(--ash-ft-fg, #000000);
    /* Match the header: same body family + letter-spacing + weight
       defaults as the trigger labels. */
    font-family: var(--font-body--family);
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 56px 0 24px;
  }
  .ash-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
  }

  /* === Grid: 4 link columns + newsletter on desktop === */
  .ash-footer__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(280px, 1.4fr);
    gap: 40px;
    padding-bottom: 32px;
  }

  /* === Link columns === */
  .ash-footer__col {
    border: 0;
  }
  .ash-footer__col-head {
    list-style: none;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 14px;
    /* Footer column heading — sized clearly larger than items below
       to establish a visible typographic hierarchy. */
    font-family: var(--font-body--family);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--ash-ft-fg);
  }
  @media screen and (min-width: 750px) {
    .ash-footer__col-head { font-size: 16px; }
  }
  .ash-footer__col-head::-webkit-details-marker { display: none; }
  .ash-footer__col-icon { display: none; }

  .ash-footer__col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ash-footer__col-list a {
    color: var(--ash-ft-fg);
    text-decoration: none;
    /* Match the header rail-btn metric: 0.85rem + 0.7 opacity. */
    font-family: var(--font-body--family);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.4;
    opacity: 0.7;
    transition: opacity 0.15s ease;
  }
  .ash-footer__col-list a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* === Newsletter === */
  .ash-footer__news-heading {
    margin: 0 0 16px;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--ash-ft-fg);
  }
  /* Footer richtext mode — refined typography: clear hierarchy for
     headings, comfortable paragraph rhythm, subtle list styling,
     emphasised strong/em tokens. Colors all derive from --ash-ft-fg
     (the merchant's chosen footer foreground) so the richtext stays
     legible on both light- and dark-bg footers. */
  .ash-footer__news-rte {
    font-family: var(--font-body--family);
    font-size: 13.5px;
    line-height: 1.65;
    letter-spacing: 0.03em;
    color: var(--ash-ft-fg);
  }
  .ash-footer__news-rte > *:first-child { margin-top: 0; }
  .ash-footer__news-rte > *:last-child { margin-bottom: 0; }
  .ash-footer__news-rte p {
    margin: 0 0 12px;
    color: var(--ash-ft-fg);
    opacity: 0.85;
  }
  .ash-footer__news-rte p:last-child { margin-bottom: 0; }
  .ash-footer__news-rte h1,
  .ash-footer__news-rte h2,
  .ash-footer__news-rte h3,
  .ash-footer__news-rte h4 {
    margin: 0 0 10px;
    font-family: var(--font-body--family);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--ash-ft-fg);
    line-height: 1.3;
  }
  .ash-footer__news-rte h1 { font-size: 18px; }
  .ash-footer__news-rte ul,
  .ash-footer__news-rte ol {
    margin: 0 0 12px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ash-footer__news-rte li {
    color: var(--ash-ft-fg);
    opacity: 0.9;
    padding-left: 4px;
  }
  .ash-footer__news-rte ul li::marker {
    color: var(--ash-ft-fg);
  }
  .ash-footer__news-rte strong, .ash-footer__news-rte b {
    font-weight: 600;
    color: var(--ash-ft-fg);
    opacity: 1;
  }
  .ash-footer__news-rte em, .ash-footer__news-rte i {
    font-style: italic;
    color: var(--ash-ft-fg);
    opacity: 0.95;
  }
  .ash-footer__news-rte a {
    color: var(--ash-ft-fg);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    opacity: 0.85;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }
  .ash-footer__news-rte a:hover {
    opacity: 1;
  }
  .ash-footer__news-rte blockquote {
    margin: 0 0 12px;
    padding: 4px 0 4px 14px;
    border-left: 2px solid currentColor;
    font-style: italic;
    color: var(--ash-ft-fg);
    opacity: 0.85;
  }
  .ash-footer__news-rte hr {
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.15;
    margin: 16px 0;
  }
  .ash-footer__news-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 12px;
  }
  .ash-footer__news-label {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
  }
  .ash-footer__news-form input[type="email"] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-right: 0;
    background: transparent;
    color: var(--ash-ft-fg);
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    outline: none;
  }
  .ash-footer__news-form input[type="email"]::placeholder {
    color: rgba(0, 0, 0, 0.5);
  }
  .ash-footer__news-form input[type="email"]:focus {
    border-color: var(--ash-ft-brand);
  }
  .ash-footer__news-submit {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 24px;
    background: var(--ash-ft-brand);
    color: #ffffff;
    border: 1px solid var(--ash-ft-brand);
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .ash-footer__news-submit:hover {
    background: #062b52;
  }
  .ash-footer__news-status {
    margin: 6px 0;
    font-size: 13px;
  }
  .ash-footer__news-status--ok { color: #0a7d3a; }
  .ash-footer__news-status--err { color: #b00020; }

  .ash-footer__news-disclaimer {
    margin: 14px 0 0;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--ash-ft-fg);
    opacity: 0.7;
  }
  .ash-footer__news-disclaimer a {
    color: var(--ash-ft-fg);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* === Social row === */
  .ash-footer__social {
    list-style: none;
    margin: 18px 0;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }
  .ash-footer__social li { margin: 0; }
  .ash-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--ash-ft-brand);
    color: #ffffff;
    border-radius: 4px;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  /* Brand-color mode: no tile background, icons render their own art. */
  .ash-footer__social--brand a {
    background: transparent;
    width: 32px;
    height: 32px;
    border-radius: 0;
  }
  .ash-footer__social--brand a svg { width: 100%; height: 100%; display: block; }
  .ash-footer__social a:hover { opacity: 0.85; transform: translateY(-1px); }

  /* === Footer credit line === */
  .ash-footer__credit {
    margin: 6px 0 0;
    padding: 0;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ash-ft-fg);
    opacity: 0.55;
  }
  .ash-footer__credit a {
    color: var(--ash-ft-fg);
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 1;
  }
  .ash-footer__credit a:hover { opacity: 0.75; }

  /* === Copyright === */
  .ash-footer__copyright {
    margin: 0;
    padding: 16px 0 0;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ash-ft-fg);
    opacity: 0.7;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  /* === Mobile: accordions + stacked === */
  @media (max-width: 749px) {
    .ash-footer { padding: 32px 0 20px; }
    .ash-footer__inner { padding: 0; }
    .ash-footer__grid {
      grid-template-columns: 1fr;
      gap: 0;
      padding-bottom: 0;
    }
    /* Newsletter pulls to TOP on mobile. */
    .ash-footer__news {
      order: -1;
      padding: 0 20px 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
      margin-bottom: 4px;
    }
    /* Link columns become collapsible accordions. */
    .ash-footer__col {
      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }
    .ash-footer__col-head {
      padding: 18px 20px;
      cursor: pointer;
    }
    .ash-footer__col-head::after {
      content: '';
      display: none;
    }
    .ash-footer__col-icon {
      display: inline-flex;
      color: var(--ash-ft-fg);
    }
    .ash-footer__col[open] .ash-footer__col-icon-v {
      display: none;
    }
    .ash-footer__col-list {
      padding: 0 20px 18px;
      gap: 12px;
    }
    .ash-footer__social {
      margin: 12px 20px 0;
      padding: 18px 0;
    }
    .ash-footer__copyright {
      padding: 14px 20px 0;
    }
  }

  /* On desktop the <details> is permanently open. */
  @media (min-width: 750px) {
    .ash-footer__col { display: block; }
    .ash-footer__col[open] .ash-footer__col-list,
    .ash-footer__col:not([open]) .ash-footer__col-list { display: flex; }
  }
/* END_SECTION:ash-footer */
/* START_SECTION:header (INDEX:33) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */
/* START_SECTION:marquee (INDEX:44) */
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:product-information (INDEX:51) */
/* Sticky bar appears/disappears instantly — no slide-up or fade
     animation. Hidden via display:none until data-stuck=true. */
  .sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: none;
    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);
    align-items: center;
    gap: var(--gap-md);

    &::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);
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    display: flex;
    opacity: 1;
  }

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

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

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

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

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

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

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
    /* Variant title AND extras (Fit etc.) sit on the same line —
       truncate with an ellipsis if it overflows the narrow column
       between image and price. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-add-to-cart__variant:empty { display: none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */
/* START_SECTION:testimonials (INDEX:61) */
.ash-testimonials {
    padding-block: var(--ash-testimonials-pt, 96px) var(--ash-testimonials-pb, 96px);
  }
  .ash-testimonials__inner {
    max-width: var(--page-max-width, 1600px);
    margin: 0 auto;
    padding-inline: clamp(20px, 4vw, 64px);
  }
  .ash-testimonials__head {
    text-align: center;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .ash-testimonials__eyebrow {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary);
    opacity: 0.8;
  }
  .ash-testimonials__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--color-foreground-heading);
  }
  .ash-testimonials__subheading {
    margin: 0;
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--color-foreground);
    opacity: 0.85;
  }

  /* Carousel layout — horizontal scroll-snap. Bleeding past the
     section padding is intentional so the next card peeks in; the
     track's own padding-inline restores the symmetric gutter. */
  .ash-testimonials--carousel .ash-testimonials__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(400px, 32%);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(20px, 4vw, 64px);
    padding-bottom: 12px;
    margin-inline: calc(clamp(20px, 4vw, 64px) * -1);
    padding-inline: clamp(20px, 4vw, 64px);
    scrollbar-width: none;
  }
  .ash-testimonials--carousel .ash-testimonials__track::-webkit-scrollbar { display: none; }
  .ash-testimonials__track:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 8px; }

  /* Grid layout — multi-column with even gutters. Explicit column
     count per breakpoint so 5 cards distribute as 3+2 on desktop,
     2 per row on tablet, single column on mobile. */
  .ash-testimonials--grid .ash-testimonials__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  @media (max-width: 989px) {
    .ash-testimonials--grid .ash-testimonials__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 749px) {
    .ash-testimonials--grid .ash-testimonials__track { grid-template-columns: 1fr; }
  }
  /* Cards in grid mode shouldn't carry the carousel-only snap rule
     (harmless visually but keeps the cascade clean). */
  .ash-testimonials--grid .ash-testimonial-card { scroll-snap-align: none; }

  .ash-testimonial-card {
    scroll-snap-align: center;
    background: var(--color-background);
    border: 1px solid var(--color-border, #3331311a);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .ash-testimonial-card__media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-border, #3331311a);
  }
  .ash-testimonial-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ash-testimonial-card__body {
    padding: 24px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    flex: 1;
  }
  .ash-testimonial-card__product {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--color-foreground-heading);
  }
  .ash-testimonial-card__stars {
    display: inline-flex;
    gap: 4px;
    color: #F5B400;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.06));
  }
  .ash-testimonial-card__star {
    width: 20px;
    height: 20px;
  }
  .ash-testimonial-card__quote {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.55;
    color: var(--color-foreground);
    margin: 0;
  }
  .ash-testimonial-card__quote p { margin: 0; }
  .ash-testimonial-card__author {
    margin: 4px 0 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--color-foreground-heading);
    letter-spacing: 0.01em;
  }
  .ash-testimonial-card__meta {
    margin: 0;
    font-size: 12px;
    color: var(--color-foreground);
    opacity: 0.7;
    letter-spacing: 0.04em;
  }

  .ash-testimonials__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
  }
  .ash-testimonials__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--color-primary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .ash-testimonials__dot.is-active {
    background: var(--color-primary);
  }

  @media (max-width: 989px) {
    .ash-testimonials--carousel .ash-testimonials__track { grid-auto-columns: 60%; }
  }
  @media (max-width: 749px) {
    .ash-testimonials { padding-block: 48px; }
    .ash-testimonials__head { margin-bottom: 32px; }
    .ash-testimonials--carousel .ash-testimonials__track { grid-auto-columns: 80%; }
    .ash-testimonial-card__body { padding: 20px 20px 28px; }
  }
/* END_SECTION:testimonials */
/* START_BLOCK:_accordion-row (INDEX:62) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */
/* START_BLOCK:_header-logo (INDEX:97) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

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

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

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

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

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

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */
/* START_BLOCK:_header-menu (INDEX:98) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

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

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

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

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

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

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

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

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

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

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

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

    display: flex;
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    background-color: transparent;
  }

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

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

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */
/* START_BLOCK:_product-details (INDEX:110) */
/* 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:accordion (INDEX:119) */
.accordion {
    flex: 1;
    width: 100%;
  }

  /* ============================================================
     Ralph-Lauren style accordion on product pages:
       - Uppercase, letter-spaced summary text
       - Icon stays on the left
       - Clean long-arrow "→" on the right (replaces caret/plus)
       - Thin horizontal divider lines between rows
     ============================================================ */
  main[data-template='product'] .accordion {
    --ash-acc-border: rgb(var(--color-foreground-rgb) / 0.14);
  }
  main[data-template='product'] .accordion .details {
    border-top: 1px solid var(--ash-acc-border) !important;
    border-bottom: 0 !important;
  }
  main[data-template='product'] .accordion accordion-custom:last-child .details {
    border-bottom: 1px solid var(--ash-acc-border) !important;
  }
  main[data-template='product'] .accordion .details__header {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--color-foreground);
  }
  main[data-template='product'] .accordion .details__icon {
    margin-inline-end: 0;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    opacity: 0.85;
  }
  /* Hide the theme's default open/close icons; use our long arrow */
  main[data-template='product'] .accordion .details__header > .svg-wrapper.icon-caret,
  main[data-template='product'] .accordion .details__header > .svg-wrapper.icon-plus {
    display: none !important;
  }
  /* Slim long right arrow — mask-image, currentColor-driven */
  main[data-template='product'] .accordion .details__header::after {
    content: '';
    margin-left: auto;
    width: 22px;
    height: 8px;
    background: currentColor;
    opacity: 0.7;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M1 4 H21 M17 1 L21 4 L17 7'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><path d='M1 4 H21 M17 1 L21 4 L17 7'/></svg>") center / contain no-repeat;
    transition: transform 0.25s ease;
    flex: 0 0 auto;
  }
  main[data-template='product'] .accordion .details[open] .details__header::after {
    transform: rotate(90deg);
    opacity: 1;
  }
  main[data-template='product'] .accordion .details-content {
    padding: 2px 2px 16px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgb(var(--color-foreground-rgb) / 0.78);
  }

  .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:ash-breadcrumbs (INDEX:121) */
.ash-breadcrumbs--block {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .ash-breadcrumbs--block .ash-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: none;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }
  .ash-breadcrumbs--block .ash-breadcrumbs__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .ash-breadcrumbs--block .ash-breadcrumbs__link:hover {
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .ash-breadcrumbs--block .ash-breadcrumbs__sep {
    color: rgb(var(--color-foreground-rgb) / 0.35);
  }
  .ash-breadcrumbs--block .ash-breadcrumbs__item {
    line-height: 1.2;
  }
  .ash-breadcrumbs--block .ash-breadcrumbs__item--current {
    color: var(--color-foreground);
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* `align-self` overrides the parent's cross-axis alignment of the
     nav element itself; `justify-content` controls the LIST inside;
     `text-align` is a safety net for inline rendering contexts. The
     auto-margin forces the nav to leave the opposite edge open. */
  .ash-breadcrumbs--align-left {
    justify-content: flex-start !important;
    align-self: flex-start !important;
    text-align: left !important;
    margin-inline-end: auto !important;
  }
  .ash-breadcrumbs--align-center {
    justify-content: center !important;
    align-self: center !important;
    text-align: center !important;
    margin-inline: auto !important;
  }
  .ash-breadcrumbs--align-right {
    justify-content: flex-end !important;
    align-self: flex-end !important;
    text-align: right !important;
    margin-inline-start: auto !important;
  }

  /* Safety net — on PRODUCT pages, breadcrumbs are always left-aligned
     regardless of which --align-* class the block instance saved.
     (User's editor instance may still carry the old "right" setting
     until they re-save in the editor.) */
  main[data-template='product'] .ash-breadcrumbs--block {
    justify-content: flex-start !important;
    align-self: flex-start !important;
    text-align: left !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
  }
  main[data-template='product'] .ash-breadcrumbs--block .ash-breadcrumbs__list {
    justify-content: flex-start !important;
  }
/* END_BLOCK:ash-breadcrumbs */
/* START_BLOCK:ash-coupon-codes (INDEX:125) */
.ash-cc {
    width: 100%;
    --ash-cc-bg:     {{ block.settings.card_bg     | default: '#B85450' }};
    --ash-cc-bg-mid: {{ block.settings.card_bg_mid | default: '#D89B97' }};
    --ash-cc-bg-end: {{ block.settings.card_bg_end | default: '#F4DDD9' }};
    --ash-cc-fg:     {{ block.settings.card_text   | default: '#2A1614' }};
    --ash-cc-accent: {{ block.settings.card_accent | default: '#7A1F1F' }};
  }
  .ash-cc__heading {
    font-family: var(--font-heading--family);
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 8px;
  }
  /* Wrap is the positioning context — carousel fills the row,
     arrows float ON TOP of the carousel at the left/right edges
     and only show when there's content to scroll in that direction. */
  .ash-cc__carousel-wrap {
    position: relative;
  }
  .ash-cc__carousel {
    width: 100%;
    min-width: 0;
    display: flex;
    gap: {{ block.settings.card_gap | default: 28 }}px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    padding: 6px 4px;
    scroll-behavior: smooth;
  }
  .ash-cc__carousel::-webkit-scrollbar { display: none; }

  /* Carousel arrows — overlaid on the carousel itself. */
  .ash-cc__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: var(--color-foreground, #111);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease, visibility 0s linear 160ms;
    z-index: 3;
  }
  .ash-cc__arrow--prev { left: 8px; }
  .ash-cc__arrow--next { right: 8px; }
  .ash-cc__arrow:hover {
    background: var(--color-foreground, #111);
    border-color: var(--color-foreground, #111);
    color: var(--color-background, #fff);
  }
  /* Hidden when no scroll is possible in that direction.
     We hide (not just disable) so they don't sit visually on the edge. */
  .ash-cc__arrow[disabled] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, visibility 0s linear 160ms;
  }

  /* ═══════════ TICKET-STUB COUPON CARD ═══════════
     A perforated paper-ticket look — bold discount block on the left,
     dashed-perforation in the middle, code & copy on the right.
     Notches cut on top/bottom of the perforation line so the card
     reads as TWO halves of one ticket. */
  .ash-cc__card {
    position: relative;
    flex: 0 0 auto;
    /* Desktop: fixed 280px tickets. Mobile rule overrides below to
       force one ticket per viewport so no neighbour bleeds in. */
    width: 280px;
    min-height: 96px;
    background:
      linear-gradient(
        135deg,
        var(--ash-cc-bg, #B85450) 0%,
        var(--ash-cc-bg-mid, #D89B97) 45%,
        var(--ash-cc-bg-end, #F4DDD9) 100%
      );
    color: var(--ash-cc-fg, var(--color-foreground));
    border: 1.5px solid var(--ash-cc-accent, var(--color-primary, var(--color-foreground)));
    border-radius: 12px;
    padding: 14px 16px 14px 18px;
    scroll-snap-align: start;
    text-align: left;
    cursor: default;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 14px;
    row-gap: 4px;
    overflow: visible;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .ash-cc__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgb(0 0 0 / 0.14);
  }
  /* Half-circle notches cut into BOTH ends of every ticket.
     Size is configurable. The notch is half outside, half inside —
     producing a clear half-moon bite on each edge. Background colour
     matches the page so the notch reads as a real cut. */
  .ash-cc__card::before,
  .ash-cc__card::after {
    content: "";
    position: absolute;
    width: {{ block.settings.notch_size | default: 22 }}px;
    height: {{ block.settings.notch_size | default: 22 }}px;
    background: var(--color-background, #fff);
    border: 1.5px solid var(--ash-cc-accent, var(--color-primary, var(--color-foreground)));
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .ash-cc__card::before { left: calc({{ block.settings.notch_size | default: 22 }}px / -2); }
  .ash-cc__card::after  { right: calc({{ block.settings.notch_size | default: 22 }}px / -2); }

  /* Left half — label + description sit in column 1 above the divider. */
  .ash-cc__card > .ash-cc__label { grid-column: 1; grid-row: 1; }
  .ash-cc__card > .ash-cc__desc  { grid-column: 1; grid-row: 2; }
  /* Right half — code + Copy span the SAME rows as label + desc only.
     Once those rows end, the divider naturally ends with them. */
  .ash-cc__card > .ash-cc__code-row {
    grid-column: 2;
    grid-row: 1 / span 2;
    border-inline-start: 1.5px dashed rgb(var(--color-foreground-rgb) / 0.25);
    padding-inline-start: 14px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    min-width: 92px;
  }
  /* Below the divider — condition / expiry span the FULL card width. */
  .ash-cc__card > .ash-cc__meta {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  /* Discount label — gradient text fill (metallic grey sweep) */
  .ash-cc__label {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    background: linear-gradient(135deg, #2B313A 0%, #5B6470 45%, #9AA1AA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .ash-cc__desc {
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgb(var(--color-foreground-rgb) / 0.78);
    margin: 0;
  }
  .ash-cc__meta {
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin-top: 4px;
  }

  /* Right column — code + copy stacked */
  .ash-cc__code-row { margin: 0; }
  .ash-cc__code {
    display: block;
    font-family: var(--font-body--family);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 6px 8px;
    background: linear-gradient(135deg, #C9CFD7 0%, #E2E5EA 50%, #F4F5F7 100%);
    border-radius: 4px;
    text-align: center;
    color: var(--color-foreground);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.04);
  }
  .ash-cc__copy {
    font-family: var(--font-body--family);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #2B313A 0%, #4B5260 55%, #6B7280 100%);
    border: 0;
    color: #FFFFFF;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.06);
  }
  .ash-cc__copy:hover {
    background: linear-gradient(135deg, #1B1F26 0%, #3B414C 55%, #5B6270 100%);
    box-shadow: 0 4px 10px rgb(0 0 0 / 0.18);
  }
  .ash-cc__copy:active { transform: scale(0.96); }
  .ash-cc__copy[data-copied='true'] {
    background: linear-gradient(135deg, #1F6B3A 0%, #2E8C53 55%, #3DA56B 100%);
    color: #FFFFFF;
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.06);
  }

  /* "View all" tile — dashed like a "tear here" stub */
  .ash-cc__viewall {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px dashed var(--ash-cc-accent, var(--color-primary, var(--color-foreground)));
    border-radius: 12px;
    cursor: pointer;
    padding: 16px 12px;
    width: min(140px, 50%);
    min-height: 96px;
    color: var(--ash-cc-accent, var(--color-primary, var(--color-foreground)));
    transition: background-color 0.15s ease, transform 0.2s ease;
  }
  .ash-cc__viewall:hover {
    background: rgb(var(--color-foreground-rgb) / 0.03);
    transform: translateY(-2px);
  }
  .ash-cc__viewall-count {
    font-family: var(--font-heading--family);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
  }
  .ash-cc__viewall-label {
    font-family: var(--font-body--family);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 6px;
  }

  /* ═══════════ FULL-HEIGHT ANIMATED DRAWER ═══════════ */
  .ash-cc__drawer {
    border: 0;
    padding: 0;
    background: var(--color-background);
    color: var(--color-foreground);
    max-width: 480px;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    box-shadow: 0 0 64px rgb(0 0 0 / 0.2);
    /* Pre-open: off-screen right */
    transform: translateX(100%);
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0.16, 1),
                opacity 0.2s ease;
    opacity: 0;
    inset-block: 0;
    inset-inline-end: 0;
  }
  /* When dialog opens, native [open] flips us to onscreen */
  .ash-cc__drawer[open] {
    transform: translateX(0);
    opacity: 1;
  }
  .ash-cc__drawer::backdrop {
    background: rgb(0 0 0 / 0);
    transition: background-color 0.36s ease;
  }
  .ash-cc__drawer[open]::backdrop {
    background: rgb(0 0 0 / 0.5);
  }
  .ash-cc__drawer-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ash-cc__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    flex: 0 0 auto;
  }
  .ash-cc__drawer-title {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.005em;
  }
  .ash-cc__drawer-close {
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: inherit;
    transition: background-color 0.15s ease;
  }
  .ash-cc__drawer-close:hover {
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }
  .ash-cc__drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 22px 26px 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  /* Inside the drawer, each ticket takes the full width */
  .ash-cc__card--full {
    width: 100% !important;
    min-height: 110px;
  }

  /* ═══════════ MOBILE LAYOUT ═══════════
     One full ticket per viewport, no neighbour-card bleed.
     Carousel gets symmetric inline padding so the snapped card
     sits flush with the visible padding gutters on both sides.
     Card width = viewport - 2× gutter, so its right edge stays
     inside the visible area. Arrows already sit below via the
     column-flow wrap above. */
  @media (max-width: 749px) {
    .ash-cc__carousel {
      padding-inline: 16px;
      gap: 14px;
      scroll-padding-inline: 16px;
    }
    .ash-cc__card,
    .ash-cc__viewall {
      width: calc(100vw - 64px) !important;
      max-width: 360px;
      scroll-snap-align: center;
      scroll-snap-stop: always;
    }
    .ash-cc__arrow {
      width: 36px;
      height: 36px;
    }
    /* Tighten the heading-to-carousel-to-arrows rhythm on mobile. */
    .ash-cc__heading {
      padding-inline: 16px;
    }
  }
/* END_BLOCK:ash-coupon-codes */
/* START_BLOCK:ash-cro-points (INDEX:127) */
.ash-cro { width: 100%; }
  .ash-cro__heading {
    margin: 0 auto 18px;
    text-align: center;
    font-family: var(--font-body--family);
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8a6f30;
    position: relative;
    padding-bottom: 10px;
  }
  .ash-cro__heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #C9A961, transparent);
  }

  /* Mobile: 2 columns × 3 rows so every item is fully visible,
     no scroll, no carousel. Desktop: single row of 6 cells. */
  .ash-cro__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }
  @media (min-width: 750px) {
    .ash-cro__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px 18px;
    }
  }
  .ash-cro__item {
    margin: 0;
    padding: 0;
    min-width: 0;
    position: relative;
  }

  .ash-cro__inner {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    text-align: center;
    font: inherit;
    cursor: pointer;
  }
  .ash-cro__circle {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1.25px solid #C9A961;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #B8923D;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.18) 0%, rgba(232, 213, 167, 0.10) 60%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0 1px 0 rgba(201, 169, 97, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .ash-cro__circle svg { width: 22px; height: 22px; display: block; }
  .ash-cro__inner:hover .ash-cro__circle,
  .ash-cro__inner[aria-expanded='true'] .ash-cro__circle {
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.30) 0%, rgba(232, 213, 167, 0.18) 60%, rgba(255, 255, 255, 0) 100%);
    border-color: #B8923D;
    transform: translateY(-1px);
  }
  .ash-cro__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    min-width: 0;
    width: 100%;
  }
  /* Title: FULL — no clamp, no truncation. Wraps as many lines as
     it needs to fit the cell width. */
  .ash-cro__title {
    font-family: var(--font-body--family);
    font-size: 0.62rem !important;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--color-foreground, #111);
    text-wrap: balance;
  }
  @media (min-width: 750px) {
    .ash-cro__title { font-size: 0.78rem !important; }
  }

  /* ── Description: always visible inline, on BOTH desktop and mobile. */
  .ash-cro__desc {
    position: static !important;
    display: block !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: rgba(0, 0, 0, 0.65) !important;
    font-family: var(--font-body--family);
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    text-wrap: balance;
  }
  .ash-cro__desc::after { display: none !important; }
  @media (min-width: 750px) {
    .ash-cro__desc { font-size: 0.7rem !important; }
  }
  @media (max-width: 749px) {
    .ash-cro__desc { font-size: 0.66rem !important; }
  }
/* END_BLOCK:ash-cro-points */
/* START_BLOCK:ash-fit-selector (INDEX:134) */
.ash-fit-selector { border: none; padding: 0; margin: 0; }
  .ash-fit-selector__label {
    display: block;
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: var(--color-foreground);
  }
  .ash-fit-selector__group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ash-fit-selector__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Founders Grotesk sits high — keep 10px top, drop bottom to 6px
       so the visible text reads as vertically centered in the pill. */
    padding: 10px 16px 6px;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .ash-fit-selector__option:hover {
    background: var(--color-primary);
    color: var(--color-background);
    border-color: var(--color-primary);
  }
  .ash-fit-selector__option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-background);
  }
  .ash-fit-selector__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  @media (max-width: 749px) {
    .ash-fit-selector__option { min-width: 0; }
  }
/* END_BLOCK:ash-fit-selector */
/* START_BLOCK:ash-magic-accordion-row (INDEX:135) */
.ash-magic-accordion-row { width: 100%; }
  .ash-magic-accordion__content .ash-rt__p { margin: 0 0 0.65em; }
  .ash-magic-accordion__content .ash-rt__p:last-child { margin-bottom: 0; }
  .ash-magic-accordion__content .ash-rt__list { margin: 0 0 0.65em; padding-inline-start: 1.2em; }
  .ash-magic-accordion__content .ash-rt__h { display: none; }
  .ash-magic-accordion-row__empty { font-size: 0.82rem; opacity: 0.6; margin: 0; }
/* END_BLOCK:ash-magic-accordion-row */
/* START_BLOCK:ash-magic-custom-row (INDEX:136) */
.ash-magic-custom-row { width: 100%; }
  .ash-magic-fabric-panel { display: flex; flex-direction: column; gap: var(--padding-md, 20px); }
  .ash-magic-fabric__properties { display: flex; flex-direction: column; gap: var(--padding-sm); }
  .ash-magic-fabric__prop-row {
    display: grid;
    grid-template-columns: minmax(5.5em, 7em) 1fr minmax(5.5em, 7em);
    align-items: center;
    gap: var(--padding-sm);
    font-size: 0.82rem;
  }
  .ash-magic-fabric__prop-label { opacity: 0.65; letter-spacing: 0.02em; }
  .ash-magic-fabric__prop-label--left { text-align: left; }
  .ash-magic-fabric__prop-label--right { text-align: right; }
  .ash-magic-fabric__prop-track { position: relative; height: 1px; }
  .ash-magic-fabric__prop-line { position: absolute; inset: 0; background: currentColor; opacity: 0.25; }
  .ash-magic-fabric__prop-marker {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
  }
  .ash-magic-fabric__specs { display: flex; flex-direction: column; gap: var(--padding-md, 16px); }
  .ash-magic-fabric__spec-row {
    display: grid;
    grid-template-columns: minmax(4.5em, 5.5em) 1fr;
    gap: var(--padding-sm) var(--padding-md);
    align-items: start;
    font-size: 0.82rem;
    line-height: 1.45;
  }
  .ash-magic-fabric__spec-label { font-weight: 600; }
  .ash-magic-fabric__spec-value { color: rgb(var(--color-foreground-rgb) / 0.88); }
  .ash-magic-custom-row__empty { font-size: 0.82rem; opacity: 0.6; margin: 0; }
  @media (max-width: 749px) {
    .ash-magic-fabric__spec-row { grid-template-columns: 1fr; gap: 2px; }
    .ash-magic-fabric__prop-row { grid-template-columns: minmax(4.5em, 6em) 1fr minmax(4.5em, 6em); font-size: 0.78rem; }
  }
/* END_BLOCK:ash-magic-custom-row */
/* START_BLOCK:ash-metafield-text (INDEX:139) */
.ash-mf-text { display: block; }
  .ash-mf-text__heading {
    font-weight: 600;
    margin: 0 0 var(--padding-2xs);
  }
  /* Small-description treatment — mirrors Ralph Lauren's PDP body
     copy: 14px / 18px Founders Grotesk Text Regular in deep navy.
     The font family chain prefers the loaded "Founders Grotesk Text
     Regular" then falls back to RL_DroidKufi and system sans. */
  .ash-mf-text__value {
    margin: 0;
    font-family: 'Founders Grotesk Text Regular', RL_DroidKufi, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: rgb(4, 30, 58);
  }
/* END_BLOCK:ash-metafield-text */
/* START_BLOCK:ash-pincode-check (INDEX:141) */
.ash-pincode { font-family: var(--font-body--family); }
  .ash-pincode__label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-foreground, #111);
  }
  .ash-pincode__row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 420px;
  }
  .ash-pincode__input {
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1;
    color: #111;
    background: #fff;
    outline: none;
    transition: border-color 160ms ease;
  }
  .ash-pincode__input:focus { border-color: #111; }
  .ash-pincode__btn {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 14px;
    border-radius: 5px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 160ms ease, opacity 160ms ease;
  }
  .ash-pincode__btn:hover { background: #1f1f1f; border-color: #1f1f1f; }
  .ash-pincode__btn[disabled], .ash-pincode__btn.is-loading {
    opacity: 0.78;
    cursor: progress;
  }

  .ash-pincode__msg {
    margin-top: 12px;
    min-height: 1.4em;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--color-foreground, #111);
    display: none;
    align-items: center;
    gap: 10px;
  }
  .ash-pincode__msg.is-visible { display: inline-flex; }
  .ash-pincode__msg.is-error { color: #b00020; }
  .ash-pincode__msg.is-success { color: #1b6e1b; }
  .ash-pincode__msg strong { font-weight: 600; }

  /* Spinner + processing state — clean small ring + label */
  .ash-pincode__msg.is-loading { color: rgba(0, 0, 0, 0.7); }
  .ash-pincode__spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #000;
    animation: ash-pincode-spin 0.7s linear infinite;
  }
  .ash-pincode__progress {
    flex: 1 1 auto;
    height: 2px;
    max-width: 140px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .ash-pincode__progress-bar {
    position: absolute;
    inset: 0 100% 0 0;
    background: #000;
    animation: ash-pincode-fill var(--ash-pincode-ms, 1400ms) cubic-bezier(0.25, 0.8, 0.5, 1) forwards;
  }
  @keyframes ash-pincode-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes ash-pincode-fill {
    from { right: 100%; }
    to   { right: 0%; }
  }

  /* Success / error fade-in */
  .ash-pincode__msg.is-success,
  .ash-pincode__msg.is-error {
    animation: ash-pincode-pop 220ms ease;
  }
  @keyframes ash-pincode-pop {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 480px) {
    .ash-pincode__row { max-width: none; }
  }
/* END_BLOCK:ash-pincode-check */
/* START_BLOCK:ash-quantity-row (INDEX:144) */
.ash-quantity-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
    max-width: 100%;
  }
  .ash-quantity-row__label {
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--color-foreground);
  }
  .ash-quantity-row__stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border, rgb(0 0 0 / 0.15));
    border-radius: 999px;
    padding: 0;
    height: 26px;
    min-width: 0;
  }
  .ash-quantity-row__btn {
    appearance: none;
    background: none;
    border: 0;
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-foreground);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  .ash-quantity-row__btn:hover { color: var(--color-primary); }
  .ash-quantity-row__input {
    appearance: textfield;
    -moz-appearance: textfield;
    width: 15px;
    border: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    font-size: 0.78rem;
    color: var(--color-foreground);
    padding: 0;
    outline: none;
  }
  .ash-quantity-row__input::-webkit-outer-spin-button,
  .ash-quantity-row__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* Hide the internal quantity rendered inside buy-buttons, since this external row replaces it */
  .product-form-buttons .quantity-selector-wrapper,
  .product-form-buttons .quantity-label,
  .product-form-buttons .quantity-rules { display: none !important; }

  @media (max-width: 749px) {
    .ash-quantity-row__btn { width: 22px; height: 22px; }
    .ash-quantity-row__stepper { height: 26px; }
    .ash-quantity-row__input { width: 15px; }
  }
/* END_BLOCK:ash-quantity-row */
/* START_BLOCK:ash-rich-text-metafield (INDEX:145) */
.ash-rt-metafield .ash-rt__p { margin: 0 0 0.65em; }
  .ash-rt-metafield .ash-rt__p:last-child { margin-bottom: 0; }
  .ash-rt-metafield .ash-rt__list { margin: 0; padding-inline-start: 1.25em; }
  .ash-rt-metafield .ash-rt__list li { margin-block: 0.25em; }
/* END_BLOCK:ash-rich-text-metafield */
/* START_BLOCK:ash-short-benefits (INDEX:146) */
.ash-short-benefits { width: 100%; }
  .ash-sb__list {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }
  /* Any item that has chips (rendered from "Label (a|b|c)") spans the full
     row so its chip strip can breathe and doesn't push a 3-col cell into a
     tall ladder. */
  .ash-sb__item:has(.ash-sb__chips) {
    grid-column: 1 / -1;
  }
  /* Fall back to fewer per row when the column is narrow */
  @media (max-width: 749px) {
    .ash-sb__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 380px) {
    .ash-sb__list { grid-template-columns: 1fr; }
  }
  /* Item row — icon vertically centered with the first line of text;
     subtitle ("All-day wear") sits below the title row, indented to
     match. Using a 2-column grid (icon + text) gives perfect cross
     alignment regardless of font metrics. */
  .ash-sb__item {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    column-gap: 12px;
    row-gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-foreground);
    font-size: 0.82rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    min-width: 0;
  }
  .ash-sb__icon {
    grid-column: 1;
    grid-row: 1;
    width: 20px;
    height: 20px;
    background: transparent;
    color: rgba(0, 0, 0, 0.78);
    border: 0;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Optical centering with the first line of text. */
    margin-top: 1px;
  }
  .ash-sb__icon svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  .ash-sb__text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  /* Title row — Occasion · chip · chip · chip · chip */
  .ash-sb__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    line-height: 1.4;
  }
  .ash-sb__title {
    font-weight: 600;
    color: var(--color-foreground);
    white-space: nowrap;
  }
  .ash-sb__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
  }
  .ash-sb__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #000000;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
  }
  /* Remove the inter-chip separator dot — icons act as the visual
     break between chips now. */
  .ash-sb__chip:not(:last-child)::after { content: none !important; }

  .ash-sb__chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #6b1a1c;
    flex: 0 0 20px;
  }
  .ash-sb__chip-icon svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  /* === Occasion-row treatment ===
     When this item has a chip strip, the user wants the LEADING
     "tag" icon and the sub-line ("All-day wear") gone — chips are
     the whole row now. Also: bump the main label ("Occasion") to
     match the bigger chip text. */
  .ash-sb__item:has(.ash-sb__chips) {
    grid-template-columns: 1fr;
  }
  .ash-sb__item:has(.ash-sb__chips) .ash-sb__icon { display: none; }
  .ash-sb__item:has(.ash-sb__chips) .ash-sb__text { grid-column: 1; }
  .ash-sb__item:has(.ash-sb__chips) .ash-sb__sub  { display: none; }
  .ash-sb__item:has(.ash-sb__chips) .ash-sb__title {
    /* TITLE-only bump — the chips next to it stay at 0.95rem. */
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #000000;
  }
  .ash-sb__item:has(.ash-sb__chips) .ash-sb__chips {
    gap: 6px 18px;
  }
  .ash-sb__sub {
    font-size: 0.7rem;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    white-space: normal;
    line-height: 1.15;
    margin-top: 1px;
  }
  /* Tighten the title-row when chips are present so the label sits flush
     with the chip strip on the same baseline. */
  .ash-sb__item:has(.ash-sb__chips) .ash-sb__title {
    font-size: 0.78rem;
  }
/* END_BLOCK:ash-short-benefits */
/* START_BLOCK:ash-siblings (INDEX:147) */
.ash-siblings { width: 100%; }
  .ash-siblings__label {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 8px;
    color: var(--color-foreground);
  }
  .ash-siblings__count {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-weight: 400;
    margin-left: 4px;
  }
  .ash-siblings__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }
  /* Mobile: swatches shrink to ~75% of their configured size so a
     longer list comfortably wraps to several rows without crowding.
     The inline style supplies --ash-siblings-size as the desktop base;
     we derive the mobile size with calc() on width/height directly. */
  @media (max-width: 749px) {
    /* Mobile uses the SAME size as desktop now — the inline
       --ash-siblings-size from the admin setting wins everywhere. */
    .ash-siblings__title {
      max-width: calc(var(--ash-siblings-size, 30px) + 16px);
    }
    .ash-siblings__list { gap: 8px; }
  }
  .ash-siblings__item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
  }
  .ash-siblings__swatch {
    /* Size is driven 1:1 by the inline --ash-siblings-size variable,
       which comes from the block setting "Swatch size". No hidden
       multiplier so 30 in admin = 30px on screen. */
    width: var(--ash-siblings-size, 30px);
    height: var(--ash-siblings-size, 30px);
    border-radius: 6px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-secondary, #f4f4f4);
    box-sizing: border-box;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .ash-siblings__swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ash-siblings__placeholder {
    width: 50%;
    height: 50%;
    border-radius: 4px;
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }
  .ash-siblings__item:hover .ash-siblings__swatch {
    transform: scale(1.06);
    border-color: var(--color-foreground);
  }
  .ash-siblings__item--current .ash-siblings__swatch {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px var(--color-foreground);
  }
  .ash-siblings__title {
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    max-width: calc(var(--ash-siblings-size, 44px) + 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* +N overflow pill */
  .ash-siblings__swatch--more {
    background: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
  }
  .ash-siblings__more-text {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--color-background);
  }
  .ash-siblings__item--more:hover .ash-siblings__swatch--more {
    transform: scale(1.06);
    background: #1f1f1f;
  }

  /* ============================================================
     Hover tooltip — larger product image + clamped title
     ============================================================ */
  .ash-siblings__tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 180px;
    /* Hard cap the tooltip width to viewport minus 16px gutter so
       even at the narrowest phone it can fit fully on-screen once
       the JS clamp positions it. */
    max-width: calc(100vw - 16px);
    padding: 8px;
    background: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    border-radius: 8px;
    box-shadow: 0 14px 36px rgb(0 0 0 / 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
  }
  /* When JS clamps the tooltip into the viewport, it sets a custom
     `--ash-tip-x` so we anchor by pixel offset from the swatch's
     left edge instead of the percentage-based center. */
  .ash-siblings__tooltip[data-ash-clamped] {
    left: var(--ash-tip-x, 0px) !important;
    transform: translateX(0) translateY(0) !important;
  }
  .ash-siblings__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    background: var(--color-background);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    border-left: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    border-right: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }
  .ash-siblings__item:hover .ash-siblings__tooltip,
  .ash-siblings__item:focus-visible .ash-siblings__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 0s;
  }
  /* No hover tooltip on the +N button (drawer handles it). */
  .ash-siblings__item--more .ash-siblings__tooltip { display: none !important; }

  .ash-siblings__tooltip-media {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-background-secondary, rgb(var(--color-foreground-rgb) / 0.04));
  }
  .ash-siblings__tooltip-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ash-siblings__tooltip-title {
    display: -webkit-box;
    -webkit-line-clamp: var(--ash-siblings-tooltip-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--color-foreground);
    text-align: center;
    word-break: break-word;
    padding: 0 2px 2px;
  }

  /* ============================================================
     Overflow drawer — opened by the +N pill
     ============================================================ */
  .ash-siblings-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    pointer-events: none;
  }
  .ash-siblings-drawer[aria-hidden='false'] {
    visibility: visible;
    pointer-events: auto;
  }
  .ash-siblings-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.4);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .ash-siblings-drawer[aria-hidden='false'] .ash-siblings-drawer__scrim { opacity: 1; }
  .ash-siblings-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(440px, 96vw);
    background: var(--color-background, #fff);
    color: var(--color-foreground, #111);
    box-shadow: -16px 0 40px rgb(0 0 0 / 0.18);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ash-siblings-drawer[aria-hidden='false'] .ash-siblings-drawer__panel {
    transform: translateX(0);
  }
  .ash-siblings-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    flex: 0 0 auto;
  }
  .ash-siblings-drawer__title {
    margin: 0 !important;
    font-family: var(--font-body--family) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--color-foreground) !important;
    line-height: 1.2 !important;
  }
  .ash-siblings-drawer__close {
    background: transparent;
    border: 0;
    padding: 6px;
    margin: -6px;
    cursor: pointer;
    color: var(--color-foreground);
    line-height: 0;
  }
  .ash-siblings-drawer__close:hover { opacity: 0.7; }
  .ash-siblings-drawer__grid {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(var(--ash-siblings-drawer-cols, 2), 1fr);
    gap: 18px 14px;
    align-content: start;
  }
  .ash-siblings-drawer__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }
  .ash-siblings-drawer__media {
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-background-secondary, rgb(var(--color-foreground-rgb) / 0.04));
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }
  .ash-siblings-drawer__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms ease;
  }
  .ash-siblings-drawer__card:hover .ash-siblings-drawer__media img {
    transform: scale(1.04);
  }
  .ash-siblings-drawer__name {
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--color-foreground);
    text-align: center;
    word-break: break-word;
  }
  .ash-siblings-drawer__card--current .ash-siblings-drawer__media {
    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px var(--color-foreground);
    border-color: transparent;
  }
  .ash-siblings-drawer__card--current .ash-siblings-drawer__name {
    font-weight: 600;
  }

  /* Lock body scroll when any siblings drawer is open. */
  body.ash-siblings-drawer-open { overflow: hidden; }
/* END_BLOCK:ash-siblings */
/* START_BLOCK:ash-size-chart (INDEX:148) */
.ash-sc-block { width: 100%; }
  .ash-sc-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--color-border, rgb(0 0 0 / 0.15));
    background: transparent;
    color: var(--color-foreground);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .ash-sc-trigger:hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .ash-sc-trigger__icon { display: inline-flex; align-items: center; }
  /* Icon height matches the trigger letter height (~16px @ 0.9rem)
     so the ruler reads as visually paired with "Size Chart". */
  .ash-sc-trigger__icon svg { width: 32px; height: 16px; display: block; }

  /* When JS has relocated the trigger into the SIZE legend, collapse the
     wrapper so it leaves no flow space — but keep its children (the dialog!)
     functional. `display: contents` removes the wrapper's box without
     removing its children from the document, so the <dialog> still mounts. */
  .ash-sc-block--moved {
    display: contents;
  }
  /* The trigger has been MOVED out of the wrapper, so the only thing left
     in the wrapper is the <dialog> — that's already invisible by default
     until .showModal() opens it, so display: contents is safe. */

  /* Inline: now styled as a PILL (same shape as the ATC / Slim Fit
     button) so it reads as an actionable control, plus a small
     bottom margin to separate it from the variant buttons below. */
  .variant-option--size__legend--with-chart {
    display: inline-flex !important;
    align-items: center;
    gap: 0 !important;
    width: auto !important;
    /* Space below the pill so it doesn't crowd the variant button
       row underneath. Tighter on mobile for a more compact stack. */
    margin-bottom: 20px !important;
    padding-bottom: 4px !important;
  }
  @media (max-width: 749px) {
    .variant-option--size__legend--with-chart {
      margin-bottom: 14px !important;
      padding-bottom: 2px !important;
    }
  }
  .ash-sc-trigger--inline {
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px !important;
    gap: 8px;
    padding: 8px 16px 6px;
    border: 1px solid var(--color-border, rgb(0 0 0 / 0.18));
    border-radius: 999px;
    background: transparent;
    color: var(--color-foreground);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  }
  .ash-sc-trigger--inline:hover,
  .ash-sc-trigger--inline:focus-visible {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    text-decoration: none;
  }
  /* Ruler icon on hover: only repaint the STROKE white, never the
     fill — the ruler SVG ships `fill="none"` and is stroke-only.
     Forcing fill:currentColor (white) here would fill every shape
     with solid white and you'd see a white bar instead of a ruler. */
  .ash-sc-trigger--inline:hover .ash-sc-trigger__icon,
  .ash-sc-trigger--inline:hover .ash-sc-trigger__icon svg {
    color: #fff !important;
  }
  .ash-sc-trigger--inline:hover .ash-sc-trigger__icon svg [stroke],
  .ash-sc-trigger--inline:hover .ash-sc-trigger__icon svg path,
  .ash-sc-trigger--inline:hover .ash-sc-trigger__icon svg rect,
  .ash-sc-trigger--inline:hover .ash-sc-trigger__icon svg line {
    stroke: #fff !important;
    fill: none !important;
  }
  .ash-sc-trigger--inline .ash-sc-trigger__icon svg { width: 32px; height: 16px; }

  /* Dialog */
  .ash-sc-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(960px, 92vw);
    width: 92vw;
    max-height: 86vh;
    margin: auto;
  }
  @media (min-width: 1100px) {
    .ash-sc-dialog { max-width: 880px; width: 880px; }
  }
  .ash-sc-dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(2px);
  }
  .ash-sc-dialog__panel {
    background: var(--color-background, #fff);
    color: var(--color-foreground, #111);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    box-shadow: 0 24px 64px rgb(0 0 0 / 0.18);
  }
  .ash-sc-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-block-end: 1px solid rgb(0 0 0 / 0.08);
  }
  .ash-sc-dialog__title {
    margin: 0;
    font-family: var(--font-heading--family, inherit);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  .ash-sc-dialog__close {
    background: transparent;
    border: 0;
    width: 32px; height: 32px;
    border-radius: 999px;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
  }
  .ash-sc-dialog__close:hover { background: rgb(0 0 0 / 0.05); }

  /* Body layout */
  .ash-sc-dialog__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 28px 32px;
    overflow-y: auto;
  }
  @media (min-width: 900px) {
    .ash-sc-dialog__body { grid-template-columns: 1.6fr 1fr; gap: 40px; }
  }
  .ash-sc-dialog__left { min-width: 0; }
  .ash-sc-dialog__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    justify-self: center;
    align-self: start;
  }
  .ash-sc-diagram__title {
    margin: 0 0 4px;
    font-family: var(--font-heading--family, inherit);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .ash-sc-diagram__img {
    max-width: 100%;
    max-height: 360px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
  }

  /* Meta line */
  .ash-sc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .ash-sc-meta__name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-primary, #806e3a);
    letter-spacing: 0.01em;
  }

  /* Toggle */
  .ash-sc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding: 4px;
    background: rgb(0 0 0 / 0.04);
    border-radius: 999px;
  }
  .ash-sc-toggle__btn {
    background: transparent;
    border: 0;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: rgb(var(--color-foreground-rgb) / 0.6);
    border-radius: 999px;
    transition: color 0.15s ease, background-color 0.15s ease;
    z-index: 1;
  }
  .ash-sc-toggle__btn.is-active {
    color: var(--color-background);
    background: var(--color-foreground);
  }
  .ash-sc-toggle__track,
  .ash-sc-toggle__thumb { display: none; }

  /* Table */
  .ash-sc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ash-sc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
  }
  .ash-sc-table th,
  .ash-sc-table td {
    padding: 18px 12px;
    text-align: left;
    border-block-end: 1px solid rgb(0 0 0 / 0.08);
    white-space: nowrap;
  }
  .ash-sc-table th {
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    color: rgb(var(--color-foreground-rgb) / 0.85);
    border-block-end-width: 1px;
  }
  .ash-sc-table tr:last-child td { border-block-end: 0; }
  .ash-sc-table tbody tr { transition: background-color 0.15s ease; }
  .ash-sc-table tbody tr:hover { background: rgb(0 0 0 / 0.025); }
  .ash-sc-table td:first-child { font-weight: 500; }

  body.ash-sc-open { overflow: hidden; }

  @media (max-width: 749px) {
    .ash-sc-dialog__header { padding: 16px 18px; }
    .ash-sc-dialog__body { padding: 16px 18px 28px; }
    .ash-sc-table th, .ash-sc-table td { padding: 12px 8px; font-size: 0.85rem; }
  }

  /* Fit pill tabs (V2 schema) — two wide, slim-height pill buttons that
     show fits with relevant details inside the size-chart modal. */
  .ash-sc-fit-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    margin: 8px 0 18px;
  }
  .ash-sc-fit-pills:has(> :nth-child(3)) {
    /* 3+ fits: fall back to an equal-flex layout */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .ash-sc-fit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 18px;
    border: 1px solid var(--color-primary, var(--color-foreground));
    background: transparent;
    color: var(--color-primary, var(--color-foreground));
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .ash-sc-fit-pill:hover {
    background: var(--color-primary, var(--color-foreground));
    color: var(--color-background);
  }
  .ash-sc-fit-pill.is-active {
    background: var(--color-primary, var(--color-foreground));
    color: var(--color-background);
    border-color: var(--color-primary, var(--color-foreground));
  }
/* END_BLOCK:ash-size-chart */
/* START_BLOCK:ash-title-actions (INDEX:150) */
.ash-title-actions__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .ash-breadcrumbs { width: 100%; }
  .ash-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: none;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }
  .ash-breadcrumbs__item {
    line-height: 1.2;
  }
  .ash-breadcrumbs__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  .ash-breadcrumbs__link:hover {
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .ash-breadcrumbs__sep {
    color: rgb(var(--color-foreground-rgb) / 0.35);
  }
  .ash-breadcrumbs__item--current {
    color: var(--color-foreground);
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ash-title-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--padding-md);
    width: 100%;
  }
  .ash-title-actions__title {
    flex: 1 1 auto;
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: none;
    text-wrap: pretty;
  }
  .ash-title-actions__icons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-top: 0.15em;
  }
  .ash-title-actions__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 0;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .ash-title-actions__btn:hover { opacity: 1; }
  .ash-title-actions__btn:active { transform: scale(0.92); }
  .ash-title-actions__btn svg { width: 22px; height: 22px; }
  .ash-title-actions__btn--wishlist[aria-pressed="true"] svg path {
    fill: currentColor;
    stroke: currentColor;
  }
  .ash-title-actions__toast {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    padding: 4px 8px;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: currentColor;
    color: var(--color-background);
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .ash-title-actions__btn[data-shared="true"] .ash-title-actions__toast { opacity: 1; }
  .ash-title-actions__toast::before {
    content: "";
    color: var(--color-foreground);
    position: absolute; inset: 0;
    background: currentColor;
    opacity: 1;
    z-index: -1;
    border-radius: 2px;
  }
/* END_BLOCK:ash-title-actions */
/* START_BLOCK:ash-tshirt-badge (INDEX:151) */
/* Wrapper takes ZERO flow space — the badge is painted as a
     CSS background-image (mix-blend-mode multiply hides the JPEG's
     white card behind it) and floats over the empty area to the
     right of the price / quantity rows. */
  .ash-tshirt-badge {
    position: relative;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
  }
  .ash-tshirt-badge::after {
    content: '';
    position: absolute;
    top: 0;
    width: var(--ash-tb-max, 110px);
    aspect-ratio: 1 / 1;
    background-image: var(--ash-tb-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Multiply blends the JPEG's white background INTO the page
       background, so the teardrop reads as if it were a transparent
       PNG without us having to convert one. */
    mix-blend-mode: multiply;
    pointer-events: none;
    transform: translateY(-55%);
  }
  .ash-tshirt-badge--left::after   { left: 8px;  right: auto; }
  .ash-tshirt-badge--center::after { left: 50%;  right: auto; transform: translate(-50%, -55%); }
  .ash-tshirt-badge--right::after  { right: 8px; left: auto; }
  @media (max-width: 749px) {
    .ash-tshirt-badge::after {
      width: calc(var(--ash-tb-max, 110px) * 0.85);
    }
    .ash-tshirt-badge--right::after { right: 6px; }
    .ash-tshirt-badge--left::after  { left: 6px; }
  }
/* END_BLOCK:ash-tshirt-badge */
/* START_BLOCK:icon (INDEX:168) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */
/* START_BLOCK:swatches (INDEX:189) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */
/* START_BLOCK:variant-picker (INDEX:191) */
/* Rounded-square swatches inside the variant picker (override the global pill radius) */
  variant-picker .swatch { border-radius: 8px; }

  /* Rounded-square size buttons (Size option only).
     Fieldset is width:fit-content so the fieldset's right edge sits
     exactly at the right edge of the last size button (XXXL). The
     Size Chart link is absolutely placed at the top-right of the
     fieldset, so its right edge aligns with the buttons' right edge. */
  .variant-option--size {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
  }
  .variant-option--size > legend {
    width: 100%;
    margin-bottom: 6px;
    /* Reserve room for the absolute-positioned size chart link. */
    padding-right: 110px;
  }
  /* Wider, shorter rectangles. min-width keeps every size button
     a consistent base; padding-inline gives XXXL breathing room. */
  .variant-option--size .variant-option__button-label {
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
    height: 28px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-align: center;
  }
  .variant-option--size .variant-option__button-label__text {
    font-size: 0.78rem;
    line-height: 1;
  }
  /* Size Chart link sits inline right of the size buttons */
  .variant-option__size-chart {
    margin-left: auto;
    padding: 6px 4px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.01em;
    color: var(--color-foreground);
    cursor: pointer;
  }
  .variant-option__size-chart:hover { color: var(--color-primary); }

  @media (max-width: 749px) {
    .variant-option--size .variant-option__button-label {
      width: auto;
      min-width: 40px;
      height: 26px;
      padding: 0 6px;
    }
  }

  /* Hide ONLY the "Size" text inside the legend. The size chart
     block JS relocates its trigger INTO this legend at runtime, so
     fully hiding the legend would hide the chart link too. Instead,
     collapse the legend's raw text node (font-size 0 + transparent)
     and restore normal sizing for any element children. */
  .variant-option--size > legend {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 0 !important;
    width: 100%;
  }
  .variant-option--size > legend > * {
    font-size: 0.9rem !important;
    color: var(--color-foreground) !important;
    line-height: 1.2 !important;
  }
/* END_BLOCK:variant-picker */
/* START_SNIPPET:accordion-custom-component (INDEX:193) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */
/* START_SNIPPET:ash-auto-card-swatches (INDEX:196) */
.product-card__content { position: relative; overflow: visible; }
  /* Ensure the selected-swatch ring (box-shadow on .is-current) and any
     visible swatches aren't clipped by an overflow:hidden ancestor. */
  .product-card,
  .product-card__info,
  .product-card__body,
  .product-card__details,
  .product-card__inner,
  .product-card-block {
    overflow: visible !important;
  }

  /* .product-card__content is a column flex (.layout-panel-flex--column).
     The swatch container is rendered as the LAST child, so naturally
     it goes on its own row below the price. We:
       1. Cap the price width so it stays on the LEFT half
       2. Pull the swatches up by 1.5em with negative margin so they
          overlay the price's row (visually same line)
       3. Right-align via `align-self: flex-end`
       4. Hide the compare-at part of the price element when it equals
          the regular price — that's the "Rs. 5,000.00 Rs. 5,000.00"
          duplicate you saw. CSS can't compare values but Horizon
          marks the parent with .price--on-sale only when actually on
          sale; when compare-at == price, the markup still ships both
          spans which we collapse here. */
  .product-card__content .price,
  .product-card__content [class*='price__'] {
    display: inline-block;
    max-width: 55%;
  }
  /* Force the hidden price branch to actually be display:none. Horizon's
     base styles use `visibility:hidden` which keeps the layout space —
     that's why you saw "Rs. 7,000.00 Rs. 7,000.00" duplicated. */
  .product-card__content .price__hidden,
  .product-card__content [class*='price__hidden'] {
    display: none !important;
  }

  /* When the JS wraps price + swatches into .ash-price-swatch-row,
     that row becomes a flex container with price LEFT, swatches RIGHT,
     space between, vertically centered. */
  .ash-price-swatch-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }
  .ash-price-swatch-row > .ash-auto-cs {
    margin: 0 !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    position: static !important;
  }
  .ash-price-swatch-row > :is(.price__regular, .price__sale, [class*='price']:not(.ash-auto-cs)) {
    margin: 0 !important;
    flex: 0 0 auto;
  }
  /* Swatches: pulled UP onto the price line via negative margin-top so
     they share the same visual row as the price. Price is capped to
     55% max-width above, leaving the right side free for swatches.
     This is the CSS-only path — if the JS pairing succeeds first,
     the .ash-price-swatch-row rules override this. */
  .ash-auto-cs {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 0;
    width: auto;
    max-width: 45%;
    line-height: 1;
    z-index: 3;
    pointer-events: auto;
    /* Pull onto the price row (price is the immediate previous sibling
       in the column flow) — 1.6em of lift covers price font-size × 1.4
       line-height plus a small visual nudge. */
    margin: -1.6em 0 0 auto;
    align-self: flex-end;
    position: relative;
  }
  /* Match the PDP siblings: rounded squares, sized to EXACTLY the price
     element's font-size so the swatch row sits on the same baseline
     visually. `1em` resolves to the font-size of the surrounding
     context (the price row), giving us pixel-perfect height matching
     at every viewport. !important wins over the inline
     `--ash-auto-cs-size` style attribute. */
  .ash-auto-cs__swatch {
    width: 1em !important;
    height: 1em !important;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    background: var(--color-background-secondary, #f4f4f4);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .ash-auto-cs__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ash-auto-cs__swatch:hover { transform: scale(1.08); border-color: var(--color-foreground); }
  /* Selected swatch: simple 2px border in foreground colour — no shadow,
     so it can never be clipped by an overflow:hidden ancestor. */
  .ash-auto-cs__swatch.is-current {
    border-color: var(--color-foreground);
    border-width: 1.5px;
    box-shadow: none;
  }
  .ash-auto-cs__more {
    font-size: 0.85em;
    font-weight: 500;
    color: rgb(0 0 0 / 0.65);
    text-decoration: none;
    padding-inline: 2px;
    line-height: 1em;
  }
  .ash-auto-cs__more:hover { color: var(--color-foreground); }

  /* Mobile +N never shows on desktop */
  .ash-auto-cs__more--mobile { display: none; }

  /* Reserve space on the right of the price block so the swatches don't
     visually overlap the price text — caps the price to ~55% of card width. */
  .product-card__content:has(.ash-auto-cs) :is(.price, [class*='price__']) {
    max-width: 55%;
  }

  /* ───── MOBILE-only: hide swatches past the per-instance mobile cap
     and swap which "+N" is visible. Size handling is universal above. */
  @media (max-width: 749px) {
    .ash-auto-cs__more--desktop { display: none; }
    .ash-auto-cs__more--mobile { display: inline-flex; align-items: center; }

    .ash-auto-cs--mobile-max-1 .ash-auto-cs__swatch:nth-of-type(n+2) { display: none; }
    .ash-auto-cs--mobile-max-2 .ash-auto-cs__swatch:nth-of-type(n+3) { display: none; }
    .ash-auto-cs--mobile-max-3 .ash-auto-cs__swatch:nth-of-type(n+4) { display: none; }
    .ash-auto-cs--mobile-max-4 .ash-auto-cs__swatch:nth-of-type(n+5) { display: none; }
  }
/* END_SNIPPET:ash-auto-card-swatches */
/* START_SNIPPET:ash-product-card (INDEX:208) */
.ash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--ash-card-text, #111);
  }
  .ash-card a { color: inherit; text-decoration: none; }
  .ash-card__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--ash-card-aspect, 3 / 4);
    overflow: hidden;
    border-radius: var(--ash-card-media-radius, 0);
    background: var(--ash-card-media-bg, #EEEEEE);
  }
  .ash-card__img {
    width: 100%;
    height: 100%;
    object-fit: var(--ash-card-img-fit, cover);
    display: block;
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0.16, 1);
  }
  .ash-card:hover .ash-card__img { transform: scale(var(--ash-card-zoom, 1.03)); }
  .ash-card__placeholder { display: block; width: 100%; height: 100%; background: rgb(0 0 0 / 0.04); }
  .ash-card__badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--ash-card-text, #111);
    color: #fff;
    font-size: 0.7rem;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.05em;
  }
  .ash-card__title {
    margin: var(--ash-card-gap-title, 14px) 0 0;
    font-family: var(--font-heading--family, inherit);
    font-size: var(--ash-card-title-size, 14px);
    font-weight: 500;
    letter-spacing: var(--ash-card-title-ls, 0.14em);
    line-height: 1.3;
    color: var(--ash-card-text, #111);
  }
  .ash-card--uppercase .ash-card__title { text-transform: none; }
  .ash-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ash-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .ash-card__price {
    margin: var(--ash-card-gap-price, 4px) 0 0;
    font-size: var(--ash-card-price-size, 13px);
    color: var(--ash-card-text, #111);
    letter-spacing: 0.02em;
  }
  .ash-card__price-was {
    margin-right: 6px;
    color: rgb(0 0 0 / 0.45);
    text-decoration-thickness: 1px;
  }
  .ash-card__price-now { font-weight: 500; }
  .ash-card__swatches {
    margin-top: var(--ash-card-gap-swatches, 10px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ash-card__swatch {
    width: var(--ash-card-swatch-size, 24px);
    height: var(--ash-card-swatch-size, 24px);
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 0.18);
    background: var(--color-background-secondary, #f4f4f4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .ash-card__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ash-card__swatch:hover { transform: scale(1.1); border-color: var(--ash-card-text, #111); }
  .ash-card__swatch.is-current {
    border-color: var(--ash-card-text, #111);
    box-shadow: 0 0 0 1.5px var(--color-background, #fff), 0 0 0 2.5px var(--ash-card-text, #111);
  }
  .ash-card__swatch--more {
    font-size: 0.7rem;
    font-weight: 500;
    background: transparent;
    border: 0;
    color: rgb(0 0 0 / 0.7);
    text-decoration: none;
    padding-inline: 4px;
    width: auto;
    min-width: var(--ash-card-swatch-size, 24px);
    letter-spacing: 0.04em;
  }
  .ash-card__swatch--more:hover { color: var(--ash-card-text, #111); transform: none; }

  /* Mobile: scale the swatch circle to match the price element's rendered
     height — price line-height ≈ font-size × 1.4 — so swatch + price feel
     visually balanced instead of the swatch overpowering the price. */
  @media (max-width: 749px) {
    .ash-card {
      --ash-card-swatch-size: calc(var(--ash-card-price-size, 13px) * 1.4);
    }
    .ash-card__swatch--more {
      min-width: var(--ash-card-swatch-size);
      font-size: calc(var(--ash-card-price-size, 13px) * 0.85);
    }
  }
/* END_SNIPPET:ash-product-card */
/* START_SNIPPET:background-media (INDEX:215) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:buy-buttons-styles (INDEX:220) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

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

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Stacked mode kept as an opt-in; default is one-row side-by-side */
  .product-form-buttons--stacked {
    flex-wrap: wrap;
  }
  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-md, 14px);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
  }
  @media screen and (max-width: 749px) {
    .product-form-buttons button { padding-block: 12px; font-size: 0.9rem; }
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
     where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */
/* START_SNIPPET:card-gallery (INDEX:221) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */
/* START_SNIPPET:cart-bubble (INDEX:222) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-button-background);
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */
/* START_SNIPPET:cart-items-component (INDEX:223) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */
/* START_SNIPPET:cart-products (INDEX:224) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  /* Ash: one variant per line, "Name: value" */
  .cart-items__variants--ash {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
  }
  .cart-items__variants--ash .cart-items__variant {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline;
  }
  .cart-items__variants--ash .cart-items__variant-name {
    margin: 0;
    font-weight: 500;
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }
  .cart-items__variants--ash .cart-items__variant-value {
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

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

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

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

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

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

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */
/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:237) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */
/* START_SNIPPET:group (INDEX:240) */
.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:241) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

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

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

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

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

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

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:predictive-search-styles (INDEX:264) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

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

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

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

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

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

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

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

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:product-badges-styles (INDEX:267) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */
/* START_SNIPPET:product-card (INDEX:268) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  /* Card arrows visible only on hover (desktop); on mobile they
     stay hidden and swipe handles navigation natively. */
  .product-card slideshow-arrows {
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
  }
  .product-card slideshow-arrows .slideshow-control {
    pointer-events: auto;
    color: #fff;
    background: transparent;
    border: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  }
  .product-card slideshow-arrows .slideshow-control svg {
    stroke: #fff;
    color: #fff;
    stroke-width: 1.6;
  }
  .product-card:is(:hover, :focus-within) slideshow-arrows {
    opacity: 1;
  }
  /* Native swipe works regardless of arrow visibility. */
  .product-card slideshow-container {
    touch-action: pan-y pinch-zoom;
  }
  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows {
      display: none;
    }
  }
/* END_SNIPPET:product-card */
/* START_SNIPPET:product-information-content (INDEX:270) */
.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: var(--media-width-desktop, 65%) minmax(0, 1fr);

        .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: minmax(0, 1fr) var(--media-width-desktop, 65%);

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

  /* (Legacy 1200px override removed — `--media-width-desktop` controls the ratio across
     all desktop sizes ≥750px. The setting lives on .product-information in section settings.) */

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

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

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:271) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:product-media-gallery-content (INDEX:272) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .dialog--preloading {
    opacity: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

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

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

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */
/* START_SNIPPET:product-media (INDEX:273) */
.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);
  }

  /* ===== Ash: every gallery item in 2:3, cover-fit =====
     The outer click-wrapper is `.product-media-container` (a button
     opening the lightbox). Inside it lives `.product-media` and the
     actual `<img>` / `<video>` / `<iframe>`. We lock the WHOLE chain
     to 2:3 + cover so images and videos share the exact same frame.
     `--ratio` and `--gallery-aspect-ratio` set inline by Horizon are
     overridden via !important on these CSS vars too. */
  .product-media-container,
  .product-media-container__zoom-button,
  .product-media,
  .product-media > *,
  .product-media video,
  .product-media iframe,
  .product-media .video-component,
  .product-media [class*="video"] {
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    --ratio: 2 / 3 !important;
    --gallery-aspect-ratio: 2 / 3 !important;
  }
  .product-media-container img,
  .product-media-container video,
  .product-media-container iframe,
  .product-media__image,
  .product-media img,
  .product-media video,
  .product-media iframe,
  .product-media .video-component video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--focal-point, center center) !important;
    display: block !important;
  }
  /* Hide every native control surface on gallery videos. */
  .product-media video::-webkit-media-controls,
  .product-media video::-webkit-media-controls-panel,
  .product-media video::-webkit-media-controls-enclosure,
  .product-media video::-webkit-media-controls-overlay-play-button,
  .product-media video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
  }
  .product-media video[controls] { pointer-events: none; }

  /*** 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:274) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */
/* START_SNIPPET:quick-add-modal-styles (INDEX:275) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

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

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:quick-add-styles (INDEX:277) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */
/* START_SNIPPET:resource-card (INDEX:279) */
.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:search-modal (INDEX:284) */
/* 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:285) */
.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:286) */
.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:288) */
.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:290) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */
/* START_SNIPPET:slideshow-arrows (INDEX:291) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */
/* START_SNIPPET:slideshow-styles (INDEX:294) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

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

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

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

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */
/* START_SNIPPET:text (INDEX:305) */
: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);
  }

  /* Mobile typography scale-down.
     - Custom-preset blocks with explicit Mobile font size → use it.
     - Custom-preset blocks without one → 70% of desktop size.
     - rte-preset blocks (the default) where headings inherit
       --font-h1--size etc. → 70% of those inherited sizes too. */
  @media (max-width: 749px) {
    .custom-font-size[style*='--font-size-mobile'],
    .custom-font-size[style*='--font-size-mobile'] > * {
      --font-size: var(--font-size-mobile) !important;
      font-size: var(--font-size-mobile) !important;
    }
    .custom-font-size:not([style*='--font-size-mobile']),
    .custom-font-size:not([style*='--font-size-mobile']) > * {
      font-size: calc(var(--font-size) * 0.7) !important;
    }

    /* Signature Looks slideshow only — shrink any text inside its
       slides by 30% on mobile. Scoped to the section id so nothing
       else changes. Broader selectors than just .text-block.rte so
       the rule fires whether or not Liquid emits the preset class. */
    [id*="signature_looks_slideshow"] .text-block h1,
    [id*="signature_looks_slideshow"] .text-block.h1 > * { font-size: calc(var(--font-h1--size) * 0.7) !important; }
    [id*="signature_looks_slideshow"] .text-block h2,
    [id*="signature_looks_slideshow"] .text-block.h2 > * { font-size: calc(var(--font-h2--size) * 0.7) !important; }
    [id*="signature_looks_slideshow"] .text-block h3,
    [id*="signature_looks_slideshow"] .text-block.h3 > * { font-size: calc(var(--font-h3--size) * 0.7) !important; }
    [id*="signature_looks_slideshow"] .text-block h4,
    [id*="signature_looks_slideshow"] .text-block.h4 > * { font-size: calc(var(--font-h4--size) * 0.7) !important; }
    [id*="signature_looks_slideshow"] .text-block h5,
    [id*="signature_looks_slideshow"] .text-block.h5 > * { font-size: calc(var(--font-h5--size) * 0.7) !important; }
    [id*="signature_looks_slideshow"] .text-block h6,
    [id*="signature_looks_slideshow"] .text-block.h6 > * { font-size: calc(var(--font-h6--size) * 0.7) !important; }
    [id*="signature_looks_slideshow"] .text-block p,
    [id*="signature_looks_slideshow"] .text-block.p > * { font-size: calc(var(--font-paragraph--size, 1rem) * 0.7) !important; }
  }
/* END_SNIPPET:text */
/* START_SNIPPET:variant-main-picker (INDEX:314) */
/* 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:video (INDEX:316) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */