/** Shopify CDN: Minification failed

Line 3184:2 Unexpected "{"
Line 3184:3 Expected identifier but found "%"
Line 3185:6 Unexpected "\"fit the PDP to one screen\""
Line 3192:3 Expected identifier but found "%"

**/
/* START_SECTION:before_after (INDEX:5) */
@font-face {
    font-family: 'Le Monde Journal';
    src: url('/cdn/shop/files/le-monde-journal-std-regular.otf?v=1782299244') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  .ba {
    --rose: #e06d76;
    --rose-deep: #d2545f;
    --rose-tint: #fbeef0;
    --cream: #fbf4ee;
    --ink: #2a2a2a;
    --muted: #8a8a8a;
    --line: #efe3e4;
    --ba-serif: 'Le Monde Journal', Georgia, 'Times New Roman', serif;
    --ba-radius: 20px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /* Full-bleed without vw: the old 100vw + negative margins overflowed the
       page and widened the document (see product_highlight.liquid). */
    width: 100%;
    max-width: 100%;
    padding: var(--ba-pt, 80px) clamp(16px, 5vw, 40px) var(--ba-pb, 80px);
    color: var(--ink);
    font-family: var(--ba-serif);
    background:
      radial-gradient(60% 55% at 12% 12%, rgba(224, 109, 118, 0.10) 0%, rgba(224, 109, 118, 0) 60%),
      linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  }

  .ba__inner {
    position: relative;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
  }

  .ba[data-media='right'] .ba__media {
    order: 2;
  }

  /* ---- Comparison slider (1:1) ---- */
  .ba-compare {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--ba-radius);
    overflow: hidden;
    background: var(--rose-tint);
    user-select: none;
    touch-action: pan-y;
    box-shadow: 0 36px 70px -34px rgba(224, 109, 118, 0.6);
  }

  .ba-compare__pane {
    position: absolute;
    inset: 0;
  }

  .ba-compare__pane img,
  .ba-compare__empty {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ba-compare__empty {
    background: linear-gradient(135deg, #f6dfe3, #fff);
  }

  .ba-compare__empty--before {
    background: linear-gradient(135deg, #e7e7e7, #f7f1f2);
  }

  /* before pane is clipped to the slider position */
  .ba-compare__before {
    clip-path: inset(0 calc((100 - var(--ba-pos, 50)) * 1%) 0 0);
  }

  .ba-tag {
    position: absolute;
    top: 14px;
    z-index: 3;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    pointer-events: none;
  }

  .ba-tag--before {
    left: 14px;
    background: rgba(42, 20, 22, 0.6);
    backdrop-filter: blur(4px);
  }

  .ba-tag--after {
    right: 14px;
    background: var(--rose);
  }

  .ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--ba-pos, 50) * 1%);
    width: 2px;
    background: #fff;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  }

  .ba-handle__grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  }

  .ba-handle__grip svg {
    width: 22px;
    height: 22px;
    stroke: var(--rose);
  }

  .ba-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
  }

  /* ---- Content ---- */
  .ba-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--rose);
    font-weight: 700;
  }

  .ba-eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
  }

  .ba__title {
    font-family: var(--ba-serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, var(--ba-title-size, 2.5rem));
    line-height: 1.13;
    letter-spacing: -0.01em;
    margin: 14px 0 16px;
  }

  .ba__lead {
    color: #555;
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 22px;
  }

  .ba__lead p {
    margin: 0 0 10px;
  }

  .ba__lead p:last-child {
    margin-bottom: 0;
  }

  .ba-points ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 11px;
  }

  .ba-points li {
    position: relative;
    padding-left: 30px;
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.4;
  }

  .ba-points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--rose);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: grid;
    place-items: center;
  }

  .ba-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
  }

  .ba-stat {
    flex: 1;
    min-width: 120px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .ba-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -22px rgba(224, 109, 118, 0.6);
  }

  .ba-stat__v {
    font-family: var(--ba-serif);
    font-size: 1.6rem;
    color: var(--rose-deep);
    line-height: 1;
  }

  .ba-stat__arrow {
    font-size: 0.9rem;
  }

  .ba-stat__arrow--down {
    color: var(--rose);
  }

  .ba-stat__label {
    display: block;
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 6px;
  }

  .ba__foot {
    font-size: 0.72rem;
    color: #b89da0;
    margin: 0;
  }

  /* ---- Fit to viewport on laptop/desktop ---- */
  @media screen and (min-width: 881px) {
    .ba {
      /* The whole header group is sticky, so a full 100svh section always sits
         112px under it — reserve that or the top of the slider stays covered. */
      --ba-fit: calc(100svh - var(--header-group-height, 112px));
      min-height: var(--ba-fit);
      display: grid;
      align-content: center;
      /* Author padding still wins on tall screens; on a short laptop the vh
         term takes over so the section never grows past one screen. */
      padding-block: min(var(--ba-pt, 80px), 6vh) min(var(--ba-pb, 80px), 6vh);
    }

    /* Height-driven so the 1:1 ratio shrinks the width instead of overflowing. */
    .ba-compare {
      height: calc(var(--ba-fit) - 12vh);
      width: auto;
      margin-inline: auto;
    }
  }

  /* ---- Responsive ---- */
  @media screen and (max-width: 880px) {
    /* minmax(0, ...) not a bare 1fr: the implicit `auto` floor keeps the track
       from shrinking below its min-content width and overflows narrow screens. */
    .ba__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(24px, 6vw, 40px);
    }

    .ba[data-media='right'] .ba__media {
      order: 0;
    }

    .ba__media {
      order: -1;
    }

    /* The svh term only bites on a short viewport (small phone, or any phone in
       landscape), where a 460px square pushed the heading and stats off screen.
       Width-capped rather than height-capped so the 1:1 box stays square. */
    .ba-compare {
      max-width: min(460px, 52svh);
      margin: 0 auto;
    }

    /* Author padding still applies on tall screens; the vh term takes over when
       there isn't room for it. */
    .ba {
      padding-block: min(var(--ba-pt, 80px), 5vh) min(var(--ba-pb, 80px), 5vh);
    }

    .ba__content {
      text-align: center;
    }

    .ba-eyebrow {
      justify-content: center;
    }

    .ba-points {
      display: inline-block;
      text-align: left;
    }

    .ba-stats {
      justify-content: center;
    }
  }

  @media screen and (max-width: 480px) {
    .ba__title {
      font-size: min(clamp(1.5rem, 8vw, 1.9rem), var(--ba-title-size, 1.9rem));
    }

    .ba-compare {
      border-radius: 16px;
    }

    .ba-stat {
      flex: 1 1 100%;
      min-width: 0;
      padding: 14px 16px;
    }

    .ba-stat__v {
      font-size: 1.5rem;
    }
  }

  /* ---- Entrance reveal ---- */
  @media (prefers-reduced-motion: no-preference) {
    .ba-reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .ba-reveal.is-in {
      opacity: 1;
      transform: none;
    }
  }
/* END_SECTION:before_after */
/* START_SECTION:faqs_custom (INDEX:15) */
@font-face {
    font-family: 'Le Monde Journal';
    src: url('/cdn/shop/files/le-monde-journal-std-regular.otf?v=1782299244') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  .faq {
    --rose: #e06d76;
    --rose-deep: #d2545f;
    --rose-tint: #fbeef0;
    --cream: #fbf4ee;
    --ink: #2a2a2a;
    --muted: #8a8a8a;
    --line: #efe3e4;
    --faq-serif: 'Le Monde Journal', Georgia, 'Times New Roman', serif;
    --faq-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
    box-sizing: border-box;
    /* Full-bleed without vw: the old 100vw + negative margins overflowed the
       page and widened the document (see product_highlight.liquid). */
    width: 100%;
    max-width: 100%;
    padding: var(--faq-pt, 80px) clamp(16px, 5vw, 40px) var(--faq-pb, 80px);
    color: var(--ink);
    font-family: var(--faq-sans);
    background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%);
  }

  .faq *,
  .faq *::before,
  .faq *::after {
    box-sizing: border-box;
  }

  .faq__inner {
    max-width: 820px;
    margin: 0 auto;
  }

  .faq__head {
    text-align: center;
    margin: 0 auto clamp(28px, 4vw, 44px);
  }

  .faq__eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--rose);
    font-weight: 700;
    margin-bottom: 14px;
  }

  .faq__title {
    font-family: var(--faq-serif);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.4vw, 2.7rem);
    line-height: 1.13;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .faq__sub {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 14px auto 0;
    max-width: 560px;
  }

  /* ---- Accordion ---- */
  .faq__item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .faq__item[open] {
    border-color: rgba(224, 109, 118, 0.4);
    box-shadow: 0 18px 38px -28px rgba(224, 109, 118, 0.6);
  }

  .faq__q {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
    font-family: var(--faq-serif);
    font-size: clamp(1.05rem, 1.7vw, 1.25rem);
    font-weight: 400;
    color: var(--ink);
  }

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

  .faq__q:hover {
    color: var(--rose-deep);
  }

  /* plus / minus icon */
  .faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rose-tint);
  }

  .faq__icon::before,
  .faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    background: var(--rose);
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .faq__item[open] .faq__icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
  }

  .faq__a {
    padding: 0 22px 20px;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .faq__a :where(p, ul, ol) {
    margin: 0 0 10px;
  }

  .faq__a :where(p, ul, ol):last-child {
    margin-bottom: 0;
  }

  .faq__a a {
    color: var(--rose-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* open animation */
  @media (prefers-reduced-motion: no-preference) {
    .faq__item[open] .faq__a {
      animation: faq-open 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes faq-open {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: none; }
    }
  }

  /* ---- Foot CTA ---- */
  .faq__foot {
    margin-top: clamp(24px, 3vw, 36px);
    text-align: center;
    font-size: 0.95rem;
    color: var(--muted);
  }

  .faq__cta {
    display: inline-block;
    margin-left: 8px;
    color: var(--rose-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---- Mobile ---- */
  @media screen and (max-width: 600px) {
    .faq__title {
      font-size: clamp(1.55rem, 7vw, 2rem);
    }

    .faq__item {
      border-radius: 14px;
      margin-bottom: 10px;
    }

    .faq__q {
      gap: 12px;
      padding: 16px 16px;
      font-size: 1.02rem;
      line-height: 1.3;
    }

    .faq__icon {
      width: 24px;
      height: 24px;
    }

    .faq__a {
      padding: 0 16px 18px;
      font-size: 0.92rem;
    }

    .faq__foot {
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .faq__cta {
      margin-left: 0;
      display: inline-block;
      margin-top: 4px;
    }
  }

  /* ---- Reveal ---- */
  @media (prefers-reduced-motion: no-preference) {
    .faq-reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .faq-reveal.is-in {
      opacity: 1;
      transform: none;
    }
  }
/* END_SECTION:faqs_custom */
/* START_SECTION:header (INDEX:24) */
/* Custom font is now settings-driven — see the "Custom font" group in the
     section settings and the dynamic style block above this stylesheet. */
  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 drop shadow (driven by --header-shadow set on the element when enabled) */
  #header-component {
    box-shadow: var(--header-shadow, none);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
  }
  /* Don't shadow a transparent header while it overlays content; only once stuck */
  #header-component[transparent]:not([data-sticky-state='active']) {
    box-shadow: none;
  }

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

  /* Keep every menu item / action at full strength so none look faded.
     Some Horizon menu links render with a reduced-alpha color, which the
     `opacity` property alone can't fix, so we force the color too. */
  #header-component :is(
    .menu-list__link,
    .menu-list__link span,
    .header-menu a,
    .header-menu a span,
    header-menu a,
    header-menu a span,
    .header-actions__action,
    .header__icon--menu
  ) {
    opacity: 1 !important;
    color: rgb(var(--color-foreground-rgb)) !important;
  }

  #header-component :is(.header-actions__action, .header__icon--menu) svg {
    opacity: 1 !important;
    color: rgb(var(--color-foreground-rgb)) !important;
    fill: currentColor;
  }

  /* =====================================================================
   * Custom mega menu
   * ===================================================================== */
  /* Self-rendered logo (section-defined, replaces the _header-logo block) */
  .header-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: rgb(var(--color-foreground-rgb));
  }

  .header-logo__image {
    display: block;
  }

  .header-logo__text {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .mega-nav {
    display: none;
  }

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

  .mega-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--mega-gap, 28px);
  }

  /* Mega items keep the panel anchored to the full-width row; single items
     anchor their narrow dropdown to themselves. */
  .mega-nav__item {
    position: static;
  }

  .mega-nav__item--single {
    position: relative;
  }

  .mega-nav__top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: rgb(var(--color-foreground-rgb));
    font-size: var(--mega-font-size, 14px);
    /* Honor the configured menu weight on every page. Without this the desktop
       nav only inherited a weight, so the setting silently did nothing unless the
       custom-font !important rule happened to be on. Falls back to inherit. */
    font-weight: var(--menu-top-level-font-weight, inherit);
    letter-spacing: 0.02em;
    padding: 10px 0;
    white-space: nowrap;
    cursor: pointer;
  }

  .mega-nav__caret {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.25s var(--ease-out-cubic, ease);
    opacity: 0.65;
  }

  .mega-nav__item:hover > .mega-nav__top .mega-nav__caret,
  .mega-nav__item.is-open > .mega-nav__top .mega-nav__caret {
    transform: rotate(-135deg) translateY(1px);
  }

  /* Shared open/close transition for both panel types */
  .mega-panel,
  .mega-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s var(--ease-out-cubic, ease),
      transform 0.25s var(--ease-out-cubic, ease), visibility 0s linear 0.25s;
    z-index: var(--layer-overlay, 60);
  }

  .mega-nav__item:hover > .mega-panel,
  .mega-nav__item:focus-within > .mega-panel,
  .mega-nav__item.is-open > .mega-panel,
  .mega-nav__item:hover > .mega-dropdown,
  .mega-nav__item:focus-within > .mega-dropdown,
  .mega-nav__item.is-open > .mega-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.25s var(--ease-out-cubic, ease),
      transform 0.25s var(--ease-out-cubic, ease), visibility 0s;
  }

  /* Full-bleed mega panel */
  .mega-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    background: var(--color-background, #fff);
    /* Pronounced drop shadow so the panel reads as a layer above the page */
    box-shadow: 0 24px 36px -12px rgba(0, 0, 0, 0.22),
      0 8px 16px -8px rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(var(--color-foreground-rgb), 0.06);
  }

  .mega-panel__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 56px;
    align-items: flex-start;
    /* Content groups to the left and the image trails it, so the layout stays
       tidy whether there is 1 column or several (no large empty gaps). */
    justify-content: flex-start;
    max-width: var(--page-width, 1400px);
    margin: 0 auto;
    padding: 36px var(--page-margin, 40px) 44px;
  }

  .mega-panel__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    /* Size to the columns' natural width; never stretch to fill the row. */
    flex: 0 1 auto;
    align-content: flex-start;
  }

  .mega-col {
    flex: 0 0 auto;
    min-width: 150px;
    max-width: 240px;
  }

  .mega-col__title {
    margin: 0 0 16px;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.5;
  }

  .mega-col__title a {
    color: inherit;
    text-decoration: none;
  }

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

  .mega-col__list a {
    color: rgb(var(--color-foreground-rgb));
    text-decoration: none;
    font-size: 13.5px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
  }

  .mega-col__list a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mega-panel__media {
    flex: 0 1 var(--mega-media-width, 320px);
    align-self: stretch;
    /* Sits directly after the columns (grouped left) so a single short column
       doesn't leave a big empty gap before the image. Wraps below on narrow
       screens. */
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    min-height: 220px;
    max-height: 360px;
  }

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

  .mega-panel__media-caption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    color: #fff;
    font-size: 14px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }

  /* Narrow single-column dropdown */
  .mega-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 240px;
    background: var(--color-background, #fff);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(var(--color-foreground-rgb), 0.06);
    border-radius: 6px;
    padding: 14px 0;
  }

  .mega-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .mega-dropdown__list a {
    display: block;
    padding: 9px 22px;
    color: rgb(var(--color-foreground-rgb));
    text-decoration: none;
    font-size: 13.5px;
    opacity: 0.85;
    transition: background 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
  }

  .mega-dropdown__list a:hover {
    opacity: 1;
    background: rgba(var(--color-foreground-rgb), 0.05);
  }

  /* Let the column holding the nav size to its content (mirrors Horizon's
     header-menu grid behaviour). */
  .header__columns:has(.header__column--left .mega-nav) {
    --header-left: auto;
    --header-right: minmax(max-content, 1fr);
  }

  .header__columns:has(.header__column--center .mega-nav) {
    --header-center: auto;
    --header-left: minmax(max-content, 1fr);
    --header-right: minmax(max-content, 1fr);
  }

  /* Elevate the row while a dropdown is open so the panel sits above siblings */
  .header__row:has(.mega-nav__item:hover),
  .header__row:has(.mega-nav__item.is-open),
  .header__row:has(.mega-nav__item:focus-within) {
    z-index: var(--layer-heightened);
  }

  /* ---- Mobile drawer ---- */
  .mega-mobile {
    display: flex;
    align-items: center;
  }

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

  .mega-mobile__toggle {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: rgb(var(--color-foreground-rgb));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Accessible tap target */
    min-width: 44px;
    min-height: 44px;
  }

  .mega-mobile__bars {
    display: inline-block;
    width: 22px;
  }

  .mega-mobile__bars span {
    display: block;
    height: 1.6px;
    background: currentColor;
    margin: 4px 0;
    border-radius: 2px;
  }

  /* Panel: full-screen flex column (header / scroll / footer) */
  .mega-mobile__panel {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-background, #fff);
    color: rgb(var(--color-foreground-rgb, 17 17 17));
    z-index: 1000;
    padding: 0;
  }

  /* CRITICAL: an author `display` rule overrides the UA `[hidden]{display:none}`,
     so the hidden attribute must be honoured explicitly — otherwise the drawer
     shows open on page load and the close button appears to do nothing. */
  .mega-mobile__panel[hidden] {
    display: none !important;
  }

  .mega-mobile__panel:not([hidden]) {
    animation: megaDrawerIn 0.3s var(--ease-out-cubic, cubic-bezier(0.22, 1, 0.36, 1));
  }

  @keyframes megaDrawerIn {
    from {
      opacity: 0;
      transform: translateX(-18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* The panel is rendered outside the header; keep it hidden on desktop where
     the hamburger isn't shown (covers resize-from-mobile-while-open too). */
  @media screen and (min-width: 750px) {
    .mega-mobile__panel {
      display: none !important;
    }
  }

  html.mega-mobile-open {
    overflow: hidden;
  }

  /* Header with logo + close */
  .mega-mobile__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.08);
  }

  .mega-mobile__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    max-width: 62%;
  }

  .mega-mobile__logo img {
    display: block;
    width: auto;
    height: 30px;
    max-width: 100%;
    object-fit: contain;
  }

  .mega-mobile__logo-text {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .mega-mobile__close {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: inherit;
    transition: background 0.18s ease;
  }

  .mega-mobile__close:hover {
    background: rgba(var(--color-foreground-rgb), 0.07);
  }

  .mega-mobile__close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 17px;
    height: 1.6px;
    background: currentColor;
    border-radius: 2px;
  }

  .mega-mobile__close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .mega-mobile__close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Scrollable menu area */
  .mega-mobile__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .mega-mobile__list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
  }

  /* Top-level (highlighted) items */
  .mega-mobile__link,
  .mega-mobile__group-toggle {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 17px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.06);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgb(var(--color-foreground-rgb));
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, padding-left 0.18s ease;
  }

  /* Accent bar that appears on active / open item */
  .mega-mobile__link::before,
  .mega-mobile__group-toggle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgb(var(--color-foreground-rgb));
    opacity: 0;
    transition: opacity 0.18s ease;
  }

  .mega-mobile__link:active,
  .mega-mobile__group-toggle[aria-expanded='true'] {
    background: rgba(var(--color-foreground-rgb), 0.05);
    padding-left: 24px;
  }

  .mega-mobile__link:active::before,
  .mega-mobile__group-toggle[aria-expanded='true']::before {
    opacity: 1;
  }

  .mega-mobile__arrow {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 1.6px solid currentColor;
    border-top: 1.6px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.4;
  }

  .mega-mobile__caret {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.22s ease;
    opacity: 0.6;
  }

  .mega-mobile__group-toggle[aria-expanded='true'] .mega-mobile__caret {
    transform: rotate(-135deg);
  }

  /* Expanded sub-section */
  .mega-mobile__sub {
    padding: 6px 20px 16px;
    background: rgba(var(--color-foreground-rgb), 0.02);
    border-bottom: 1px solid rgba(var(--color-foreground-rgb), 0.06);
  }

  .mega-mobile__sub ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
  }

  .mega-mobile__sub a {
    display: block;
    padding: 9px 0;
    color: rgb(var(--color-foreground-rgb));
    text-decoration: none;
    opacity: 0.8;
    font-size: 14.5px;
    font-weight: 400;
  }

  .mega-mobile__sub a:active {
    opacity: 1;
  }

  .mega-mobile__subtitle {
    margin: 12px 0 2px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.5;
    font-weight: 600;
  }

  .mega-mobile__subtitle a {
    color: inherit;
    text-decoration: none;
  }

  /* Footer quick links */
  .mega-mobile__footer {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(var(--color-foreground-rgb), 0.08);
  }

  .mega-mobile__foot-link {
    flex: 1 1 0;
    text-align: center;
    padding: 12px 8px;
    border-radius: 999px;
    border: 1px solid rgba(var(--color-foreground-rgb), 0.18);
    color: rgb(var(--color-foreground-rgb));
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .mega-mobile__foot-link--cart {
    background: rgb(var(--color-foreground-rgb));
    color: rgb(var(--color-background-rgb, 255 255 255));
    border-color: transparent;
  }

  /* ---- Responsive tuning ---- */
  /* Mid / small desktop: tighten the mega panel so columns + image fit, and
     let the image drop below the columns gracefully when space is tight. */
  @media screen and (min-width: 750px) and (max-width: 1100px) {
    .mega-panel__inner {
      gap: 28px 40px;
    }

    .mega-panel__cols {
      gap: 24px 36px;
    }

    .mega-panel__media {
      flex-basis: 260px;
    }

    .mega-nav__list {
      gap: clamp(14px, 2vw, var(--mega-gap, 28px));
    }
  }

  /* Very small phones: comfortable drawer typography + spacing */
  @media screen and (max-width: 480px) {
    .mega-mobile__link,
    .mega-mobile__group-toggle {
      padding: 16px 18px;
      font-size: 15.5px;
    }

    .mega-mobile__sub {
      padding: 4px 18px 16px;
    }

    .mega-mobile__header {
      padding: 12px 14px;
    }
  }

  /* =====================================================================
   * Mobile header bar  —  hamburger left · centered logo · icons grouped
   * tight on the right · taller bar (height driven by --mobile-header-height)
   * ===================================================================== */
  @media screen and (max-width: 749px) {
    /* Taller bar; underlay gradient stops follow --header-height too.
       Shrink the theme's large --gap-xl token inside the header so every gap
       it drives (the right column, the action icons) tightens at once — this
       is what was spreading the icons and pushing search next to the logo. */
    #header-component {
      --header-height: var(--mobile-header-height, 72px);
      --gap-xl: var(--mobile-icon-gap, 6px);
    }

    /* !important throughout: Horizon's own `[data-menu-style='drawer']` rules
       have higher specificity than ours, so without it the spacing props get
       overridden and nothing changes. */
    #header-component .header__columns {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: flex-start !important;
      position: relative !important;
      grid-template-columns: none !important;
      grid-template-areas: none !important;
      column-gap: var(--mobile-icon-gap, 6px) !important;
      min-height: var(--mobile-header-height, 72px);
      padding-block: 8px !important;
      padding-inline: 12px !important;
    }

    /* No flex child may grow — a growing child is what spreads the icons. */
    #header-component .header__columns > * {
      flex: 0 0 auto !important;
    }

    /* Logo absolutely centered so it stays centered regardless of icon widths */
    #header-component .header-logo {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      margin: 0 !important;
      grid-area: auto !important;
      max-width: 52vw;
    }

    /* On mobile size the logo by height (overrides the inline width) so it
       scales to the taller bar without distortion. */
    #header-component .header-logo img {
      width: auto !important;
      height: auto;
      max-height: 40px;
      max-width: 100%;
    }

    /* Left group: hamburger then the search icon, sitting tight together. */
    #header-component .mega-mobile {
      order: 0;
      margin: 0 !important;
      grid-area: auto !important;
    }

    #header-component .search-action {
      order: 1;
      margin: 0 !important;
      grid-area: auto !important;
    }

    /* Actions (account + cart) get pushed to the right edge by the auto left
       margin, and stay a tight content-sized group that never stretches. */
    #header-component :is(header-actions, .header-actions) {
      order: 3;
      grid-area: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      width: auto !important;
      margin-left: auto !important;
      gap: var(--mobile-icon-gap, 6px) !important;
    }

    #header-component :is(header-actions, .header-actions) * {
      flex: 0 0 auto !important;
    }

    #header-component :is(header-actions, .header-actions) > *,
    #header-component :is(header-actions, .header-actions) > * > * {
      margin: 0 !important;
    }

    /* Trim each icon button's horizontal padding so glyphs sit close together */
    #header-component :is(.search-action, .header-actions__action, .account-button, cart-icon, .cart-icon) {
      padding-inline: 2px !important;
    }

    /* Localization is already hidden on mobile; keep it out of the flex flow */
    #header-component .dropdown-localization {
      display: none !important;
    }
  }

  /* Guard against a full-bleed child introducing a horizontal scrollbar. This
     used to be desktop-only, so on phones an overflowing section widened the
     document and the width:100% bar collapsed to a narrow strip. */
  .header-section {
    overflow-x: clip;
  }

  /* Belt and braces: nothing below the header may widen the document either.
     clip (not hidden) so position:sticky keeps working. */
  body {
    overflow-x: clip;
  }
/* END_SECTION:header */
/* START_SECTION:new_banner_ (INDEX:40) */
.banner-slider {
    position: relative;
    border: var(--banner-border-width) var(--banner-border-style) rgb(var(--color-border-rgb) / var(--banner-border-opacity));
    overflow: hidden;
    line-height: 0; /* remove the inline-image baseline gap under the banner */
  }

  .banner-slider__viewport {
    overflow: hidden;
  }

  .banner-slider__track {
    display: flex;
    transform: translateX(0);
    transition: transform var(--banner-slide-speed, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .banner-slider__track--no-anim {
    transition: none;
  }

  /* Each slide is exactly one viewport wide; the tallest image sets the height,
     so images are never cropped and there is no letterbox padding. */
  .banner-slider__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
  }

  .banner-slider__media {
    display: block;
    width: 100%;
    height: auto;
  }

  .banner-slider__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .banner-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.75);
    color: rgb(0 0 0 / 0.8);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
  }

  .banner-slider:hover .banner-slider__arrow,
  .banner-slider__arrow:focus-visible {
    opacity: 1;
  }

  .banner-slider__arrow:hover {
    background: rgb(255 255 255 / 0.95);
  }

  .banner-slider__arrow--prev {
    left: 16px;
  }

  .banner-slider__arrow--next {
    right: 16px;
  }

  .banner-slider__dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
    line-height: 0;
  }

  .banner-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.5);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .banner-slider__dot.is-active {
    background: rgb(255 255 255 / 1);
    transform: scale(1.25);
  }

  @media screen and (max-width: 749px) {
    .banner-slider__arrow {
      width: 32px;
      height: 32px;
      opacity: 1;
    }

    .banner-slider__arrow--prev {
      left: 8px;
    }

    .banner-slider__arrow--next {
      right: 8px;
    }
  }
/* END_SECTION:new_banner_ */
/* START_SECTION:product-information (INDEX:47) */
@font-face {
    font-family: 'Le Monde Journal';
    src: url('/cdn/shop/files/le-monde-journal-std-regular.otf?v=1782299244') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ============================================================
     Optimized PDP — Scardi-style gallery + buy box
     ============================================================ */
  .opt-pdp-section {
    --rose: #e06d76;
    --rose-deep: #d2545f;
    --rose-tint: #fbeef0;
    --cream: #fbf4ee;
    --ink: #2a2a2a;
    --muted: #8a8a8a;
    --line: #efe3e4;
    --good: #3e8e5a;
    --opt-serif: 'Le Monde Journal', Georgia, 'Times New Roman', serif;
    --opt-radius: 18px;
    color: var(--ink);
    font-family: var(--opt-serif);
  }

  /* Apply the Room Thin display font to everything in the section,
     including form controls (buttons/inputs don't inherit font-family). */
  .opt-pdp-section,
  .opt-pdp-section button,
  .opt-pdp-section input,
  .opt-pdp-section select,
  .opt-pdp-section textarea,
  .opt-pdp-section .opt-acc-body :where(p, ul, ol, li, a, span, strong, em) {
    font-family: var(--opt-serif);
  }

  .opt-pdp {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4vw, 64px);
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(16px, 3vw, 40px);
    padding-bottom: clamp(40px, 6vw, 72px);
  }

  /* ---- Gallery ---- */
  .opt-gallery {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .opt-g-main {
    position: relative;
    border-radius: var(--opt-radius);
    overflow: hidden;
    background: var(--rose-tint);
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
  }

  .opt-g-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease;
  }

  .opt-g-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--rose);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: 8px;
    text-transform: uppercase;
  }

  .opt-g-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: background 0.2s, transform 0.2s;
  }

  .opt-g-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.06);
  }

  .opt-g-prev { left: 12px; }
  .opt-g-next { right: 12px; }

  .opt-g-thumbs-wrap {
    position: relative;
    margin-top: 10px;
  }

  .opt-g-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .opt-g-thumbs::-webkit-scrollbar {
    display: none;
  }

  .opt-g-thumbs-next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
  }

  .opt-g-thumbs-next.visible {
    display: flex;
  }

  .opt-g-thumbs button {
    flex: 0 0 64px;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: var(--rose-tint);
    aspect-ratio: 1 / 1;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s;
  }

  .opt-g-thumbs button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .opt-g-thumbs button.active {
    border-color: var(--rose);
  }

  /* ---- Buy box ---- */
  .opt-trust {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rose-tint);
    color: var(--rose-deep);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 7px 14px;
    border-radius: 999px;
    text-transform: uppercase;
  }

  .opt-pdp-section .opt-title {
    font-family: var(--opt-serif) !important;
    font-weight: 400;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.12;
    margin: 14px 0 6px;
    color: var(--ink);
    text-transform: none;
    letter-spacing: normal;
  }

  .opt-sub {
    color: var(--muted);
    font-size: 0.95rem;
  }

  .opt-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 18px;
    font-size: 0.82rem;
    color: var(--muted);
  }

  .opt-stars {
    color: var(--rose);
    letter-spacing: 2px;
  }

  .opt-rating a {
    color: var(--rose);
    font-weight: 600;
  }

  .opt-variants {
    display: grid;
    /* minmax(0, ...) throughout: a bare 1fr is minmax(auto, 1fr), and that auto
       floor stops the track shrinking below its content's min-content width —
       long variant names then push the buy column wider than the screen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin: 18px 0;
  }

  .opt-variant {
    position: relative;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: left;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }

  .opt-variant:hover {
    border-color: var(--rose);
  }

  .opt-variant.selected {
    border-color: var(--rose);
    background: var(--rose-tint);
  }

  .opt-variant.soldout {
    opacity: 0.5;
  }

  .opt-v-tag {
    position: absolute;
    top: -10px;
    left: 12px;
    background: var(--rose);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
  }

  .opt-v-name {
    display: block;
    font-weight: 700;
    font-size: 1rem;
  }

  .opt-v-size {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.82rem;
  }

  .opt-v-price {
    display: block;
    margin-top: 8px;
    font-weight: 700;
    color: var(--rose-deep);
  }

  .opt-v-price s {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.8rem;
    margin-left: 6px;
  }

  .opt-price-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 4px 0 2px;
    flex-wrap: wrap;
  }

  .opt-pdp-section .opt-now {
    font-family: var(--opt-serif) !important;
    font-size: 2rem;
    font-weight: 400;
    color: var(--ink);
  }

  .opt-price-line s {
    color: var(--muted);
    font-size: 1rem;
  }

  .opt-off {
    background: var(--rose-tint);
    color: var(--rose-deep);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
  }

  .opt-tax {
    font-size: 0.74rem;
    color: var(--muted);
    margin-bottom: 18px;
  }

  .opt-stock {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--good);
    font-weight: 600;
    margin-bottom: 18px;
  }

  .opt-stock[data-available='false'] {
    color: var(--muted);
  }

  .opt-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--good);
    animation: opt-pulse 1.8s infinite;
  }

  .opt-stock[data-available='false'] .opt-pulse {
    background: var(--muted);
    animation: none;
  }

  @keyframes opt-pulse {
    0% { box-shadow: 0 0 0 0 rgba(62, 142, 90, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(62, 142, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(62, 142, 90, 0); }
  }

  .opt-atc-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
  }

  .opt-qty {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 auto;
  }

  .opt-qty button {
    width: 42px;
    height: 52px;
    border: 0;
    background: #fff;
    font-size: 1.1rem;
    color: var(--ink);
    cursor: pointer;
  }

  .opt-qty button:hover {
    background: var(--rose-tint);
  }

  .opt-qty input {
    width: 46px;
    text-align: center;
    border: 0;
    font-size: 1rem;
    font-weight: 600;
    height: 52px;
    -moz-appearance: textfield;
  }

  .opt-qty input::-webkit-outer-spin-button,
  .opt-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .opt-btn-atc {
    flex: 1;
    border: 0;
    border-radius: 12px;
    background: var(--rose);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 15px;
    transition: background 0.2s, transform 0.2s;
  }

  .opt-btn-atc:hover:not(:disabled) {
    background: var(--rose-deep);
    transform: translateY(-1px);
  }

  .opt-btn-atc:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .opt-btn-buynow {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    border: 1.5px solid var(--rose);
    border-radius: 12px;
    background: #fff;
    color: var(--rose);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 15px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }

  .opt-btn-buynow:hover:not(:disabled) {
    background: var(--rose);
    color: #fff;
  }

  .opt-btn-buynow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .opt-perks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
  }

  /* With a 4th perk, 3 columns would leave an orphan on its own row.
     Lay 4 out as 2x2 on narrow screens and a single row once there's space. */
  .opt-perks:has(.opt-perk:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 750px, not 700px — at 700-749px this overlapped the mobile block below and,
     being a higher-specificity :has() selector, outranked it and forced four
     ~160px cards onto a large phone. */
  @media (min-width: 750px) {
    .opt-perks:has(.opt-perk:nth-child(4)) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .opt-perk {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 10px;
    box-shadow: 0 10px 24px -20px rgba(224, 109, 118, 0.5);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  }

  .opt-perk:hover {
    transform: translateY(-3px);
    border-color: var(--rose);
    box-shadow: 0 16px 30px -20px rgba(224, 109, 118, 0.65);
  }

  .opt-perk-ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rose-tint);
  }

  .opt-perk-ico svg {
    width: 20px;
    height: 20px;
    stroke: var(--rose);
    fill: none;
  }

  .opt-perk-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
    line-height: 1.3;
  }

  .opt-acc {
    border-top: 1px solid var(--line);
    margin-top: 6px;
  }

  .opt-acc details {
    border-bottom: 1px solid var(--line);
  }

  .opt-acc summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 2px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
  }

  .opt-acc summary::-webkit-details-marker {
    display: none;
  }

  .opt-acc summary::after {
    content: '+';
    font-size: 1.1rem;
    color: var(--rose);
    transition: transform 0.3s;
  }

  .opt-acc details[open] summary::after {
    transform: rotate(45deg);
  }

  .opt-acc-body {
    padding: 0 2px 16px;
    font-size: 0.92rem;
    color: var(--muted);
  }

  .opt-acc-body :where(p, ul, ol) {
    margin: 0 0 8px;
  }

  /* ---- Lightbox ---- */
  .opt-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 8, 10, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 4vw;
  }

  .opt-lightbox.open {
    display: flex;
  }

  .opt-lightbox img {
    max-height: 90vh;
    max-width: 90vw;
    border-radius: 12px;
    object-fit: contain;
  }

  .opt-lb-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: #fff;
    border: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    color: var(--ink);
    cursor: pointer;
  }

  .opt-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: background 0.2s, transform 0.2s;
  }

  .opt-lb-nav:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.06);
  }

  .opt-lb-prev { left: max(12px, 2vw); }
  .opt-lb-next { right: max(12px, 2vw); }

  @media screen and (max-width: 749px) {
    .opt-lb-nav {
      width: 40px;
      height: 40px;
      font-size: 1.3rem;
    }
  }

  /* ---- Entrance animations ---- */
  @media (prefers-reduced-motion: no-preference) {
    .opt-reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .opt-reveal.opt-in {
      opacity: 1;
      transform: none;
    }

    .opt-stagger .opt-trust,
    .opt-stagger .opt-title,
    .opt-stagger .opt-sub,
    .opt-stagger .opt-rating,
    .opt-stagger .opt-variants,
    .opt-stagger .opt-price-line,
    .opt-stagger .opt-tax,
    .opt-stagger .opt-stock,
    .opt-stagger .opt-atc-row,
    .opt-stagger .opt-btn-buynow,
    .opt-stagger .opt-perks,
    .opt-stagger .opt-acc {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .opt-stagger.opt-in .opt-trust,
    .opt-stagger.opt-in .opt-title,
    .opt-stagger.opt-in .opt-sub,
    .opt-stagger.opt-in .opt-rating,
    .opt-stagger.opt-in .opt-variants,
    .opt-stagger.opt-in .opt-price-line,
    .opt-stagger.opt-in .opt-tax,
    .opt-stagger.opt-in .opt-stock,
    .opt-stagger.opt-in .opt-atc-row,
    .opt-stagger.opt-in .opt-btn-buynow,
    .opt-stagger.opt-in .opt-perks,
    .opt-stagger.opt-in .opt-acc {
      opacity: 1;
      transform: none;
    }

    .opt-stagger.opt-in .opt-trust { transition-delay: 0.04s; }
    .opt-stagger.opt-in .opt-title { transition-delay: 0.10s; }
    .opt-stagger.opt-in .opt-sub { transition-delay: 0.16s; }
    .opt-stagger.opt-in .opt-rating { transition-delay: 0.22s; }
    .opt-stagger.opt-in .opt-variants { transition-delay: 0.28s; }
    .opt-stagger.opt-in .opt-price-line { transition-delay: 0.34s; }
    .opt-stagger.opt-in .opt-tax { transition-delay: 0.38s; }
    .opt-stagger.opt-in .opt-stock { transition-delay: 0.42s; }
    .opt-stagger.opt-in .opt-atc-row { transition-delay: 0.48s; }
    .opt-stagger.opt-in .opt-btn-buynow { transition-delay: 0.54s; }
    .opt-stagger.opt-in .opt-perks { transition-delay: 0.60s; }
    .opt-stagger.opt-in .opt-acc { transition-delay: 0.66s; }

    /* Micro-interactions */
    .opt-variant {
      transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
    }

    .opt-variant:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px -20px rgba(224, 109, 118, 0.6);
    }

    .opt-btn-atc:active:not(:disabled),
    .opt-btn-buynow:active:not(:disabled) {
      transform: translateY(0) scale(0.99);
    }

    .opt-g-thumbs button {
      transition: border-color 0.2s, transform 0.2s;
    }

    .opt-g-thumbs button:hover {
      transform: translateY(-2px);
    }
  }

  /* ---- Keep the gallery inside the viewport on tablet/mobile ----
     The column stacks here, so the buy box has to scroll — but a square image
     on a short viewport (small phone, or any phone in landscape) pushed the
     title and price off screen entirely. Capping by height keeps the image and
     the buy box's first rows visible together; on a normal portrait phone the
     width still wins, so nothing about the usual layout changes. */
  @media screen and (max-width: 990px) {
    /* Capped by width, not height: the box is 1:1, so bounding the width bounds
       the height too and the square never has to be fought with max-height. */
    .opt-g-main {
      max-width: min(100%, 52svh);
      margin-inline: auto;
    }

    .opt-g-thumbs {
      justify-content: center;
    }
  }

  {%- comment -%}
    A "fit the PDP to one screen" desktop block used to live here: it pinned
    .opt-pdp to 100svh and made .opt-buy an inner overflow-y:auto pane. Two
    problems on desktop — the buy box got its own vertical scrollbar, and
    .opt-g-main sized from height (width:auto on a 1:1 box), so on a wide, short
    window the image grew past its grid column and covered the title and price.
    Removed: the page scrolls normally again and .opt-gallery goes back to being
    sticky. The max-width:990px rules above are untouched — mobile was fine.
  {%- endcomment -%}

  /* ---- Responsive ---- */
  @media screen and (max-width: 990px) {
    /* `1fr` is shorthand for `minmax(auto, 1fr)`, and that `auto` floor refuses
       to shrink below the column's min-content width. One non-shrinkable child
       therefore dragged the whole buy column past the viewport and every
       sibling (ATC, perks, offers) stretched to match. The desktop track above
       already uses minmax(0, ...) — this override was dropping that guard. */
    .opt-pdp {
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(20px, 4vw, 36px);
    }

    /* Grid items default to min-width:auto, which reintroduces the same floor
       one level down and undoes the track fix. */
    .opt-gallery,
    .opt-buy {
      min-width: 0;
    }

    .opt-gallery {
      position: static;
      top: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .opt-now {
      font-size: 1.7rem;
    }

    /* The :has() rule above scores higher than a bare .opt-perks, so the
       single-column override was silently losing whenever a 4th perk existed.
       Match the specificity so mobile actually wins. */
    .opt-perks,
    .opt-perks:has(.opt-perk:nth-child(4)) {
      grid-template-columns: minmax(0, 1fr);
    }

    .opt-perk {
      flex-direction: row;
      justify-content: flex-start;
      text-align: left;
      gap: 12px;
      padding: 12px 14px;
    }

    /* Title clamp used 3vw, which is only 10.8px at 360px — the clamp pinned to
       its floor and never scaled. A vw term in range lets it shrink. */
    .opt-pdp-section .opt-title {
      font-size: clamp(1.35rem, 6vw, 2.5rem);
    }

    /* The Add-to-Cart bar is position:fixed, so it floats over whatever section
       happens to be at the bottom of the viewport — not over this one. Reserving
       the space inside .opt-pdp left a ~100px white band between the product
       info and the banner below it, and still let the bar cover the real end of
       the page. Reserve it on the document instead, and only while the bar is
       actually up, so there's no dead space when it isn't. */
    .opt-pdp {
      padding-bottom: clamp(24px, 6vw, 40px);
    }

    body:has(.sticky-add-to-cart__bar[data-stuck='true']) {
      padding-bottom: calc(var(--height-buy-buttons, 80px) + 40px);
    }

    /* Was only at 480px, so 481-749px squeezed the ATC label against the
       130px-wide stepper. */
    .opt-atc-row {
      flex-wrap: wrap;
    }

    /* Long prices could break mid-number beside the button. */
    .sticky-add-to-cart__price {
      white-space: nowrap;
    }

    /* Scroller arrow sat directly on top of the last thumbnail. */
    .opt-g-thumbs {
      padding-right: 36px;
    }
  }

  @media screen and (max-width: 480px) {
    .opt-variants {
      /* Roomier gap: the -10px variant tag badge was landing 2px off the
         previous card's border and reading as part of it. */
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }

    .opt-qty {
      width: 100%;
      justify-content: space-between;
    }

    .opt-btn-atc {
      flex: 1 1 100%;
    }

    /* Lightbox arrows overlapped the product by ~34px each side at 360px. */
    .opt-lightbox img {
      max-width: calc(100vw - 120px);
    }
  }
/* END_SECTION:product-information */
/* START_BLOCK:_product-details (INDEX:107) */
/* 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_SNIPPET:background-media (INDEX:163) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:buy-buttons-styles (INDEX:168) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

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

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

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

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

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

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

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

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

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

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

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

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

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

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */
/* START_SNIPPET:cart-bubble (INDEX:171) */
.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:173) */
.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:174) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

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

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

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

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

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

  .cart-items__table * {
    margin: 0;
  }

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

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

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

    .cart-items__details {
      display: contents;
    }

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

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

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__property {
    display: block;
  }

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

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

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

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

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

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

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

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

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

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

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */
/* START_SNIPPET:divider (INDEX:179) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */
/* START_SNIPPET:group (INDEX:191) */
.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:192) */
.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:217) */
/* 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-media-gallery-content-styles (INDEX:224) */
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:225) */
.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:226) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */
/* START_SNIPPET:quantity-selector (INDEX:227) */
.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:228) */
#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:resource-card (INDEX:232) */
.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:237) */
/* 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:238) */
.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:skip-to-content-link (INDEX:241) */
.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-controls (INDEX:245) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

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

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

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */
/* START_SNIPPET:slideshow-styles (INDEX:247) */
/*
   * 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:257) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */
/* START_SNIPPET:variant-main-picker (INDEX:266) */
/* 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 */