/** Shopify CDN: Minification failed

Line 5754:55 Expected ")" to end URL token

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:bundle-banner (INDEX:1) */
.bundle-banner {
    padding-inline: 1.5rem;
    margin-block: 1rem 1.5rem;
  }
  .bundle-banner__inner {
    max-width: var(--page-width, 1200px);
    margin-inline: auto;
    border: 1px solid rgba(18, 18, 18, 0.18);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 2.4fr;
    align-items: center;
    gap: 1.5rem;
  }
  .bundle-banner__heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: rgb(18, 18, 18);
  }
  .bundle-banner__subheading {
    font-size: 0.82rem;
    margin: 0;
    color: rgba(18, 18, 18, 0.6);
  }
  .bundle-banner__tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .bundle-banner__tier {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-inline: 0.75rem;
    border-left: 1px solid rgba(18, 18, 18, 0.12);
  }
  .bundle-banner__tier:first-child {
    border-left: none;
  }
  .bundle-banner__tier-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgb(18, 18, 18);
  }
  .bundle-banner__tier-price {
    font-size: 0.85rem;
    color: rgb(18, 18, 18);
  }
  .bundle-banner__tier-price s {
    color: rgba(18, 18, 18, 0.5);
  }
  .bundle-banner__tier-perk {
    font-size: 0.75rem;
    color: rgba(18, 18, 18, 0.6);
  }
  .bundle-banner__cta {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(18, 18, 18);
    color: rgb(255, 255, 255);
    padding: 0.85rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .bundle-banner__cta:hover {
    background: rgba(18, 18, 18, 0.85);
  }

  @media screen and (max-width: 749px) {
    .bundle-banner__inner {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .bundle-banner__tiers {
      grid-template-columns: 1fr;
    }
    .bundle-banner__tier {
      border-left: none;
      border-top: 1px solid rgba(18, 18, 18, 0.12);
      padding-block: 0.5rem;
      padding-inline: 0;
    }
    .bundle-banner__tier:first-child {
      border-top: none;
    }
  }
/* END_SECTION:bundle-banner */

/* START_SECTION:collection-links (INDEX:3) */
collection-links-component {
    --alignment: flex-start;

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

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

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

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

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

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

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

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

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

      &[reverse] {
        grid-template-areas: 'image text';
        grid-template-columns: var(--template-column-ratio) 1fr;
      }

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

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

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

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

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

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

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

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

/* START_SECTION:edit-banner (INDEX:7) */
.edit-banner { position: relative; overflow: hidden; padding-block: var(--pb-start,0) var(--pb-end,0); }
  .edit-banner__picture { display: block; }
  .edit-banner__img { width: 100%; height: auto; display: block; }
  .edit-banner__content { position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; gap: 12px; padding: 5vw; color: #fff; }
  .edit-banner__heading { margin: 0; }
  .edit-banner__cta { display: inline-block; padding: 10px 18px; background: #fff; color: #000; text-decoration: none; }
/* END_SECTION:edit-banner */

/* START_SECTION:edit-spots (INDEX:8) */
/* The spot anchor deliberately does NOT carry .boost-sd__product-item (a6d7e79 removed it,
     so Boost's grid JS stops treating a spot as one of its product cards). It therefore gets
     no cell width of its own -- the .wd-spot-cell wrapper below supplies that.
       single (and empty, and any unrecognised value) : NO width rule -> the wrapper cell sizes
         it like a product card.
       full : a whole row, all devices. */
  .edit-spot { display: block; position: relative; overflow: hidden; text-decoration: none; color: inherit; }
  .edit-spot--full { width: 100%; }

  /* Wrapper cell drool-edit-spots.js puts a spot into when it is placed away from position 0,
     so the spot occupies a real Boost grid cell. Two classes deliberately: .wd-plp-spot-slot
     alone is display:none until html.wd-has-plp-spot is set, and that class only exists when the
     PLP content spot section is enabled -- a collection with edit spots and no content spot would
     otherwise render the cells invisible. */
  .wd-plp-spot-slot.wd-spot-cell { display: block; }
  .wd-plp-spot-slot.wd-spot-cell > .edit-spot { width: 100%; height: 100%; }
  /* A full spot spans the row. Sized with flex-basis, NOT width: Boost's own cell rule
     (.boost-sd__product-list-grid--N-col.boost-sd__product-list--margin .boost-sd__product-item)
     is also three classes and its stylesheet is injected at runtime, so it wins every width
     declaration made here -- which is why a full spot always rendered card-sized. Boost never
     sets flex on a cell, so flex-basis has nothing to out-specify. flex-shrink then absorbs the
     cell's own +-half-gap margins, landing the spot exactly on the card columns at every
     breakpoint without hardcoding the gap. .wd-spot-cell is deliberately NOT required here: the
     cell Boost renders at position 0 carries only .wd-plp-spot-slot. */
  .wd-plp-spot-slot.wd-spot-cell--full { flex: 1 1 100%; min-width: 0; width: 100%; aspect-ratio: auto; }
  /* Same cell under Boost's grid-layout mode, where flex does nothing. */
  .boost-sd__product-list--grid-layout .wd-plp-spot-slot.wd-spot-cell--full { grid-column: 1 / -1; }
  /* Four classes to beat html.wd-has-plp-spot .wd-plp-spot-slot > .edit-spot (height:100%), which
     lives in a later section stylesheet: a full spot is sized by its image, not by the cell. */
  html.wd-has-plp-spot .wd-plp-spot-slot.wd-spot-cell--full > .edit-spot { height: auto; }
  .boost-sd__product-item.wd-plp-spot-slot.wd-spot-cell.wd-spot-cell--full {
    margin-top: 8px;
}

  /* <picture> is inline by default, which leaves a baseline gap under the image inside the block
     anchor. No new class needed -- the element only ever appears inside a spot. */
  .edit-spot picture { display: block; }
  .edit-spot__img { display: block; width: 100%; height: auto; }
  .edit-spot--single .edit-spot__img { height: 100%; object-fit: cover; }
  .edit-spot__content { position: absolute; inset: auto 0 0 0; padding: 20px; color: #fff; }
  .edit-spot__heading { display: block; font-weight: 700; margin-bottom: 6px; }
  .edit-spot__body { display: block; }
  .edit-spot__cta { display: inline-block; margin-top: 10px; text-decoration: underline; }
  .boost-sd__filter-product-list .edit-spot__img { display: block !important; object-fit: contain; height: 100%;}
  /* Full-row artwork keeps its own aspect ratio (a 1525x211 mid-roll lands ~194px tall on desktop).
     Three classes so it out-specifies the two-class contain/height rule above, which otherwise
     pins every spot image to height:100%. max-height is only a guard: it engages if card artwork
     is put on a full entry, cropping instead of rendering a 2000px-tall image. */
  .wd-spot-cell--full .edit-spot--full .edit-spot__img {
    width: 100%; height: auto; max-height: 70vh; object-fit: cover;
  }
  /* Product displaced by a single-layout spot (drool-edit-spots.js hides one trailing
     product per slot-consuming spot, keeping the page an exact rows-of-4 rectangle). */
  .boost-sd__product-item.edit-spot-displaced { display: none !important; }
/* END_SECTION:edit-spots */

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

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

  /* Here I should maybe set the width to auto when the ratio is set to adapt */
  .featured-product-section .product-media-container.constrain-height {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);

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

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

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

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

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

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

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

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

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

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:12) */
body {
    --header-height: 0px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  body:has(> #header-group > header) {
    --header-height: 60px;
  }

  body:has(> #header-group:empty) {
    --header-group-height: 0px;
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;

    /* used to apply transparency to .header__row, will only ever be transparent or unset */
    --header-bg-color: transparent;

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

    /* transparent color scheme on .header should never apply its background color */
    background-color: transparent;
    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    /* Only show opaque background when hovering over menu items with children (mega menu)
       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[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --header-bg-color: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;

      .header__row {
        /* Faster transition for "in" animation */
        transition: color var(--animation-values-fast), border-color var(--animation-values-fast),
          background-color var(--animation-values-fast);
      }
    }

    .header__row {
      /* Slower transition for "out" animation */
      transition: color var(--animation-values-slow), border-color var(--animation-values-slow),
        background-color var(--animation-values-slow);
    }
  }

  :is(.header[transparent]:not([data-sticky-state='active']), .header[transparent='always'][data-sticky-state='active'])
    .header__row:not(
      :has(
          .mega-menu__list:hover,
          .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating]),
          .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
        )
    ) {
    /* while transparent, header-row ignores its color-scheme settings, pull from the header-component */
    --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--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover) .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
  }

  .header-section {
    position: relative;
  }

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

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

  .header__row {
    position: relative;

    /* will default to bg from its color scheme unless --header-bg-color is transparent */
    background-color: var(--header-bg-color, var(--color-background));
  }

  .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__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(.account-actions)) .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;
  }

  /* 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(.dropdown-localization__button:hover),
  .header__column:has(.header__icon--menu:hover) {
    header-menu:not(:hover),
    .header-actions__action:not(:hover),
    .dropdown-localization__button: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,
  .dropdown-localization__button,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Extend hover area through padding to prevent flickering on actual menu items */
  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link[aria-haspopup],
  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link,
  .menu-list__list-item:where(:not([slot='overflow'])) > button.menu-list__link {
    margin-block: calc(-2 * var(--header-padding));
    padding-block: calc(2 * var(--header-padding));
    margin-inline: calc(-1 * var(--gap-xl) / 2);
    padding-inline: calc(var(--gap-xl) / 2);
  }

  /* Set header paddings based on height setting */
  .header {
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
  }

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

/* START_SECTION:hero (INDEX:13) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

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

    min-height: 600px;
  }

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

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

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

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

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

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

  .hero--auto .hero__image,
  .hero--auto .hero__video {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    :is(.hero__image, .hero__video) {
      width: 100%;
      aspect-ratio: auto;
    }

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

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

  .hero__video-poster {
    position: absolute;
  }

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

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

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

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

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

  .hero[data-blur-shadow='true'] .hero__container {
    overflow: inherit;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /**
   * Apart from the first and second rows in the grid, all remaining blog posts
   * are arranged in a three-column layout:
   * +------------+------------+-------------+
   * |            |            |             |
   * |  (span 2)  |  (span 2)  |  (span 2)   |
   * |            |            |             |
   * +------------+------------+-------------+
   */
  .blog-post-item {
    --blog-post-card-scale: 0.6;

    grid-column: span 2;

    @media screen and (max-width: 749px) {
      --blog-post-card-scale: 0.5;

      grid-column: span 6;
    }
  }

  /**
   * The second row of blog posts has two columns:
   * +-------------------+-------------------+
   * |                   |                   |
   * |  (column span 3)  |  (column span 3)  |
   * |                   |                   |
   * +-------------------+-------------------+
   */
  .blog-post-item:nth-child(2),
  .blog-post-item:nth-child(3) {
    --blog-post-card-scale: 0.8;

    grid-column: span 3;

    @media screen and (max-width: 749px) {
      --blog-post-card-scale: 0.5;

      grid-column: span 6;
    }
  }

  /**
   * The first row of blog posts has only one column:
   * +---------------------------------------+
   * |                                       |
   * |           (1 column span 6)           |
   * |                                       |
   * +---------------------------------------+
   */
  .blog-post-item:first-child {
    --blog-post-card-scale: 1;

    grid-column: span 6;
  }

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

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

/* START_SECTION:main-cart (INDEX:17) */
.cart-page {
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--2xl: var(--font-size--2xl);

    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

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

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

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

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

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

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

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

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

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

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

    .cart__container--extend {
      height: 100%;
    }
  }

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

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

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

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }
/* END_SECTION:main-collection */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:password (INDEX:23) */
.section--password {
    --section-min-height: calc(100svh - 8rem);
  }

  .password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-block-start: var(--padding-xl);
  }

  .password-enter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

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

    a {
      display: flex;
    }

    svg {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

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

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

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

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

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SECTION:password */

/* START_SECTION:plp-content-spot (INDEX:24) */
.plp-content-spot-source { display: none; }

  /* The slot is rendered by Boost on every grid pass and is inert by default, so a collection
     with no spot configured looks untouched. Only the class above gives it size. */
  .wd-plp-spot-slot { display: none; }

  html.wd-has-plp-spot .wd-plp-spot-slot {
    display: block;
  }

  html.wd-has-plp-spot .wd-plp-spot-slot > .plp-content-spot,
  html.wd-has-plp-spot .wd-plp-spot-slot > .edit-spot {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* The slot consumes one cell, so a full page of products would wrap one card onto a stub row.
     Hiding the trailing card in CSS keeps the grid rectangular without the post-render JS pass
     that used to cause its own shift. :has() scopes it to grids that really contain a slot. */
  /* Both combinators matter. Without the child combinators the rule also matched the edit-spot
     anchor inside a slot, back when that anchor still carried .boost-sd__product-item and was
     its parent's :last-child, which hid the spot's own image. a6d7e79 has since taken that
     class off the anchor, but keep the combinators: they are what scopes this to real grid
     cells. :not(.wd-spot-cell) keeps this to the single cell Boost
     renders at index 0 -- the wrapper cells drool-edit-spots.js creates for later positions do
     their own displacement accounting, and counting them here would hide a second product. */
  html.wd-has-plp-spot:not(.wd-has-edit-spots) .boost-sd__product-list:has(> .wd-plp-spot-slot:not(.wd-spot-cell)) > .boost-sd__product-item:last-child {
    display: none;
  }
  .plp-content-spot {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
  }
  .plp-content-spot__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 324 / 399;
    overflow: hidden;
    background: #e2e2e2;
  }
  .plp-content-spot__img,
  .plp-content-spot__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .plp-content-spot__placeholder { background: #d9d9d9; }
  /* CTA sits BELOW the tile image (item PLP-1), styled as our standard black rounded pill,
     white bold text, centred (Figma 118-2918, item 19a). */
  .plp-content-spot__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    background: #000;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.01em;
    padding: 12px 30px;
    border-radius: 999px;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  /* Hover (whole tile is a link) turns the CTA yellow with black text — matches the site's native
     ATC / bundle CTA hover (feedback). */
  .plp-content-spot:hover .plp-content-spot__cta,
  .plp-content-spot__cta:hover {
    background: #f2ff00;
    color: #000;
  }
/* END_SECTION:plp-content-spot */

/* START_SECTION:predictive-search (INDEX:26) */
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);
  }

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

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

  :not(:is(dialog)) > predictive-search-component {
    @media screen and (min-width: 750px) {
      max-width: min(40dvw, 650px);
    }
  }

  :not(:is(dialog)) > predictive-search-component .predictive-search__close-modal-button {
    display: none;
  }

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

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

  .predictive-search--right {
    margin-right: 0;
    margin-left: auto;
  }

  .predictive-search--left {
    margin-right: auto;
    margin-left: 0;
  }

  :not(:is(dialog)) > predictive-search-component.predictive-search--floating {
    width: min(40dvw, 650px);
    position: absolute;
    top: var(--search-top, unset);
    right: var(--search-right, unset);
    left: var(--search-left, unset);
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

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

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

  :not(:is(dialog))
    > predictive-search-component:not(.predictive-search--expanded)
    .predictive-search-form__content-wrapper {
    display: none;
  }

  .predictive-search-form__header-inner:has(.search-input:focus-visible) {
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: calc(var(--focus-outline-offset) * -1);
  }

  .predictive-search-results__inner {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);
    --list-item-padding-block: var(--padding-sm);

    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__inner > * {
    padding-inline: var(--padding-xl);
  }

  .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:last-child {
    margin-block-end: 0;
  }

  .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__list-item {
    padding-inline: var(--padding-sm);
    padding-block: var(--list-item-padding-block);
    border-radius: var(--style-border-radius-popover);
    scroll-margin-block: var(--padding-xl);

    &:first-child {
      /* scroll-margin to match font + padding + margin on .predictive-search-results__title */
      scroll-margin-block-start: calc(
        var(--title-font-size) + var(--title-margin-block) + var(--list-item-padding-block)
      );
    }

    &:not(:has(.predictive-search-results__list-item-link--pill))[aria-selected='true'].keyboard-focus {
      background-color: rgb(var(--color-primary-rgb) / var(--opacity-20));
      transform: translateY(0);
    }
  }

  .predictive-search-results__list-item:has(.predictive-search-results__list-item-link--pill) {
    width: fit-content;
    padding: 0;
  }

  .predictive-search-results__list-item-link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: var(--gap-xl);
    align-items: center;
  }

  .predictive-search-results__list-item-link--pill {
    display: block;
    padding: var(--padding-2xs) var(--padding-sm);
  }

  .predictive-search-results__list-item[aria-selected='true'] .predictive-search-results__list-item-link--pill {
    background-color: rgb(var(--color-primary-rgb) / var(--opacity-20));
  }

  .predictive-search-results__list-item-link--no-media {
    grid-template-columns: 1fr;
  }

  .predictive-search-results__list-item-image,
  .predictive-search-results__list-item-icon {
    width: 100%;
    border-radius: var(--product-corner-radius);
    background-color: rgb(var(--color-primary-rgb) / var(--opacity-20));
    margin: auto;
    object-fit: cover;
  }

  .predictive-search-results__list-item-details {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
  }

  .predictive-search-results__list-item-content {
    font-size: var(--font-size-xs);
    color: rgb(var(--color-primary-rgb) / var(--opacity-subdued-text));
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
  }

  .header[transparent] :is(.predictive-search):not(:focus-within) {
    background-color: transparent;
  }

  .header[transparent] .predictive-search-form__header-inner {
    border-color: var(--color-foreground);
  }

  .predictive-search-form__header .search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);

    &: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;
    background: transparent;
    color: var(--color-foreground);
    opacity: 1;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

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

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

    @media screen and (max-width: 749px) {
      margin-right: var(--margin-md);
    }
  }

  .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-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

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

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

  .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:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .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-radius: var(--style-border-radius-inputs);

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

  .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: 0;
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

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

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

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

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

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

  .predictive-search-form__footer {
    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);
    }
  }

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

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

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

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

  /* Styles for the snippets */

  .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__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
  }

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

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

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

  .predictive-search-results__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__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);

    padding-block: var(--padding-3xs);
    gap: var(--gap-md);
  }

  .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__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    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);
    }
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &: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);
    }

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

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

  .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__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

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

  .predictive-search-dropdown .predictive-search-results__list-item-image,
  .predictive-search-dropdown .predictive-search-results__list-item-icon {
    width: 100%;
    border-radius: var(--product-corner-radius);
    background-color: rgb(var(--color-primary-rgb) / var(--opacity-20));
    margin: auto;
    object-fit: cover;
  }

  .predictive-search-results__list-item,
  .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 {
    animation-delay: 0ms !important;
  }

  .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__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__list-item {
    animation-delay: calc(30ms * var(--nth-child, 1) + 50ms);
  }

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

  .predictive-search-results__wrapper-products {
    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;
  }

  [data-resource-type] {
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
  }

  .predictive-search-results__list-item.removing,
  .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);
  }

  .predictive-search__reset-button {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);
  }

  .predictive-search-results__no-results {
    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);
    }
  }

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

  .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__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.5;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)),
  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--color-border) !important;
  }

  .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-form__header {
    border-radius: var(--style-border-radius-inputs);
    border: var(--search-border-width) solid var(--color-border);
  }

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

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

  .predictive-search-results__pill {
    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));
    }
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-information (INDEX:27) */
.product-information {
    gap: var(--gap) 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SECTION:product-information */

/* START_SECTION:product-recommendations (INDEX:29) */
.product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:wd-featured-artist (INDEX:36) */
/* Featured Artist — measurements traced from the 1728px Figma desktop frame.
     Fixed px is used for type, badges and radii (they do not scale); the split and the
     tile row are proportional so the section holds up between 990px and 1728px+. */
  .wd-fa {
    --wd-fa-font: var(--font-body--family, 'Work Sans', sans-serif);
    --wd-fa-hero-w: 43.81%; /* 757.04 / 1728 */
    --wd-fa-pad-inline: 6.55%; /* 63.6 / 970.96 - padding is a % of the content column, not the section */
    --wd-fa-tile-w: 274.19px;
    --wd-fa-pad-block: 54px;
    --wd-fa-tile-gap: 10.56px;
    --wd-fa-tile-name-h: 50.1px;
    --wd-fa-radius-top: 8.5px;
    --wd-fa-radius-bottom: 10px;
    --wd-fa-hover: #f2ff00; /* DROOL yellow, per drool.css / mrk-free-shipping-bar.liquid */
    --wd-fa-pad-inline-mobile: 20px;

    background: var(--wd-fa-bg, #efefef);
    font-family: var(--wd-fa-font);
  }

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

  .wd-fa__inner {
    min-height: var(--wd-fa-section-h, auto);
    display: grid;
    grid-template-columns: var(--wd-fa-hero-w) 1fr;
    align-items: stretch;
  }

  .wd-fa--no-hero .wd-fa__inner {
    grid-template-columns: 1fr;
  }

  /* ---- Hero ---- */
  .wd-fa__hero {
    position: relative;
    min-width: 0;
    /* Width must stay definite. Deliberately no aspect-ratio on desktop: with only a ratio
       set, `align-items: stretch` makes the row height drive the WIDTH, and a taller content
       column then pushes the hero over the tiles. Without one, the hero simply fills whatever
       height the row ends up being and the image crops to suit. */
    width: 100%;
    overflow: hidden;
  }

  /* Fills the column, so the badge and corner CTA sit on the image's own corners. */
  .wd-fa__hero-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
  }

  .wd-fa__hero-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    /* Crops to fill, matching media-with-content and hero.liquid. */
    object-fit: cover;
  }

  .wd-fa__hero-img--mobile {
    display: none;
  }

  .wd-fa__hero-badge,
  .wd-fa__tile-badge {
    display: inline-flex;
    align-items: center;
    background: #000;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .wd-fa__hero-badge {
    position: absolute;
    top: 20px;
    left: 23px;
    gap: 9.96px;
    height: 22.76px;
    padding: 0 6.32px 0 7.32px;
    font-size: 16px;
  }

  .wd-fa__hero-badge .wd-fa__icon {
    width: 12.81px;
    height: 9.76px;
  }

  .wd-fa__hero-cta {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-flex;
    align-items: stretch;
    height: 50.45px;
    color: #fff;
    text-decoration: none;
  }

  .wd-fa__hero-cta-label {
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: #424242;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-transform: capitalize;
  }

  .wd-fa__hero-cta-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48.79px;
    background: #000;
  }

  .wd-fa__hero-cta-arrow .wd-fa__icon {
    width: 6.74px;
    height: 13.2px;
  }

  /* ---- Content column ---- */
  .wd-fa__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    padding: var(--wd-fa-pad-block) var(--wd-fa-pad-inline);
    text-align: center;
  }

  .wd-fa__tag {
    /* Explicit line-height: the theme's inherited 24px made this box 6px taller than the
       18px in Figma, which pushed everything below it down by the same amount. */
    margin: 0 0 7.24px;
    color: #999;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1.05px;
    text-transform: uppercase;
  }

  .wd-fa__heading {
    margin: 0 0 40.08px;
    color: #000;
    font-family: inherit;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
  }

  /* ---- Tiles ---- */
  .wd-fa__rail {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 32.11px;
  }

  .wd-fa__tiles {
    display: flex;
    gap: var(--wd-fa-tile-gap);
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Arrows sit over the vertical centre of the tile artwork, ignoring the caption. */
  .wd-fa__arrows {
    position: absolute;
    top: calc((100% - var(--wd-fa-tile-name-h)) / 2);
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .wd-fa__arrows .slideshow-control {
    --slideshow-controls-icon: 1.1rem;

    width: 40px;
    min-height: 40px;
    height: 40px;
    padding: 0;
    /* A ring plus a soft shadow so the control reads against any artwork underneath -
       a plain black circle disappears into a dark image. */
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 65%),
      0 2px 8px rgb(0 0 0 / 25%);
    pointer-events: auto;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
  }

  /* An arrow that cannot do anything is hidden rather than dimmed. `visibility` keeps its
     footprint, so the opposite arrow stays pinned to its edge instead of jumping across when
     this one goes; it also drops out of the tab order and the accessibility tree. */
  .wd-fa__arrows .slideshow-control[disabled] {
    cursor: default;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Nothing to scroll (or no JS): keep the arrows out of the way entirely. */
  .wd-fa__rail:not([scrollable]) .wd-fa__arrows {
    display: none;
  }

  /* Desktop only - on touch the rail is swiped, and the arrows would cover artwork. */
  @media screen and (max-width: 989px) {
    .wd-fa__arrows {
      display: none;
    }
  }

  .wd-fa__tile {
    flex: 0 1 var(--wd-fa-tile-w);
    max-width: var(--wd-fa-tile-w);
    min-width: 0;
  }

  .wd-fa__tiles--carousel {
    /* `safe` keeps the row centred while it fits and switches to start-aligned once it
       overflows, so no tile becomes unreachable by scrolling. */
    justify-content: safe center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .wd-fa__tiles--carousel::-webkit-scrollbar {
    display: none;
  }

  .wd-fa__tiles--carousel .wd-fa__tile {
    flex: 0 0 var(--wd-fa-tile-w);
    scroll-snap-align: start;
  }

  .wd-fa__tile-link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .wd-fa__tile-card {
    position: relative;
  }

  .wd-fa__tile-media {
    position: relative;
    aspect-ratio: 274 / 334;
  }

  .wd-fa__tile-media-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--wd-fa-radius-top) var(--wd-fa-radius-top) 0 0;
    background: #e0e0e0;
  }

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

  .wd-fa__tile-badge {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    gap: 7.87px;
    height: 16.62px;
    padding: 0 4.61px 0 5.34px;
    font-size: 11.7px;
    transform: translate(-50%, 50%);
  }

  .wd-fa__tile-badge .wd-fa__icon {
    width: 9.36px;
    height: 7.13px;
  }

  .wd-fa__tile-name {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--wd-fa-tile-name-h);
    padding: 4px 10px;
    border-radius: 0 0 var(--wd-fa-radius-bottom) var(--wd-fa-radius-bottom);
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }

  .wd-fa__tile-name--badged {
    align-items: flex-start;
    padding-top: 15px;
  }

  .wd-fa__tile-title {
    display: block;
  }

  .wd-fa__tile-artist {
    display: block;
    margin-top: 2px;
    color: #666;
    font-size: 13px;
    font-weight: 400;
  }

  /* ---- Hover & focus states ----
     Not specified in Figma; kept restrained and built only from colours already in the
     design. Motion is disabled under prefers-reduced-motion further down. */
  .wd-fa__hero-img,
  .wd-fa__tile-img {
    transition: transform 0.4s ease;
  }

  .wd-fa__hero-cta-label,
  .wd-fa__hero-cta-arrow,
  .wd-fa__cta {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .wd-fa__hero-cta-arrow .wd-fa__icon,
  .wd-fa__hero-badge .wd-fa__icon {
    transition: transform 0.2s ease;
  }

  /* Hero: hovering anywhere on the image drives the corner CTA, since the whole
     image is the link. */
  .wd-fa__hero-link:hover .wd-fa__hero-img,
  .wd-fa__hero-link:focus-visible .wd-fa__hero-img {
    transform: scale(1.02);
  }

  .wd-fa__hero-link:hover .wd-fa__hero-cta-label,
  .wd-fa__hero-link:focus-visible .wd-fa__hero-cta-label,
  .wd-fa__hero-link:active .wd-fa__hero-cta-label,
  .wd-fa__hero-link:hover .wd-fa__hero-cta-arrow,
  .wd-fa__hero-link:focus-visible .wd-fa__hero-cta-arrow,
  .wd-fa__hero-link:active .wd-fa__hero-cta-arrow {
    background: var(--wd-fa-hover);
    color: #000;
  }

  .wd-fa__hero-link:hover .wd-fa__hero-cta-arrow .wd-fa__icon,
  .wd-fa__hero-link:focus-visible .wd-fa__hero-cta-arrow .wd-fa__icon {
    transform: translateX(2px);
  }

  /* Tiles */
  .wd-fa__tile-link:hover .wd-fa__tile-img,
  .wd-fa__tile-link:focus-visible .wd-fa__tile-img {
    transform: scale(1.04);
  }

  .wd-fa__tile-link:hover .wd-fa__tile-name,
  .wd-fa__tile-link:focus-visible .wd-fa__tile-name {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .wd-fa__hero-link:focus-visible,
  .wd-fa__tile-link:focus-visible,
  .wd-fa__cta:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  /* ---- Main CTA ---- */
  .wd-fa__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 333.31px;
    height: 46.1px;
    padding: 0 24px;
    /* The theme's own button tokens rather than hardcoded colours, so this pair matches every
       other button on the site and follows any change to the brand colours. */
    border: 1px solid var(--color-primary-button-border, #000);
    border-radius: 999px;
    background: var(--color-primary-button-background, #000);
    color: var(--color-primary-button-text, #fff);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .wd-fa__cta:hover,
  .wd-fa__cta:active {
    background: var(--color-primary-button-hover-background, #f2ff00);
    border-color: var(--color-primary-button-hover-border, #000);
    color: var(--color-primary-button-hover-text, #000);
  }

  .wd-fa__cta--secondary {
    background: var(--color-secondary-button-background, transparent);
    border-color: var(--color-secondary-button-border, #000);
    color: var(--color-secondary-button-text, #000);
  }

  .wd-fa__cta--secondary:hover,
  .wd-fa__cta--secondary:active {
    background: var(--color-secondary-button-hover-background, #fafafa);
    border-color: var(--color-secondary-button-hover-border, #333);
    color: var(--color-secondary-button-hover-text, #333);
  }


  @media (prefers-reduced-motion: reduce) {
    .wd-fa__hero-img,
    .wd-fa__tile-img,
    .wd-fa__hero-cta-label,
    .wd-fa__hero-cta-arrow,
    .wd-fa__cta,
    .wd-fa__hero-cta-arrow .wd-fa__icon {
      transition: none;
    }

    .wd-fa__hero-link:hover .wd-fa__hero-img,
    .wd-fa__tile-link:hover .wd-fa__tile-img {
      transform: none;
    }
  }

  /* ---- Mobile: stack, and always scroll the tiles ---- */
  @media screen and (max-width: 989px) {
    .wd-fa__inner {
      grid-template-columns: 1fr;
    }

    .wd-fa__hero {
      /* Stacked, so there is no content column to reconcile against: the box takes the
         mobile image's own ratio and nothing is cropped, unlike desktop. The 660/536 from
         the mobile reference is only a fallback for before an image is chosen. */
      aspect-ratio: var(--wd-fa-hero-ratio-mobile, var(--wd-fa-hero-ratio, 660 / 536));
    }


    .wd-fa__hero-img--desktop {
      display: none;
    }

    .wd-fa__hero-img--mobile {
      display: block;
    }

    .wd-fa__content {
      padding: 32px var(--wd-fa-pad-inline-mobile);
    }

    /* The tile rail runs to the screen edge instead of stopping at the content's inline
       padding, so a part-visible tile is cut off by the edge rather than by dead space -
       matching the theme's carousels, which bleed and inset with gutter slides. The padding
       here reproduces that inset at both ends, and scroll-padding keeps snapping aligned
       with it. */
    .wd-fa__rail {
      /* stretch + auto width, so the negative margins actually widen the rail to the screen
         edges rather than just shifting a fixed 100% box */
      align-self: stretch;
      width: auto;
      margin-inline: calc(var(--wd-fa-pad-inline-mobile) * -1);
    }

    .wd-fa__heading {
      font-size: 24px;
    }

    .wd-fa__tiles {
      justify-content: safe start;
      padding-inline: var(--wd-fa-pad-inline-mobile);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline-start: var(--wd-fa-pad-inline-mobile);
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .wd-fa__tiles::-webkit-scrollbar {
      display: none;
    }

    .wd-fa__tile {
      flex: 0 0 62vw;
      max-width: 62vw;
      scroll-snap-align: start;
    }

    .wd-fa__cta {
      min-width: 0;
      width: 100%;
      max-width: 333.31px;
    }
  }
/* END_SECTION:wd-featured-artist */

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

/* START_BLOCK:_announcement (INDEX:45) */
.text-block {
    width: var(--width);
    max-width: 100%;
  }

  .text-block > * {
    width: var(--width);
    max-width: var(--max-width, 100%);
    text-align: var(--text-align);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .blog-post-item:first-child .blog-post-card {
    flex-direction: row;

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

  .blog-post-item:first-child .blog-post-card__image-container {
    width: 70%;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .blog-post-item:first-child:has(.blog-post-card__image-container) .blog-post-card__content {
    padding-inline-start: var(--columns-gap);
    width: 30%;

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_blog-post-featured-image (INDEX:49) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;
    display: block;
    position: relative;
    width: var(--width);
  }

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_cart-products (INDEX:52) */
.cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

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

/* START_BLOCK:_cart-summary (INDEX:53) */
.cart__summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart__summary-item.tax-note {
    font-size: var(--cart-font-size--sm);
  }

  .cart__discount-label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
    background-color: #f4f4f5;  
    padding: 6px 12px;
    border-radius: 8px;
  }

  .cart__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart__discount-label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart__summary-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

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

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

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

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

  .cart__summary-container:not(.cart__container--extend),
  .cart__summary-container:not(.cart__container--extend) .cart__summary-inner {
    height: auto;
  }

  .cart__container--extend {
    height: 100%;

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

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

  .cart__container--extend .cart__summary-inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

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

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

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

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

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

  .cart-title .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
    min-width: 26px;
  }

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

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-size: clamp(var(--cart-font-size--2xs), 0.7lh, var(--cart-font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-card-image (INDEX:55) */
.collection-card__image {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
    z-index: var(--layer-base);
    overflow: hidden;
  }

  .collection-card__image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_collection-card-image */

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

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

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

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

    @media (hover: hover) {
      opacity: var(--disabled-opacity);
    }

    [layout='spotlight'] & {
      opacity: var(--disabled-opacity);
    }

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

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

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

      [layout='spotlight'] & {
        white-space: nowrap;
        scroll-snap-align: start;

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

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

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

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

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

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

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

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

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

  .featured-product-content-bottom:not(:has(product-swatches)) {
    display: none;
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-policy-list (INDEX:67) */
.policy_list {
    display: flex;
    gap: var(--gap-2xs) var(--gap-sm);

    /* Depending on the content, some smaller desktop layouts will need to wrap the items to fit everything */
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-policy-list */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_header-menu (INDEX:70) */
.menu-list--mobile {
    &.menu-list {
      display: grid;
    }

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

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

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

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

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

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

  header-menu {
    width: 100%;
  }

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

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

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

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

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

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

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

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

  /* Apply title case to drawer menu featured content */
  .menu-drawer__featured-content-list-item--product .resource-card__title,
  .menu-drawer__featured-content-list-item--collection .resource-card__title {
    text-transform: var(--title-case);
  }

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

    display: flex;
  }

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

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }
  .menu-list__link:hover .menu-list__link-title::after, .menu-list__list-item:hover .menu-list__link-title::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 5px;
      width: 100%;
      height: 6px;
      background-color: #f2ff00;
      z-index: -1;
  }

  .menu-list__link-title {
      position: relative;
      z-index: 1;
  }
  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    transition: color var(--animation-speed) var(--animation-easing);
    text-decoration: none;
    display: flex;
    min-height: var(--minimum-touch-target);
    align-items: center;
    gap: var(--gap-2xs);
    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

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

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

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

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

    gap: 0 var(--menu-horizontal-gap);
  }

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

  /* the submenu background element to animate */
  .overflow-menuu::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px + var(--border-bottom-width));
    left: 0;
    width: 100%;
    height: var(--submenu-height);
    background-color: var(--color-background);
    box-shadow: var(--shadow-popover);
    z-index: calc(var(--layer-header-menu) - 1);
  }

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

    background-color: transparent;
  }

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

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {

    box-shadow: var(--shadow-drawer);
    visibility: hidden;
    background-color: var(--color-background);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
  }
 
  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    grid-column: 2;
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
  }

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

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

  .overflow-menu::part(overflow-list) {
    --submenu-content-opacity: 0;

    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
  }

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

    display: contents;
    white-space: normal;

    .menu-list__link {
      --submenu-content-opacity: 0;

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

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

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

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

  /* .header-menu[data-overflow-expanded='true'] .menu-list__list-item:where([slot='overflow']) .menu-list__link {
    --submenu-content-opacity: 1;
  }

  .menu-list__list-item:where([slot='overflow']):has([data-animating]) > .menu-list__link {
    --submenu-content-opacity: 0;
  } */
  .menu-list__submenu{
    transition: opacity 100ms ease, visibility 0ms;
  }
  .menu-list__list-item:hover .menu-list__submenu {
    visibility: visible;
    opacity: 1;
  }
  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .mega-menu__column--collection-image .mega-menu__link {
    text-transform: var(--title-case);
  }

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

  /* Apply title case to featured products and collections */
  .mega-menu__content-list--products .resource-card__title,
  .mega-menu__content-list--collections .resource-card__title {
    text-transform: var(--title-case);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

    width: 200px;
  }

  .mega-menu__more-list-item .mega-menu__link {
    color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
  }

  .mega-menu__more-list-item:where(:hover, .active) .mega-menu__link {
    color: var(--menu-top-level-font-color);
  }

  .mega-menu__more-list-item[aria-hidden='true'] {
    display: none;
  }

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

/* START_BLOCK:_image (INDEX:72) */
image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

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

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:75) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

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

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

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

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

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

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

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

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

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

/* START_BLOCK:_product-details (INDEX:81) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_product-media-gallery (INDEX:85) */
.dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .dialog-zoomed-gallery__close-button {
    border-radius: 50%;
    color: white;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

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

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

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

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

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

/* START_BLOCK:_search-input (INDEX:86) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:87) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .slide__content > * {
    margin: auto;
  }

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

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > placeholder-image,
  .slide__image-container > placeholder-image > img {
    width: 100%;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:88) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    fill: currentColor;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accelerated-checkout (INDEX:89) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

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

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

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

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_BLOCK:accelerated-checkout */

/* START_BLOCK:accordion (INDEX:90) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:bundle-builder (INDEX:94) */
.bundle-builder {
    display: block;
    margin-block: 0px;
  }
  .bundle-builder__heading {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(18, 18, 18, 0.6);
    margin: 0 0 0.6rem;
  }
  /* The block's "Quantity" heading is redundant with "① Choose Your Pack Size" (not in Figma). */
  .bundle-builder__heading { display: none; }
  /* Bundle mode: grey backdrop on the right column; sections are white cards (Figma).
     box-shadow + clip-path bleeds the grey to the right page edge without causing
     horizontal scroll (nothing on the page clips overflow-x). */
  /* :not(#quick-add-dialog *) keeps these page-global "hide the native PDP UI in
     bundle mode" rules from also blanking out the quick-view buy-box injected into
     the quick-add modal (which is itself a product-information section). */
  body.bb-bundle-active .product-details:not(#quick-add-dialog *) {
    background: rgb(240, 240, 240);
    box-shadow: 0 0 0 100vmax rgb(240, 240, 240);
    /* bleed right (-100vmax) and up (-160px) so the grey meets the header over the
       breadcrumb row; the excess behind the opaque sticky header is hidden. */
    clip-path: inset(-160px -100vmax 0 0);
  }
  /* Bundle mode: hide ALL native material selectors (the bundle has its own ③). */
  body.bb-bundle-active .variant-option--buttons:has(.mrk-custom-linked):not(#quick-add-dialog *) {
    display: none !important;
  }
  /* Bundle mode: hide the native PDP flash-sale badge (the red "X% OFF" from the discount-badge
     block). It reports the markdown on the LANDING product's selected variant, which is the right
     thing to say next to a single-print price — but the pack header above it is a whole-pack
     projection, so leaving the badge there reads as "X% off the whole pack". The per-print
     markdown is still surfaced where it's true: the slot's "EXTRA X% OFF" badge and the
     "N pack discount + Extra X%" note. Single view is untouched (the badge belongs there).

     `:has(.mrk-discount-badge)` scopes this to the DISCOUNT badge specifically. `.mrk-sale-badge-wrapper`
     alone would also catch the "BUNDLE OFFER" badge (`.wd-bundle-offer-badge`), which mrk.css hides
     globally but deliberately re-shows on gallery-wall products via `display: inline-flex !important`
     — and because the `:not(#quick-add-dialog *)` below contributes an id to this selector's
     specificity, an unscoped rule would out-specify that and wrongly hide it there.

     `!important` is REQUIRED, not decorative: mrk.js's updatePrices() calls jQuery
     $('.mrk-sale-badge-wrapper').show() on variant change, which sets an inline display. */
  body.bb-bundle-active .mrk-sale-badge-wrapper:has(.mrk-discount-badge):not(#quick-add-dialog *) {
    display: none !important;
  }
  /* "Complete the look" upsell is hidden in pack mode via targeted JS (_toggleNativeUpsell) —
     a CSS :has() rule here matched an over-broad ancestor and collapsed the whole panel. */
  /* Section heading with a circled number (1/2/3). */
  .bundle-builder__section-heading {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 14px;
    font-weight: 700;
    color: #000000;
    margin: 1.5rem 0 0.7rem;
  }
  .bundle-builder__section-num {
display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: #d9d9d9;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
    left: -2px;
    position: relative;
  }
  /* Five tiers don't fit the row, so it scrolls horizontally: each button is sized to ~4.25 per
     view, which keeps the first four at (near enough) their old grid width and leaves the 5th
     half-visible as the affordance that there's more. Arrows are wired in _wireTierArrows(). */
  .wd-bundle-builder__tiers-wrap { position: relative; }
  .bundle-builder__tiers {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* The wiggle animation rotates the button, which would otherwise be clipped by the scroll
       box; a little vertical padding gives the rotated corners room. */
    padding: 3px 0;
  }
  .bundle-builder__tiers::-webkit-scrollbar { display: none; }
  .bundle-builder__tier {
    flex: 0 0 calc((100% - 3 * 8px) / 4.25);
    scroll-snap-align: start;
  }
  .wd-bundle-builder__tiers-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
  }
  .wd-bundle-builder__tiers-arrow[hidden] { display: none; }
  .wd-bundle-builder__tiers-arrow svg { width: 14px; height: 14px; }
  .wd-bundle-builder__tiers-arrow--prev { left: -6px; }
  .wd-bundle-builder__tiers-arrow--next { right: -6px; }
  .bundle-builder__tier {
    position: relative;
    display: flex;
    /* Column so the per-print line stacks under the label. With that line hidden (the A/B
       control arm) the label is the only in-flow child, and a single centred child renders
       identically in row and column direction — main's layout is unchanged. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Taller than main's 1rem so the label gets air above it and the per-print line air below.
       Safe for the A/B control arm: with the per-print line hidden, label + padding still total
       well under the 77px min-height, so control buttons stay exactly main's height — the extra
       padding only materialises when the (taller) variant content is visible. */
    padding: 1.3rem 0.4rem;
    min-height: 77px;
    border: 1.5px solid #d9d9d9; /* reserve space so the selected state doesn't shift */
    border-radius: 4px;
    background: #ffffff;
    color: #919191;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  /* Single view: give the pack-size buttons a visible grey border so they're not white-on-white
     (item 7). Bundle view (body.bb-bundle-active) keeps the original transparent style. */
  body:not(.bb-bundle-active) .bundle-builder__tier:not([aria-checked='true']) { border-color: #d9d9d9; }
  .bundle-builder__tier:hover { border-color: rgba(0, 0, 0, 0.3); }
  .bundle-builder__tier:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }
  .bundle-builder__tier[aria-checked='true'] {
    color: #000000;
    border: 2px solid #000000;
  }
  /* Wiggle the next pack up after a complete pack is added to cart (item 10). */
  @keyframes bb-tier-wiggle {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-4deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-3deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
  }
  .bundle-builder__tier--wiggle { animation: bb-tier-wiggle 0.6s ease-in-out 2; }
  @media (prefers-reduced-motion: reduce) { .bundle-builder__tier--wiggle { animation: none; } }
  .bundle-builder__tier-label { font-weight: 700; font-size: 16.5px; line-height: 1; text-transform: uppercase; }
  /* Yellow square % OFF chip overlapping the top edge. */
  .bundle-builder__tier-discount {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: #f2ff00;
    color: #000000;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
  }
  /* Yellow full-width bar across the tile bottom. */
  .bundle-builder__tier-free {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f2ff00;
    color: #000000;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.25rem 0.2rem;
    text-align: center;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  /* Per-print line inside each tier button (A/B variant arm — see the markup comment above the
     tiers). `.bundle-builder__price-per-print` is the single stable hook Visually hides for the
     control arm: it sits on every one of these lines, and all of the line's spacing (the
     margin-top) lives on the line itself, so hiding it returns the buttons to exactly main's
     single-label layout. No colour is set — the line inherits the button's grey/black
     selected-state colour like the label does. */
  /* Footnote for the per-print asterisk, appended under the details accordion by
     _initPppFootnote() (bundle-builder.js). Carries .bundle-builder__price-per-print, so the
     A/B control arm drops it together with the in-button lines. */
  .bundle-builder__ppp-footnote {
    margin: 8px 0 0;
    /* Air below the footnote. PADDING, not margin: this <p> ends up the last child of the buy
       column, and base.css zeroes margin-bottom on last-child paragraphs with a
       higher-specificity :last-child:is(p, ...) rule — a bottom margin here silently loses. */
    padding-bottom: 16px;
    font-size: 13px;
    line-height: 1.4;
    color: #6a6a6a;
  }
  .bundle-builder__tier-ppp {
    margin-top: 4px;
    /* Breathing room between this line and the yellow "+X free prints" bar overlaying the
       button's bottom edge. Lives here, not on the button, so the control arm is unaffected.
       The variant button's height is content-driven (content + padding exceed the 77px
       min-height), so this margin and the button's padding-bottom both count in full below
       the text. */
    margin-bottom: 10px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* Price block (above the pack selector). */
  .bundle-builder__price {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0px;
  }
  .bundle-builder__price[hidden] { display: none; } /* respect the hidden attr (Single mode) */
  /* Tighter gap between the price and the "① Choose Your Pack Size" heading. */
  .bundle-builder__price + .bundle-builder__section-heading { margin-top: 0.6rem; }
  .bundle-builder__price-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000000;
    background: #f2ff00;
    padding: 0.2rem 0.5rem;
  }
  .bundle-builder__save-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #000000;
    cursor: pointer;
  }
  .bundle-builder__save-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    background: #ffffff;
    color: #121212;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.4;
    text-align: left;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    display: none;
    z-index: 30;
  }
  /* Downward tail pointing at the badge (matches the example bubble). */
  .bundle-builder__save-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-top-color: #ffffff;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.08));
  }
  .bundle-builder__save-info:hover .bundle-builder__save-tip,
  .bundle-builder__save-info:focus .bundle-builder__save-tip,
  .bundle-builder__save-info.is-open .bundle-builder__save-tip { display: block; }
  /* Mobile: the SAVE badge sits near the right edge, so a centre-anchored 230px tip ran off the
     right of the screen. Right-anchor it to the badge and clamp to the viewport (mobile review #5). */
  @media screen and (max-width: 749px) {
        .quick-add-modal__content .mrk-quickview-cta {
        border-top: 1px solid #000;
        padding: 9px 20px 16px 20px;
                margin-inline: unset !important;
                        bottom: 0px !important;
    }
    .quick-add-modal__content .group-block.group-block--height-fit.group-block--width-fill.border-style.spacing-style.size-style.pdp-header {
    padding: 0px 20px;
}
.quick-add-modal__content frame-variant-picker.variant-picker.spacing-style.variant-picker--left {
    padding: 0px 20px;
}
    .bundle-builder__save-tip {
      left: auto;
      right: 0;
      transform: none;
      width: max-content;
      max-width: min(230px, calc(100vw - 32px));
    }
    .bundle-builder__save-tip::after {
      left: auto;
      right: 18px;
      transform: none;
    }
    dialog.quick-add-modal.dialog-modal.color-scheme-1.quick-add-modal {
    border-radius: 17px 17px 0px 0px;
}
  }
  .bundle-builder__price-from {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
  }
  .bundle-builder__price-from[hidden] { display: none; }
  .bundle-builder__price-compare {
    text-decoration: line-through;
    color: #a5a5a5;
    font-size: 18px;
    font-weight: 700;
  }
  .bundle-builder__price-sale {
    font-weight: 700;
    font-size: 18px;
    color: #000000;
  }

  /* ---- Slots (white cards on grey) ---- */
  .bundle-builder__bundle { margin-top: 0.5rem; }
  .bundle-builder__slots {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem; /* breathing room below the slots before Material */
  }
  .bundle-builder__slot {
    /* Positioning context for the top-right badge container and the remove "×" (previously only
       set on the --incart / --free variants, which is why those already pinned correctly). */
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 11px;
    border-radius: 6px;
    background: #fff;
  }
  /* Empty slot = plain white card, no border (Figma node 91:996). */
  .bundle-builder__slot--empty {
    border: none;
    align-items: center; /* vertically centre the "Empty slot / Add artwork…" copy (item 4) */
  }
  /* Free print slot = faint theme-yellow tint + bright-yellow border (Figma 257:10064/11069). */
  .bundle-builder__slot--free {
    background: rgba(242, 255, 0, 0.14);
    border: 1.5px solid #f2ff00;
  }
  .bundle-builder__slot-thumb--ghost { background: transparent; border: none; } /* empty free slot: no visible thumb */
  .bundle-builder__slot-media { position: relative; flex: 0 0 auto; }
  .bundle-builder__slot-thumb {
    position: relative;
    box-sizing: border-box;
    width: 83px;
    height: 113px;
    border-radius: 0.3rem;
    background: rgba(18, 18, 18, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(18, 18, 18, 0.4);
    font-size: 1.5rem;
    overflow: hidden;
  }
  .bundle-builder__slot-art {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
        padding: 5px;
  }
  .bundle-builder__slot-thumb.bb-frame--none { border: none; background: #ffffff00 }
  /* Dynamic frame — same compositing as the live PDP: raw art padded by the frame inset
     widths + frame PNG overlay (contain), box height auto so nothing is distorted. */
  .bundle-builder__slot-thumb.is-framed {
    width: 85px;
    height: auto;
    background: transparent;
    overflow: visible;
    border: none;
    display: block;
  }
  .bundle-builder__slot-thumb.is-framed .bb-frame-overlay-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .bundle-builder__slot-thumb.is-framed .bb-frame-overlay {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
  .bundle-builder__slot-thumb.is-framed .bb-frame-media { padding: var(--tb, 0) var(--lr, 0); }
  .bundle-builder__slot-thumb.is-framed .bb-frame-art { display: block; width: 100%; height: auto; }
  .bundle-builder__slot-thumb--empty {
    border: 1px dashed rgba(18, 18, 18, 0.3);
    background: transparent;
  }
  /* Empty PAID-slot subtitle ("Add artwork to unlock X% off + N free prints") in black, not the
     grey used for the artist byline (feedback #21). */
  .bundle-builder__slot-main--empty .bundle-builder__slot-artist { color: #121212; }
  /* Mobile empty-slot placeholder reads "+ADD" (feedback #20) — sized to fit the 85px thumb. */
  .bundle-builder__slot-thumb-plus { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; }
  /* Desktop: drop the "+ADD" placeholder inside an empty slot thumb; keep the dashed box (feedback #22). */
  @media screen and (min-width: 750px) {
    div#quick-add-modal-content {
    padding: 25px !important;
}
dialog.quick-add-modal.dialog-modal.color-scheme-1 {
    max-width: 900px !important;
}
    .bundle-builder__slot-thumb--empty span { display: none; }
  }
  .bundle-builder__slot-remove {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    z-index: 3; /* above the frame overlay (z-index 1) */
    width: 21px;
    height: 21px;
    border: none;
    border-radius: 999px;
    background: #000000;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .bundle-builder__slot-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem; /* tighter artist → Size spacing (Figma) */
  }
  .bundle-builder__slot-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
  }
  .bundle-builder__slot-titles { min-width: 0; }
  .bundle-builder__slot-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #000;
  }
  .bundle-builder__slot-title--empty { font-weight: 700; color: #000000; }
  .bundle-builder__slot-artist {
    display: block;
    font-size: 11px;
    color: #acacac;
    margin-top: 0.15rem;
  }
  /* Red italic nudge in an empty free slot when the shopper has surplus paid prints that could be
     free (feedback 5): "Add a medium-sized (A3) print to unlock your free print". */
  .bundle-builder__free-nudge {
    color: #c0182b;
    font-style: italic;
    font-size: 12px;
    line-height: 1.3;
    margin-top: 0.4rem;
  }
  /* The nudge's "?" tooltip icon is red to match the message (feedback). Scoped under the nudge to
     out-specify the base .bundle-builder__tip grey. */
  .bundle-builder__free-nudge .bundle-builder__free-nudge-tip { color: #c0182b; }
  .bundle-builder__free-nudge .bundle-builder__free-nudge-tip:hover { color: #8f1220; }
  /* "In cart" pill — a print already sitting in the shopper's cart. */
  .bundle-builder__slot-incart {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.3rem;
    padding: 0.1rem 0.4rem;
    background: #eef7ee;
    border: 1px solid #cfe6cf;
    border-radius: 999px;
    color: #1f7a34;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.4;
  }
  .bundle-builder__slot-price {
     flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: .35rem;
    white-space: nowrap;
  }
  /* Free slot: price on top, "Free Medium Print" badge beneath, right-aligned (Figma 257:11069). */
  .bundle-builder__slot-price--free { flex-direction: column; align-items: flex-end; gap: 0.3rem; }
  .bundle-builder__slot-price-line { display: flex; align-items: baseline; gap: 0.35rem; }
  /* "Discount applies to X pack" caveat — now inline on the artist line (item 5). */
  .bundle-builder__slot-price-note { font-size: 11px; font-style: italic; color: #939393; white-space: nowrap; text-align: right; }
  /* Right side of the artist line: caveat + "In cart" badge sit together (caveat to the left). */
  /* Right side of the artist line. Can hold up to three things at once (discount note +
     "EXTRA X% OFF" + "In cart"), so it wraps and stays right-aligned instead of squeezing the
     artist name or overflowing the card on mobile. */
  .bundle-builder__slot-artistline-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.35rem 0.5rem; flex: 0 1 auto; min-width: 0; }
  .bundle-builder__slot-price-compare {
    text-decoration: line-through;
    color: #939393;
    font-size: 14px;
  }
  .bundle-builder__slot-price-final { font-weight: 700; font-size: 14px; color: #000000; }
  /* Per-slot Size + Framing dropdowns */
  .bundle-builder__slot-options { display: flex; gap: 0.6rem; }
  .bundle-builder__field {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .bundle-builder__field-label { font-size: 12px; font-weight: 700; color: #000000; }
  .bundle-builder__select {
    width: 100%;
    height: 32px;
    padding: 0px 6px;
    border: 1px solid #000000;
    border-radius: 3px;
    background-color: #fff;
    font-size: 11px;
    color: #000;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>);
    background-repeat: no-repeat;
    background-position: right .6rem center;
  }
  /* Keep the border a consistent 1px when focused/active — the theme's focus ring made it
     look like a thick border after interacting (item 14). */
  .bundle-builder__select:focus,
  .bundle-builder__select:focus-visible {
    border: 1px solid #000000 !important;
    box-shadow: none !important;
    outline: 1px solid rgba(0, 0, 0, 0.35);
    outline-offset: 1px;
  }
  /* Free-slot selectors: shown but inactive (size fixed by ratio). Grey the label + select
     DIRECTLY rather than fading the whole field with opacity — the old opacity also faded the
     tooltip bubble nested inside, making its copy unreadable (feedback 4). */
  .bundle-builder__field.is-disabled .bundle-builder__field-label { color: rgba(18, 18, 18, 0.5); }
  .bundle-builder__select:disabled { background-color: #f4f4f4; color: rgba(18, 18, 18, 0.55); cursor: not-allowed; background-image: none; } /* no chevron — the "?" tip sits here (item 10) */
  /* Custom paid-slot price dropdown (Figma 368-2418, item GB) — per-option price + frame swatch. */
  .bundle-builder__price-select { position: relative; }
  .bundle-builder__select--price {
    display: flex;
    align-items: center;
    text-align: left;
    font-family: inherit;
    font-weight: 400;
  }
  .bundle-builder__price-select-val {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bundle-builder__price-select.is-open .bundle-builder__select--price {
    border: 1px solid #000;
    /* Chevron flips to point UP while the menu is open. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 15l-6-6-6 6'/></svg>");
  }
  .bundle-builder__price-menu {
display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: 80vw;
    z-index: 30;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 23px 20px #0000004d;
    padding: 5px 0px;
    max-height: 260px;
    overflow-y: auto;
  }
  /* The right-hand (Framing) field opens its menu leftward so it stays on-screen (feedback 6). */
  .bundle-builder__slot-options > .bundle-builder__field--price:last-child .bundle-builder__price-menu {
    left: auto;
    right: 0;
  }
  .bundle-builder__price-select.is-open .bundle-builder__price-menu { display: block; }
  .bundle-builder__price-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: none;
    padding: 8px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.4;
    color: #000;
    text-align: left;
  }
  .bundle-builder__price-opt:hover { background: #f4f4f4; }
  .bundle-builder__price-opt.is-selected { background: #f0f0f0; }
  /* A frame option with no variant at the selected size (e.g. A0 ships unframed only):
     crossed out + disabled, mirroring the PDP's strikethrough swatches. */
  .bundle-builder__price-opt.wd-bb-unavailable { opacity: 0.45; cursor: not-allowed; }
  .bundle-builder__price-opt.wd-bb-unavailable:hover { background: none; }
  .bundle-builder__price-opt.wd-bb-unavailable .bundle-builder__price-opt-name { text-decoration: line-through; }
  .bundle-builder__price-opt-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  .bundle-builder__price-opt-price { flex: 0 0 auto; white-space: nowrap; margin-left: 16px; }
  .bundle-builder__price-opt-price s { color: #9b9b9b; margin-right: 4px; }
  .bundle-builder__frame-swatch {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: #ccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
  .bundle-builder__frame-swatch.is-none { background: transparent; border: 1px dashed #c4c4c4; }
  .bundle-builder__frame-swatch--img { object-fit: cover; background: none; }
  .bundle-builder__slot-freerow { display: flex; }
  /* "Free Medium Print" badge — yellow, mixed-case, sits on the artist line (Figma 257:11093). */
  .bundle-builder__free-badge {
    display: inline-flex;
    align-items: center;
    background: #f2ff00;
    color: #121212;
    font-size: 11px;
    font-weight: 700;
    padding: 0.12rem 0.4rem;
    border-radius: 0px;
    white-space: nowrap;
  }
  /* Artist name (left) + badges (right-aligned, like the price). Pulled up under the title
     (item 18 — the title/price row already sits close, so drop the extra gap above). */
  .bundle-builder__slot-artistline { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: -0.3rem; }
  .bundle-builder__slot-artistline .bundle-builder__slot-artist { margin-top: 0; }
  .bundle-builder__slot-badges { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
  /* "In cart" badge = same shape as the free badge, black bg / white text (item 2). */
  .bundle-builder__free-badge--incart { background: #000000; color: #ffffff; }
  /* Flash-sale badge = same shape as the free badge, red bg / white text. */
  /* Tighter vertically than the other badges (0.12rem -> 0.02rem, ~2px off each side): the sale
     badge is the only one that carries a number, so it reads as chunkier at the same metrics.
     Horizontal padding and the radius stay on the shared base so the shape still matches.
     NB this makes it shorter than the "In cart" badge it can sit beside — see the container rule
     below; they're centre-aligned, so they stay visually balanced rather than mismatched. */
  .bundle-builder__free-badge--sale {
background: #fb001e;
    color: #fff;
    padding-top: .02rem;
    padding-bottom: .02rem;
    border-radius: 0px;
  }
  /* In-cart slot treatment (option D): "In cart" badge on the top-RIGHT border + a tick, so it's
     obvious at a glance. Paid slots also get a light-grey card; free slots keep their yellow tint. */
  .bundle-builder__slot--incart { position: relative; }
  .bundle-builder__slot--incart:not(.bundle-builder__slot--free) {
    background: #f2f2f2;
    border: 0.5px solid rgba(18, 18, 18, 0.18);
  }
  /* "In cart" badge shape (both slot types). Padding/radius deliberately NOT overridden here any
     more: they used to make this badge 23.3px tall against the 21.4px of every other badge, so
     when two sat side by side (e.g. "EXTRA X% OFF" + "In cart") their heights didn't line up.
     All badges now share the base metrics; only the letter-spacing and the tick are specific. */
  .bundle-builder__slot--incart .bundle-builder__free-badge--incart {
    letter-spacing: 0.03em;
  }
  .bundle-builder__slot--incart .bundle-builder__free-badge--incart::before {
    content: '✓';
    margin-right: 4px;
  }
  /* PAID slots: the badge container ("EXTRA X% OFF" and/or "In cart") pins to the top-right
     border — the same treatment free slots get, so a sale badge reads identically on both slot
     types. The container is only rendered when it has a badge in it, so an ordinary paid slot is
     unaffected. Positioning the CONTAINER (not the individual badge) is what lets the two sit
     side by side when a print is on sale AND in the cart. */
  .bundle-builder__slot:not(.bundle-builder__slot--free) .bundle-builder__slot-badges {
    position: absolute;
    top: -9px;
    right: 12px;
    z-index: 3;
    align-items: center;
  }
  /* FREE slots: the "Free Medium Print" badge (and, when in the cart, the "In cart" badge) pin at
     the top-right border — in ALL states incl. empty (feedback 3). When both show, "In cart" is
     rightmost and "Free Medium Print" just left of it. */
  .bundle-builder__slot--free { position: relative; }
  .bundle-builder__slot--free .bundle-builder__slot-badges {
    position: absolute;
    top: -9px;
    right: 12px;
    z-index: 3;
    align-items: center;
  }
  /* "?" tooltip icon next to Size / Framing (opens the size / frame chart, or shows copy). */
  .bundle-builder__tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    margin-left: 0.2rem;
    color: rgba(18, 18, 18, 0.55);
    cursor: pointer;
    vertical-align: middle;
  }
  /* Free-slot tooltip lives inside the disabled dropdown, at the right edge (item 10). */
  .bundle-builder__field-control { position: relative; display: block; }
  .bundle-builder__tip--in-field {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
  }
  .bundle-builder__tip:hover { color: #000000; }
  .bundle-builder__tip-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #121212;
    border: 1px solid rgba(18, 18, 18, 0.12);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    width: max-content;
    max-width: 180px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    display: none; /* not just hidden — the laid-out absolute bubble overflowed the page on mobile
                      (fields near the right edge pushed it ~90px past the viewport). It's portaled +
                      shown by _positionTip (display:block) on open, so display:none while closed is safe. */
    transition: opacity 0.12s ease;
    z-index: 100000; /* forefront — above the print-selector drawer + sticky header (feedback 4) */
  }
  /* Slots / fields must not clip an open tooltip bubble (item 17b). */
  .bundle-builder__slot,
  .bundle-builder__slot-main,
  .bundle-builder__field,
  .bundle-builder__field-control { overflow: visible; }
  /* Click/tap only (no :hover) so the SAME JS positioner — viewport-clamped, arrow aimed at the
     icon — runs on every device and the pincer always meets the "?" (feedback 2-5). */
  .bundle-builder__tip.is-open .bundle-builder__tip-bubble { opacity: 1; visibility: visible; }
  /* When a tooltip is open, lift its whole ancestor chain (field → options row → slot) to a
     very high z-index so the bubble sits ON TOP of everything — neighbouring dropdowns, the
     print-selector drawer, the sticky header. A low lift left it hidden behind them (feedback 4). */
  .bundle-builder__field:has(.bundle-builder__tip:hover),
  .bundle-builder__field:has(.bundle-builder__tip.is-open) { position: relative; z-index: 100000; }
  .bundle-builder__slot-options:has(.bundle-builder__tip:hover),
  .bundle-builder__slot-options:has(.bundle-builder__tip.is-open) { position: relative; z-index: 100000; }
  .bundle-builder__slot:has(.bundle-builder__tip:hover),
  .bundle-builder__slot:has(.bundle-builder__tip.is-open) { position: relative; z-index: 100000; }
  .bundle-builder__tip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #ffffff;
  }
  /* When the bubble is JS-positioned (fixed) the arrow is aimed at the "?" icon via --tip-arrow-x
     so the pincer meets the icon exactly (feedback 5). is-below flips it to point up. */
  .bundle-builder__tip-bubble.is-fixed::after {
    left: var(--tip-arrow-x, 50%);
    right: auto;
    transform: translateX(-50%);
    top: 100%;
    bottom: auto;
    border-top-color: #ffffff;
    border-bottom-color: transparent;
  }
  .bundle-builder__tip-bubble.is-fixed.is-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #ffffff;
  }
  /* "+ Build Bigger Pack" prompt shown when a fixed pack is full (Figma 257:9570). */
  .bundle-builder__build-bigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1.5px dashed rgba(18, 18, 18, 0.3);
    border-radius: 6px;
    background: none;
    cursor: pointer;
  }
  .bundle-builder__build-bigger-title { font-weight: 700; font-size: 14px; color: #000000; }
  .bundle-builder__build-bigger-sub { font-size: 12px; color: #9b9b9b; }
  .bundle-builder__build-bigger:hover { border-color: rgba(18, 18, 18, 0.55); }
  /* "Add Artwork" link is MOBILE-ONLY (desktop keeps the original "Empty Slot" head). */
  .bundle-builder__slot-add {
    display: none;
    font-weight: 700;
    font-size: 15px;
    color: #000000;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }
  /* "Material: …" line on a filled slot. */
  .bundle-builder__slot-material {
    display: block;
    font-size: 12px;
    color: #6b6b6b;
  }
  /* + add-slot button isn't part of the Figma — pack size defines the slots. */
  .bundle-builder__add-slot { display: none; }

  /* ---- Framing service (item PDP-1, Figma 257-9473) — white card ---- */
  .bundle-builder__framing { margin: 1rem 0 0.25rem; background: #ffffff; border-radius: 8px; padding: 1rem 1.1rem; }
  .bundle-builder__framing-heading { font-size: 15px; font-weight: 700; color: #000; margin: 0 0 0.25rem; }
  .bundle-builder__framing-desc { font-size: 13px; color: #4a4a4a; margin: 0 0 0.6rem; line-height: 1.4; }
  .bundle-builder__framing-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 14px; color: #000; }
  .bundle-builder__framing-check { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #000; }
  /* Tooltip (mirrors the SAVE tooltip pattern). */
  .bundle-builder__framing-info { position: relative; display: inline-flex; align-items: center; color: #6b6b6b; cursor: pointer; }
  .bundle-builder__framing-info svg { width: 15px; height: 15px; }
  .bundle-builder__framing-tip {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 220px; background: #000; color: #fff; font-size: 12px; line-height: 1.4; font-weight: 400;
    padding: 8px 10px; border-radius: 6px; z-index: 20; white-space: normal; text-align: left;
  }
  .bundle-builder__framing-info:hover .bundle-builder__framing-tip,
  .bundle-builder__framing-info:focus .bundle-builder__framing-tip,
  .bundle-builder__framing-info.is-open .bundle-builder__framing-tip { display: block; }

  /* ---- Material — native-style swatch tiles ---- */
  .bundle-builder__material-options {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
  }
  .bundle-builder__material-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: rgba(18, 18, 18, 0.5);
  }
  .bundle-builder__material-swatch {
    width: 125px;
    height: 55px;
    border-radius: 2px;
    border: 1.5px solid #cecece;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
  }
  .bundle-builder__material-option { color: #9b9b9b; }
  .bundle-builder__material-option[aria-checked='true'] { color: #000000; }
  .bundle-builder__material-option[aria-checked='true'] .bundle-builder__material-swatch {
    border: 1.5px solid #000000;
  }
  .bundle-builder__material-name { font-size: 11px; font-weight: 700; }
  /* Canvas upgrade price (item 7) — grey, 11px, uppercase (Figma 257-9962). Tight under the
     label (the option's 0.4rem column gap is countered so the price hugs "Canvas", item 5). */
  .bundle-builder__material-price { font-size: 11px; color: #9b9b9b; text-transform: uppercase; margin-top: -0.3rem; }
  .bundle-builder__material-price-was { text-decoration: line-through; color: #9b9b9b; margin-left: 0.25rem; }
  /* Canvas unavailable (item 13): greyed tile + "?" tooltip next to the label. */
  .bundle-builder__material-option--disabled { cursor: not-allowed; }
  .bundle-builder__material-option--disabled .bundle-builder__material-swatch { opacity: 0.45; filter: grayscale(1); border-color: #d9d9d9 !important; }
  .bundle-builder__material-option--disabled .bundle-builder__material-badge { opacity: 0.45; }
  /* Canvas-unavailable tooltip uses the STANDARD .bundle-builder__tip design (item G10). */
  .bundle-builder__material-tip-icon { margin-left: 0.25rem; }
  /* Product tier badges (Premium / Popular / Best value) are BLACK — yellow is reserved
     for bundle-offer content. Applies on both the single PDP and bundle mode. */
  .bundle-builder__material-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%); /* centred on the tile (item 5), like the frame badge */
    background: #000000;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.45rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .mrk-frame-badge {
    background: #000000 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 3px 6px !important;
  }
  /* ---- ATC ---- */
  .bundle-builder__atc {
    margin-top: 1.5rem;
    width: 100%;
    min-height: 52px;
    padding: 0.9rem 1rem;
    border: none;
    border-radius: 999px;
    background: #000000;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  /* Hover turns the CTA yellow with black text — matches the site's native ATC hover. */
  .bundle-builder__atc:not([disabled]):hover { background: #f2ff00; color: #000000; }
  .bundle-builder__atc:not([disabled]):hover .bundle-builder__atc-compare { color: #6b6b6b; }
  .bundle-builder__atc[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .bundle-builder__atc-compare {
    color: #939393;
    text-decoration: line-through;
    margin-left: 0.1rem;
  }

  /* Sticky add-to-cart on BOTH single and bundle views, desktop AND mobile (feedback item 15 — the
     CTA should stay reachable on every breakpoint). Single view uses the native buy-buttons; bundle
     view uses the bundle ATC. Pinned near the bottom of the viewport. Ancestors use box-shadow /
     clip-path (not overflow), so sticky still references the page scroll. */
  body.bb-single-active .buy-buttons-block,
  body.bb-bundle-active .bundle-builder__atc {
    position: sticky;
    bottom: 16px;
    z-index: 6;
        margin-bottom: 13px;
  }

  /* ---- Bundle mode: hide the native single-product UI on desktop ---- */
  @media screen and (min-width: 750px) {
    /* Bundle mode: 55% left (print selector) / 45% right (options), keeping the outer gutters. */
    body.bb-bundle-active .product-information__grid:not(#quick-add-dialog *) {
      grid-template-columns: 40px minmax(0, 55fr) minmax(0, 45fr) 40px !important;
    }
    /* Single view: SAME 55/45 split + grey right panel as the bundle view (single feedback 1/2). */
    body.bb-single-active .product-information__grid:not(#quick-add-dialog *) {
      grid-template-columns: 40px minmax(0, 55fr) minmax(0, 45fr) 40px !important;
    }
    body.bb-single-active .product-details:not(#quick-add-dialog *) {
      background: rgb(240, 240, 240);
      box-shadow: 0 0 0 100vmax rgb(240, 240, 240);
      clip-path: inset(-160px -100vmax 0 0);
    }
    body.bb-bundle-active .product-information__media media-gallery:not(#quick-add-dialog *) { display: none !important; }
    body.bb-bundle-active variant-picker:not(#quick-add-dialog *),
    body.bb-bundle-active frame-variant-picker:not(#quick-add-dialog *),
    body.bb-bundle-active .buy-buttons-block:not(#quick-add-dialog *),
    body.bb-bundle-active product-price:not(#quick-add-dialog *) { display: none !important; }
    /* Soft shadow along the bottom of the left panel, to break it from content below. Bleed it
       past the panel (into the outer gutter on the left and the column gap on the right) so it
       reaches the full width of the white left region — not just the tile grid (PLP feedback 2). */
    body.bb-bundle-active .bundle-print-selector::after {
      content: '';
      position: absolute;
      left: -40px;
      right: -40px;
      bottom: -1px;
      height: 24px;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12));
    }
  }

  /* Single-view white card wrapping Material + Size/Frame (Figma 376-5859, ~6px radius, white
     on the grey right panel). Hidden in bundle mode (the pack has its own ③ material selector). */
  .bundle-builder__single-card {
    background: #ffffff;
    border-radius: 5px;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;
  }
  /* Mobile: no white card — the material/size/frame selectors sit flush with the page rather than
     indented inside a padded card (mobile review #2 / H2). */
  @media screen and (max-width: 749px) {
    .bundle-builder__single-card {
        background: none;
        border-radius: 0;
        padding: 0;
        margin: 0px;
    }
  }
  body.bb-bundle-active .bundle-builder__single-card { display: none; }
  /* Numbered section titles inside the single-view card (feedback 2) — match the bundle headings. */
  .bundle-builder__single-card .bundle-builder__card-heading {
    display: flex;
    align-items: center;
    gap: .3rem;
    float: none;
    width: 100%;
    padding: 0;
margin: 0px;
    font-size: 14px;
    font-weight: 700;
    color: #000;
    text-transform: none;
    letter-spacing: 0;
  }
  /* The native "Frame" legend appends the selected value (e.g. "Unframed"); hide it in the
     heading so it reads cleanly as "Choose Your Frame" (feedback 2). */
  .bundle-builder__single-card .bundle-builder__card-heading .variant-option__swatch-value { display: none; }
  /* Space the three selectors apart within the card. */
  .bundle-builder__single-card > * + * { margin-top: 0px; }
  /* +5px extra between the Material component and the Size component (feedback 2). */
  .bundle-builder__single-card frame-variant-picker { margin-top: calc(1.1rem + 5px); }
  /* Size Chart + About Frames links: black font, single line (feedback 3/4). Must out-specify the
     native rule `button.button.button-unstyled.popup-link__button {color:grey!important}` (0,5,1),
     so we match the same classes plus the card scope (0,5,2) and also override text-fill-color. */
  body.bb-single-active .bundle-builder__single-card button.button.button-unstyled.popup-link__button {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    white-space: nowrap;
    overflow: visible;      /* native button clips at a narrow width; let the one-line text show */
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }
  /* Don't let the size-chart link's wrapper shrink and clip it either. */
  body.bb-single-active .bundle-builder__single-card .popup-link { flex: 0 0 auto; }
  /* The About Frames "?" icon must be black too (feedback 3). */
  body.bb-single-active .bundle-builder__single-card .popup-link .mrk-popup-icon,
  body.bb-single-active .bundle-builder__single-card .popup-link .mrk-popup-icon * {
    color: #000000 !important;
    fill: #000000 !important;
  }
  /* "?" trigger added next to "Size chart" — matches the About Frames affordance (feedback 3). */
  .bundle-builder__sizechart-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    margin-left: 0.3rem;
    color: #000000;
    cursor: pointer;
    vertical-align: middle;
  }
  .bundle-builder__sizechart-tip svg { width: 15px; height: 15px; }

  /* ---- Print Selector (injected into the left media column) ---- */
  .bundle-print-selector {
    display: none;
    flex-direction: column;
    gap: 0.45rem;
    position: sticky;
    top: var(--header-group-height, 1rem);
    max-height: calc(100vh - var(--header-group-height, 0px) - 2rem);
  }
  .bundle-print-selector__top { margin-top: 0px; margin-bottom: 0.3rem; } /* more above header, less below */
  body.bb-bundle-active .bundle-print-selector { display: flex; }
  .bundle-print-selector__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .bundle-print-selector__close { display: none; } /* mobile-only */
  .bundle-print-selector__title { display: none; } /* mobile-only "2. Choose Your Product" (item 17c) */
  .bundle-print-selector__progress { display: none; } /* mobile-only (bundle progress dropdown) */
  .bundle-builder__browse { display: none; } /* mobile-only trigger */
  /* "Select your prints — X of X selected" counter removed (item 16). The yellow mobile
     progress toggle keeps the count; this plain header is hidden on all viewports. */
  .bundle-print-selector__header { display: none; }
  /* ---- Controls row: scrollable pills + scroll arrow + layout toggle ---- */
  .bundle-print-selector__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  /* The pill row is moved via a transform (JS), not native scroll — native scrollLeft
     proved unreliable here. Clip the overflow so translated pills are hidden cleanly. */
  .bundle-print-selector__scroller {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .bundle-print-selector__row {
    display: flex;
    gap: 0.4rem;
    width: max-content;
    transition: transform 0.25s ease;
    will-change: transform;
  }
  .bundle-print-selector__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(18, 18, 18, 0.25);
    border-radius: 999px;
    background: rgb(255, 255, 255);
    padding: 0.4rem 0.85rem;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    color: rgb(18, 18, 18);
  }
  .bundle-print-selector__pill:hover { border-color: rgba(18, 18, 18, 0.55); }
  .bundle-print-selector__quick[aria-pressed='true'] {
    background: rgb(18, 18, 18);
    color: rgb(255, 255, 255);
    border-color: rgb(18, 18, 18);
  }
  .bundle-print-selector__facet { position: relative; }
  .bundle-print-selector__facet-btn.is-active {
    border-color: rgb(18, 18, 18); /* indicate active via border only — keep size/weight constant */
  }
  .bundle-print-selector__facet-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }
  .bundle-print-selector__caret {
    display: inline-flex;
    transition: transform 0.15s ease;
    color: rgba(18, 18, 18, 0.6);
  }
  .bundle-print-selector__facet-btn[aria-expanded='true'] .bundle-print-selector__caret { transform: rotate(180deg); }
  /* Facet dropdown panel */
  .bundle-print-selector__dropdown {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 12rem;
    max-height: 16rem;
    overflow-y: auto;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(18, 18, 18, 0.18);
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(18, 18, 18, 0.14);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
  }
  .bundle-print-selector__opt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
  }
  .bundle-print-selector__opt:hover { background: rgba(18, 18, 18, 0.05); }
  .bundle-print-selector__opt input { accent-color: rgb(18, 18, 18); cursor: pointer; }
  .bundle-print-selector__swatch {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(18, 18, 18, 0.25);
    flex: 0 0 auto;
  }
  /* Round black scroll arrows (prev sits left of the pills, next sits right) */
  .bundle-print-selector__scroll-next,
  .bundle-print-selector__scroll-prev {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 999px;
    background: rgb(18, 18, 18);
    color: rgb(255, 255, 255);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .bundle-print-selector__scroll-next[hidden],
  .bundle-print-selector__scroll-prev[hidden] { display: none; }
  /* Layout toggle (2 / 4 per row) */
  .bundle-print-selector__layout {
    flex: 0 0 auto;
    display: inline-flex;
    border: 1px solid rgba(18, 18, 18, 0.2);
    border-radius: 0.55rem;
    overflow: hidden;
  }
  .bundle-print-selector__layout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.9rem;
    border: none;
    background: rgb(255, 255, 255);
    color: rgba(18, 18, 18, 0.45);
    cursor: pointer;
  }
  .bundle-print-selector__layout-btn[aria-pressed='true'] {
    background: rgb(18, 18, 18);
    color: rgb(255, 255, 255);
  }
  .bundle-print-selector__search {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    font-size: 0.85rem;
  }
  /* ---- Results grid (2 or 4 per row via [data-cols]) ---- */
  .bundle-print-selector__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap: 0.9rem;
    overflow-y: auto;
    padding-right: 0.25rem;
    padding-bottom: 1rem;
  }
.bundle-print-selector[data-cols='2'] .bundle-print-selector__expand {
    right: 15px;
    bottom: 25px;
}
  .bundle-print-selector[data-cols='2'] .bundle-print-selector__grid { grid-template-columns: repeat(2, 1fr); }
  .bundle-print-selector[data-cols='4'] .bundle-print-selector__grid { grid-template-columns: repeat(4, 1fr); gap: 0.65rem; }
  .bundle-print-selector__card {
    display: flex;
    flex-direction: column;
    height: 100%; /* fill the grid cell so every ADD button lines up */
    text-align: center;
  }
  /* Uniform fixed-height image box — smaller/landscape prints are centered with
     letterbox whitespace so all rows are the same height (ADD buttons align). */
  .bundle-print-selector__card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bundle-print-selector__card-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* fill the box (scales small thumbs UP too), never crop */
    border-radius: 0.3rem;
    display: block;
  }
  /* Added → dim the tile under a translucent white veil (Figma node 101:5805) */
  .bundle-print-selector__card[data-added='true'] .bundle-print-selector__card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0.3rem;
    pointer-events: none;
  }
  /* Flash-sale badge, top-left of the image. z-index clears the "added" white wash so the
     badge stays legible on a print that's already in the bundle. */
  .bundle-print-selector__sale-badge {
    position: absolute;
    left: 2px;
    top: 12px;
    z-index: 2;
    padding: 2px 5px;
    border-radius: 0px;
    background: #fb001e;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
  }
  /* Expand (eye) control, bottom-right of the image */
  .bundle-print-selector__expand {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    width: 1.7rem;
    height: 1.7rem;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: rgb(18, 18, 18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(18, 18, 18, 0.25);
    z-index: 2;
  }
  .bundle-print-selector__card-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .bundle-print-selector__card-artist {
    font-size: 12px;
    font-weight: 400;
    color: rgba(18, 18, 18, 0.55);
    margin-top: 0.05rem;
    text-align: center;
        margin-bottom: 7px;
            text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  span.bundle-print-selector__add-added {
    text-transform: uppercase;
}
  /* + ADD = black pill, full tile width (Figma) */
  .bundle-print-selector__add {
    margin-top: auto; /* push to card bottom so every button aligns */
    border: 1px solid rgb(18, 18, 18);
    background: rgb(18, 18, 18);
    color: rgb(255, 255, 255);
    border-radius: 999px;
    padding: 0.5rem;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
        margin: 0px 10px;
  }

  dialog.quick-add-modal.dialog-modal.color-scheme-1 h1 {
    font-size: 22px;
}

/* Strips the modal's own 24px top/right padding off the quick-view buy-box groups.
   Excludes the sale badge: it is a nested fit-content group that owns its 8px
   inline padding, so zeroing the right side left it off-centre in the pill
   (8px before "39%", 0 after "OFF") while the PDP stayed symmetric. */
dialog.quick-add-modal.dialog-modal.color-scheme-1 .size-style:not(.mrk-sale-badge-wrapper) {
    padding-top: 0px;
        padding-right: 0px;
}

  dialog.quick-add-modal.dialog-modal.color-scheme-1.quick-add-modal {
    min-height: auto;
}

legend.single-option-radio__label.mrk-frame-label.bundle-builder__card-heading {
    margin-bottom: 5px;
}

  .bundle-print-selector__add:hover { background: rgb(40, 40, 40); }
  .bundle-print-selector__add[data-added='true'] {
    background: rgb(255, 255, 255);
    color: rgba(18, 18, 18, 0.55);
    border-color: rgba(18, 18, 18, 0.25);
    cursor: pointer;
  }
  /* Added card: default shows "Added"; hover swaps to a black "Remove" button (item 3). */
  .bundle-print-selector__add-remove { display: none; }
  .bundle-print-selector__add[data-added='true']:hover {
    background: rgb(18, 18, 18);
    color: rgb(255, 255, 255);
    border-color: rgb(18, 18, 18);
  }
  .bundle-print-selector__add[data-added='true']:hover .bundle-print-selector__add-added { display: none; }
  .bundle-print-selector__add[data-added='true']:hover .bundle-print-selector__add-remove { display: inline; }
  .bundle-print-selector__empty,
  .bundle-print-selector__loading {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(18, 18, 18, 0.55);
    padding: 1.5rem 0;
  }

  /* ---- Product swatches (Single mode) ---- */
  .bundle-builder__swatches {
    /* Tighten the gap above the swatches so it matches the swatches→card gap (~15px) rather
       than the larger default below the pack-size selector (single-view feedback 1). */
    margin-top: 15px;
        margin-bottom: 10px;
  }
  .bundle-builder__swatch-tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x; /* horizontal swipe only — no accidental vertical drift (feedback 3) */
    overscroll-behavior-x: contain;
  }
  .bundle-builder__swatch-tabs-wrap .bundle-builder__swatch-tabs,.bundle-builder__swatch-row {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
  .bundle-builder__swatch-tabs::-webkit-scrollbar { display: none; }
  /* Desktop scroll arrows for the swatch TABS + ROW so no-trackpad users can page through them
     (item 13) — a black circle with a white chevron, matching the frame selector's arrows. */
  .bundle-builder__swatch-tabs-wrap { display: flex; align-items: center; }
  .bundle-builder__swatch-tabs-wrap .bundle-builder__swatch-tabs { flex: 1 1 auto; }
  .bundle-builder__swatch-tabs-arrow {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    margin-bottom: 4px;
  }
  .bundle-builder__swatch-tabs-arrow[hidden] { display: none; }
  .bundle-builder__swatch-tabs-arrow svg { width: 14px; height: 14px; }
  .bundle-builder__swatch-tabs-arrow--prev { margin-right: 4px; }
  .bundle-builder__swatch-tabs-arrow--next {right: -6px !important;
    position: relative !important; }
  .bundle-builder__swatch-row-wrap { position: relative; }
  .bundle-builder__swatch-row-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: #000000;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
  }
  .bundle-builder__swatch-row-arrow[hidden] { display: none; }
  .bundle-builder__swatch-row-arrow svg { width: 14px; height: 14px; }
  .bundle-builder__swatch-row-arrow--prev { left: -6px; }
  .bundle-builder__swatch-row-arrow--next { right: -6px; }
  .bundle-builder__swatch-tab {
    background: none;
    border: none;
    padding: 0.4rem 0;
    font-size: 0.82rem;
    color: rgba(18, 18, 18, 0.55);
    cursor: pointer;
    white-space: nowrap;
    padding: 7px 9px;
    border-radius: 3px 3px 0px 0px;
  }
  .bundle-builder__swatch-tab:hover { color: rgb(18, 18, 18); border-bottom-color: rgba(18, 18, 18, 0.35); } /* hover state (feedback #12) */
  .bundle-builder__swatch-tab[aria-selected='true'] {
    color: rgb(18, 18, 18);
    font-weight: 600;
    border-bottom-color: rgb(18, 18, 18);
    background: #fff;
  }
  .bundle-builder__swatch-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x; /* horizontal swipe only (feedback 3) */
    overscroll-behavior-x: contain;
      background: #fff;
    padding: 5px 11px;
        border-top: 1px solid rgba(18, 18, 18, 0.12);
            border-radius: 0px 0px 0px 5px;
  }
  .bundle-builder__swatch {
    flex: 0 0 auto;
    width: 64px;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    text-align: center;
  }
  .bundle-builder__swatch-img {
    width: 64px;
    height: 80px;
    object-fit: contain; /* show the whole print (portrait/landscape), never crop */
    /* Show the product image AS-IS — no square/box around it (like the PLP widget, feedback 1). */
    border: none;
    background: none;
    border-radius: 0;
  }
  /* No selection outline on FBT swatches — these navigate to other prints, so a "current"
     black border read as a random box (feedback 2). */
  /* "View more" is now a dashed box with a + — same shape as an empty print slot (feedback 2). */
  .bundle-builder__swatch-more {
    flex: 0 0 auto;
    width: 60px;
    height: 80px;
    border: 1px dashed rgba(18, 18, 18, 0.4);
    border-radius: 0.4rem;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(18, 18, 18, 0.4);
  }
  .bundle-builder__swatch-more-plus { font-size: 1.6rem; line-height: 1; }

  /* ---- View More modal ---- */
  .bundle-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bundle-modal[hidden] { display: none; }
  .bundle-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .bundle-modal__panel {
    position: relative;
    background: rgb(255, 255, 255);
    width: min(900px, 92vw);
    max-height: 85vh;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
  }
  .bundle-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Browse mode: the modal hosts the print-selector panel (facets, search, recently-viewed,
     aligned cards) instead of the old simple grid, so it matches the bundle mini-PLP (feedback 4). */
  .bundle-modal--browse .bundle-modal__filters,
  .bundle-modal--browse .bundle-modal__search,
  .bundle-modal--browse .bundle-modal__grid { display: none; }
  .bundle-print-selector--browse {
    display: flex !important;
    position: static;
    top: auto;
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  /* The panel's own header/close + bundle-progress are redundant in the modal (it has its own). */
  .bundle-print-selector--browse .bundle-print-selector__top,
  .bundle-print-selector--browse .bundle-print-selector__progress { display: none; }
  .bundle-print-selector--browse .bundle-print-selector__grid {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  .bundle-modal__title {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
  }
  .bundle-modal__close {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: rgb(18, 18, 18);
  }
  .bundle-modal__filters {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .bundle-modal__filter {
    border: 1px solid rgba(18, 18, 18, 0.2);
    border-radius: 999px;
    background: rgb(255, 255, 255);
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    cursor: pointer;
    white-space: nowrap;
  }
  .bundle-modal__filter[aria-pressed='true'] {
    background: rgb(18, 18, 18);
    color: rgb(255, 255, 255);
    border-color: rgb(18, 18, 18);
  }
  .bundle-modal__search {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(18, 18, 18, 0.2);
    border-radius: 0.5rem;
    font-size: 0.85rem;
  }
  .bundle-modal__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    overflow-y: auto;
    padding-right: 0.25rem;
  }
  .bundle-modal__card {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
  }
  .bundle-modal__card-img {
    width: 100%;
    object-fit: contain;
    border-radius: 0.4rem;
    background: rgba(18, 18, 18, 0.05);
  }
  .bundle-modal__card-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0.3rem;
  }
  .bundle-modal__empty,
  .bundle-modal__loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1.5rem;
    color: rgba(18, 18, 18, 0.55);
    font-size: 0.85rem;
  }

  /* ---- Selector: load-more, collapsible search (expand/eye styled above) ---- */
  .bundle-print-selector__more {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding: 0.6rem;
    border: 1px solid rgba(18, 18, 18, 0.3);
    border-radius: 0.5rem;
    background: rgb(255, 255, 255);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
  }
  /* Search toggle now lives in the controls row, left of the layout toggle. */
  .bundle-print-selector__search-toggle {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid rgba(18, 18, 18, 0.15);
    background: rgb(255, 255, 255);
    color: rgb(18, 18, 18);
    border-radius: 999px; /* circular magnifier button (Figma 257:8652) */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Recently Viewed chip (Figma 257:8658 default / 257:11526 active). Between search + layout. */
  .bundle-print-selector__recent {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.9rem;
    padding: 0 0.7rem;
    border: 1px solid rgba(18, 18, 18, 0.25);
    border-radius: 999px;
    background: #ffffff;
    color: #121212;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }
  .bundle-print-selector__recent[hidden] { display: none; }
  .bundle-print-selector__recent-icon { display: inline-flex; }
  .bundle-print-selector__recent-x { display: none; margin-left: 0.1rem; }
  .bundle-print-selector__recent[aria-pressed='true'] {
    background: #121212;
    color: #ffffff;
    border-color: #121212;
  }
  .bundle-print-selector__recent[aria-pressed='true'] .bundle-print-selector__recent-x { display: inline-flex; }
  .bundle-print-selector__search-wrap { display: flex; }
  .bundle-print-selector__search-wrap:has(.bundle-print-selector__search[hidden]) { display: none; }
  .bundle-print-selector__search { flex: 1; }
  .bundle-print-selector__search[hidden] { display: none; }

  /* ---- Active-filter chips (PLP-style) + Clear all ---- */
  .bundle-print-selector__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.1rem 0 0.2rem;
  }
  .bundle-print-selector__active[hidden] { display: none; }
  .bundle-print-selector__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid rgba(18, 18, 18, 0.2);
    border-radius: 999px;
    background: #f4f4f4;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    line-height: 1;
    color: #121212;
    cursor: pointer;
  }
  .bundle-print-selector__chip:hover { border-color: rgba(18, 18, 18, 0.45); }
  .bundle-print-selector__chip svg { width: 11px; height: 11px; }
  .bundle-print-selector__clear {
    border: none;
    background: #121212;
    color: #ffffff;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
  }

  /* ---- Expand modal (single print) ---- */
  .bundle-expand {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bundle-expand[hidden] { display: none; }
  .bundle-expand__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .bundle-expand__panel {
    position: relative;
    background: rgb(255, 255, 255);
    width: min(1020px, 94vw); /* ~50% bigger, focusing on a larger print (item 13) */
    max-height: 90vh;
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    gap: 1.75rem;
    overflow: auto;
  }
  .bundle-expand__close {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: rgb(18, 18, 18);
  }
  /* ---- Detail modal carousel (Figma 255:3883 / 256:3904) ---- */
  .bundle-expand__carousel { width: 56%; flex: 0 0 56%; min-width: 0; }
  /* Arrows flank the image in clear gutters (outside it) so none of the print is covered (item 12). */
  .bundle-expand__stage { display: flex; align-items: center; gap: 0.25rem; }
  .bundle-expand__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; border-radius: 0.4rem; background: rgba(18, 18, 18, 0.05); }
  .bundle-expand__track { display: flex; transition: transform 0.28s ease; }
  .bundle-expand__slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; }
  .bundle-expand__slide img { width: 100%; max-height: 72vh; object-fit: contain; display: block; }
  .bundle-expand__nav {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    box-sizing: border-box;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: #121212;
  }
  .bundle-expand__nav[hidden] { opacity: 0.3; pointer-events: none; display: inline-flex; } /* dim at bounds, keep the gutter */
  .bundle-expand__nav::before { content: ''; width: 12px; height: 12px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; box-sizing: border-box; }
  .bundle-expand__nav--prev::before { transform: translateX(2px) rotate(-45deg); }
  .bundle-expand__nav--next::before { transform: translateX(-2px) rotate(135deg); }
  .bundle-expand__dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.6rem; }
  .bundle-expand__dots[hidden] { display: none; }
  .bundle-expand__dot { width: 7px; height: 7px; border-radius: 999px; border: none; background: rgba(18, 18, 18, 0.25); padding: 0; cursor: pointer; }
  .bundle-expand__dot[aria-current='true'] { background: #121212; }
  .bundle-expand__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }
  .bundle-expand__title { font-weight: 700; font-size: 1.1rem; margin: 0; }
  .bundle-expand__artist { color: rgba(18, 18, 18, 0.6); margin: 0; font-size: 0.85rem; }
  .bundle-expand__bio { font-size: 0.82rem; color: rgba(18, 18, 18, 0.75); line-height: 1.5; }
  .bundle-expand__readmore {
    display: inline;
    border: none; background: none; padding: 0;
    font-size: 0.82rem; font-weight: 700; color: #121212;
    text-decoration: underline; cursor: pointer;
  }
  .bundle-expand__add { margin-top: auto; }
  @media screen and (max-width: 749px) {
    .bundle-expand__panel { flex-direction: column; }
    .bundle-expand__carousel { width: 100%; flex-basis: auto; }
    .bundle-expand__slide img { max-height: 40vh; }
  }

  @media screen and (max-width: 749px) {
    /* Pack sizes stay on ONE line (Figma), just tighter than desktop. Since the row became a
       slider (5 tiers), mobile shows ~3.4 per view rather than 4.25 — at a 375px viewport the
       desktop ratio would leave ~80px buttons, below what the label + per-print line can hold. */
    .bundle-builder__tiers { gap: 5px; }
    .bundle-builder__tier { flex: 0 0 calc((100% - 2 * 5px) / 3.4); }
    /* Touch devices swipe; the arrows would sit on top of the first/last button. */
    .wd-bundle-builder__tiers-arrow { display: none !important; }
    /* The buttons are ~77px of usable width at a 375px viewport, so "From" moves onto its own
       small line above the price (see the markup comment in the tier loop) — inline, the EU
       worst case "From €153,95* / print" cannot hold one line here at any legible size. */
    .bundle-builder__tier-ppp { font-size: 9px; margin-top: 3px; }
    .bundle-builder__tier-ppp-from { display: block; font-size: 8px; line-height: 1.4; }
    /* Vertical padding mirrors desktop's air; the control arm stays on main's 66px
       min-height for the same reason as desktop (see the .bundle-builder__tier comment). */
    .bundle-builder__tier { padding: 1.1rem 0.15rem; min-height: 66px; }
    .bundle-builder__tier-label { font-size: 13px; }
    .bundle-builder__tier-discount { font-size: 10px; padding: 0.12rem 0.3rem; }
    .bundle-builder__tier-free { font-size: 8px; padding: 0.2rem 0.1rem; }
    .bundle-modal__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* The grey full-bleed must also reach the LEFT edge on mobile (product-details is
       full-width here); on desktop the left is the column boundary so it's clipped. */
    body.bb-bundle-active .product-details:not(#quick-add-dialog *) {
      clip-path: inset(-160px -100vmax 0 -100vmax);
    }

    /* Bundle mode: hide the native size/frame/price/buy UI AND the product image
       (Figma mobile has no main image in pack mode). :not(#quick-add-dialog *) so the
       quick-view buy-box in the modal is left intact. */
    body.bb-bundle-active variant-picker:not(#quick-add-dialog *),
    body.bb-bundle-active frame-variant-picker:not(#quick-add-dialog *),
    body.bb-bundle-active .buy-buttons-block:not(#quick-add-dialog *),
    body.bb-bundle-active product-price:not(#quick-add-dialog *),
    body.bb-bundle-active .product-information__media media-gallery:not(#quick-add-dialog *) { display: none !important; }

    /* Empty slots open the print-selector drawer (the trigger on mobile). */
    body.bb-bundle-active .bundle-builder__slot--empty { cursor: pointer; }
    /* The old "Choose your prints" button is replaced by tapping "Add Artwork". */
    .bundle-builder__browse { display: none; }

    /* Empty slots keep the SAME content as desktop on mobile: paid slots show the
       "Add artwork to unlock X% off + N free prints" subtitle (mobile feedback 2) and free
       slots show the struck £value → £0 (mobile feedback 1). The separate centred "Add Artwork"
       link stays hidden (the head already reads as the call to action). */
    .bundle-builder__slot-thumb--empty { height: 85px; }

    /* Tighten the vertical gap between the title/price row and the artist/discount row on
       mobile (mobile feedback 4). slot-main gap (0.3rem) minus the artist row's negative margin
       (-0.3rem) nets ~0 between those two rows, without overlapping. */
    .bundle-builder__slot-main { gap: 0.3rem; }
    .bundle-builder__slot-artistline { margin-top: -0.3rem; }

    /* Tooltip bubbles are JS-positioned (fixed + viewport-clamped) on tap, so they can't be
       cut off; just cap the width on mobile (feedback 4). */
    .bundle-builder__tip-bubble { max-width: min(280px, 82vw); }

    /* Bundle-progress "X of Y Products Selected" dropdown (Figma 125:5201 / 125:5444):
       a full-bleed bright-yellow bar, centred caret + bold black label. */
    .bundle-print-selector__progress { display: block; margin: 0 -1rem 0.25rem; }
    .bundle-print-selector__progress-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 0.45rem;
      padding: 0.6rem 0.75rem;
      border: none;
      border-radius: 0;
      background: #f2ff00;
      color: #000000;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
    }
    .bundle-print-selector__progress-toggle .bundle-print-selector__caret {
      transition: transform 0.15s ease;
      transform: rotate(180deg); /* caret points UP when closed (Figma) */
      color: #000000;
    }
    .bundle-print-selector__progress-toggle[aria-expanded='true'] .bundle-print-selector__caret { transform: rotate(360deg); }
    .bundle-print-selector__progress-thumbs {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      padding: 0.6rem 1rem 0.2rem;
    }
    .bundle-print-selector__progress-thumbs[hidden] { display: none; }
    .bundle-print-selector__progress-thumbs .bundle-builder__slot-thumb { width: 52px; height: 68px; font-size: 1rem; }
    .bundle-print-selector__progress-thumbs .bundle-builder__slot-thumb.is-framed { width: 52px; }

    /* Print Selector becomes a bottom sheet drawer. */
    .bundle-print-selector {
      display: flex;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      top: 4vh; /* sits near the top of the screen, matching Figma (drawer ≈ 95% of height) */
      z-index: 10000;
      max-height: none;
      margin: 0;
        padding: 12px 10px 0px 10px;
              background: rgb(255, 255, 255);
      border-radius: 1rem 1rem 0 0;
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
      transform: translateY(105%);
      transition: transform 0.3s ease;
    }
    .bundle-print-selector.is-open {
      transform: translateY(0);
    }
    /* Mobile selector: "2. Choose Your Product" title (item 17c) + X close (item 17d). */
    .bundle-print-selector__title {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      color: #000;
    }
    /* "Done" pill (replaces the X in the mobile print-selector header — item 16). */
    .bundle-print-selector__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #121212;
      background: #121212;
      color: #ffffff;
      border-radius: 999px;
      padding: 0.4rem 1.15rem;
      font-size: 0.85rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
    }
    .bundle-print-selector__grid {
      flex: 1;
      min-height: 0;
    }
    /* On the mobile drawer, always 2-up; the per-row toggle is a desktop control. */
    .bundle-print-selector[data-cols='2'] .bundle-print-selector__grid,
    .bundle-print-selector[data-cols='4'] .bundle-print-selector__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }
    .bundle-print-selector__layout { display: none; }
  }

  /* bb-off-pdp variant rules live in wd-sale-offer.liquid (this file is near the size cap). */
/* END_BLOCK:bundle-builder */

/* START_BLOCK:buy-buttons (INDEX:97) */
.buy-buttons-block {
    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

  .product-form-buttons > *:not(.quantity-selector) {
    flex: 1 1 185px;
    min-width: fit-content;
  }

  .product-form-buttons--stacked > *:not(.quantity-selector) {
    flex-basis: 51%; /* Force the buttons to be on separate rows */
  }

  .quantity-selector {
    flex-grow: 0;
  }

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

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

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

  .product-form-buttons .shopify-payment-button__button {
    width: 100%;
    min-height: var(--minimum-touch-target);
  }

  .quantity-selector,
  .add-to-cart-button {
    height: var(--height-buy-buttons);
  }

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

  .product-form-text__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
  }

  .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 {
    position: absolute;
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
  }

  .pickup-location__close-button svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:contact-form-submit-button (INDEX:101) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:email-signup (INDEX:105) */
.email-signup-block {
    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    background-color: transparent;
  }

  .email-signup__input-group:not(:has(.email-signup__button--integrated)) {
    gap: var(--gap-xs);
  }

  .email-signup__input-group:not(:has(.email-signup__button--arrow)) {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  .email-signup__input {
    width: 100%;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group .email-signup__input--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;

    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;
    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);

    &:focus-visible {
      --box-shadow-multiplier: 1.75;
      --box-shadow-color: var(--color-input-text);

      outline: none;
    }
  }

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

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

  .email-signup__input:has(+ .email-signup__button--arrow),
  .email-signup__input:has(+ .email-signup__button--integrated) {
    @media screen and (max-width: 749px) {
      text-align: left;
    }
  }

  .email-signup__button-icon {
    fill: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    aspect-ratio: 1;
    padding-inline: var(--padding-xs);

    &:not(.email-signup__button--integrated) {
      width: auto;
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);

    position: absolute;
    height: calc(100% - (var(--button-offset) * 2) - (var(--border-width) * 2));
    right: calc(var(--button-offset) + var(--border-width));
    top: calc(var(--button-offset) + var(--border-width));

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    --button-offset: calc(10% - var(--border-width));

    right: 0;

    &.email-signup__button--text.button-unstyled {
      padding: 0;
    }

    &.button-unstyled {
      border-radius: 0;
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    font-weight: var(--button-font-weight-primary);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    font-weight: var(--button-font-weight-secondary);
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:107) */
.collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) {
    justify-content: space-between;
  }

  dialog-component.facets-block-wrapper:not(:has(.facets--drawer[open])) {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .collection-wrapper:has(.collection-wrapper--full-width) .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h4--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

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

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

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

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content,
  .sorting-filter__options {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    box-shadow: none;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_BLOCK:filters */

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

    @media screen and (min-width: 750px) {
      flex-direction: row;
      justify-content: space-between;
      gap: var(--gap-md);
      align-items: center;
      text-align: left;
    }
  }

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

  .footer-utilities__group {
    width: 100%;
    display: flex;
    flex: 1 1 max-content;
    text-align: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: baseline;
      gap: var(--gap-2xs) var(--gap-xl);
      text-align: left;
    }
  }

  .footer-utilities__group--right {
    @media screen and (min-width: 750px) {
      justify-content: flex-end;
    }
  }

  .footer-utilities__group:empty {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_BLOCK:footer-utilities */

/* START_BLOCK:frame-popup (INDEX:110) */
.wd-frames-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 220px;
    color: rgba(18, 18, 18, 0.6);
    font-size: 0.9rem;
  }

  .wd-frames-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(18, 18, 18, 0.15);
    border-top-color: rgba(18, 18, 18, 0.6);
    border-radius: 50%;
    animation: wd-frames-spin 0.7s linear infinite;
  }

  @keyframes wd-frames-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .wd-frames-spinner { animation-duration: 2s; }
  }
  .popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

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

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .popup-link__close {
    background-color: transparent;
    opacity: 0.8;
  }

  .popup-link__close svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }
/* END_BLOCK:frame-popup */

/* START_BLOCK:icon (INDEX:115) */
.icon-block {
    display: flex;
    fill: currentcolor;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:116) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  placeholder-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio);
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

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

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

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

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

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:119) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: 4px;
  }
  .menu-list__list-item>.menu-list__submenu, .overflow-menu::part(overflow), .overflow-menu:after {
    max-width: 1150px;
    margin: auto;
    left: 50% !important;
    transform: translateX(-50%);
} 
  summary.menu__heading {
      padding-top: 0;
  }
  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:121) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .page-placeholder {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:122) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:123) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);
    overflow: hidden;

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

  .popup-link__content[open] {
    display: flex;
    flex-direction: column;
  }

  .popup-link__inner {
    min-height: 0;
    overflow-y: auto;
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .popup-link__close {
    background-color: transparent;
    opacity: 0.8;
  }

  .popup-link__close svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:price (INDEX:125) */
.tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_BLOCK:price */

/* START_BLOCK:product-inventory (INDEX:128) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:129) */
.product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }

  .product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:133) */
.rating-wrapper {
    width: 100%;
    gap: var(--gap-xs);
    flex-wrap: wrap;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-text,
  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:size-chart (INDEX:134) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

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

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100 dvh;
  }

  .popup-link__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .popup-link__close {
    background-color: transparent;
    opacity: 0.8;
  }

  .popup-link__close svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }
  /* START OF SIZE CHART */

  .size-slider-continer {
    width: 100%;
    text-align: center;
    overflow: hidden;
  }

  .size-slider-continer-title {
    margin-bottom: 0 !important;
    font-weight: 600;
    font-size: 18px;
  }

  .size-slides {
    overflow: hidden !important;
    margin-top: 30px;
    display: flex;
    overflow-x: auto;
    max-width: 400px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  button.modal-close.btn.btn-square-small:hover {
    background: #fff !important;
    border: none !important;
    color: #bcbcbc !important;
  }

  .size-slides-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 13px;
    margin-top: 15px;
  }

  .size-slides > div {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    height: 440px;
    border-radius: 10px;
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;
    justify-content: center;
    align-items: center;
    font-size: 100px;
  }
  .author-info {
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 0.75rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
  }
  .author-info a {
    color: white;
  }
  .size-slides img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
  }

  .size-slider-continer > a {
    display: inline-flex;
    background: white;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    position: relative;
    background: #dddd;
    margin: 7px 4px;
    padding: 10px 15px;
    width: 158px;
    font-size: 15px;
  }
  .size-slider-continer > a:active {
    top: 1px;
  }
  .size-slider-continer > a:focus {
    background: #000;
  }


  .size-guide-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    display: block;
    text-align: center;
    margin-top: 19px
  }

  .paoc-padding-20 {
    padding: 20px 0 !important;
  }

  .size-chart-toggle-item {
    border-top: 1px solid #e8e8e8;
    padding-top: 25px;
    margin-top: 25px;
  }

  .size-chart-container hr {
    border-top: 1px solid #e8e8e8 !important;
    padding-top: 25px !important;
    margin-top: 25px !important;
  }

  .size-chart-toggle:hover {
    background: #a4a4a4ee;
  }

  .size-chart-container {
    display: inline-block;
    margin: 3px 0 !important;
  }

  .modal-dialog.modal-large .modal-body {
    padding: 0 10px 40px !important;
  }

  .modal-header {
    padding: 13px 18px;
  }
/* END_BLOCK:size-chart */

/* START_BLOCK:small-image (INDEX:135) */
.icon-block {
    display: flex;
    fill: currentcolor;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:small-image */

/* START_BLOCK:spacer (INDEX:136) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 750px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:137) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }

  swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }
  }

  swatches-variant-picker-component .variant-option--swatches {
    padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .variant-option--swatches {
    overflow-list::part(list) {
      gap: var(--gap-sm);
    }

    overflow-list[defer]::part(list) {
      flex-wrap: nowrap;
    }
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:142) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* START_BLOCK:wd-sale-offer (INDEX:144) */
.wd-sale-offer {
    /* Revealed ONLY in the sale A/B variant arm (html.bb-off-pdp — Visually / the
       wd-sale-ab-prepaint snippet) and in the theme editor, so it can be configured. */
    display: none;
    background: var(--wd-so-bg, #f2ff00);
    color: var(--wd-so-color, #000000);
    text-align: center;
    padding: var(--wd-so-py, 11px) 14px;
    margin-top: var(--wd-so-mt, 18px);
    font-family: var(--wd-so-font, inherit);
  }
  html.bb-off-pdp .wd-sale-offer,
  html.shopify-design-mode .wd-sale-offer {
    display: block;
  }
  .wd-sale-offer__line {
    margin: 0;
  }
  .wd-sale-offer__line--1 {
    font-size: var(--wd-so-size-1, 13px);
    font-weight: 800;
    letter-spacing: 0.05em;
  }
  .wd-sale-offer__line--2 {
    font-size: var(--wd-so-size-2, 17px);
    font-weight: 900;
    letter-spacing: 0.03em;
    margin-top: 2px;
  }
  .wd-sale-offer__line--3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: var(--wd-so-size-3, 11px);
    font-weight: 400;
    margin-top: 4px;
  }
  .wd-sale-offer__check {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
  }
  /* Countdown mount — filled via Visually in the last days of the sale; collapses while empty. */
  .wd-sale-offer__countdown {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .wd-sale-offer__countdown:empty {
    display: none;
  }

  /* ---- Sale A/B test: variant arm (html.bb-off-pdp — set by Visually / the
     wd-sale-ab-prepaint head snippet, never by the theme itself). These rules live HERE
     rather than in blocks/bundle-builder.liquid because that file sits just under
     Shopify's per-file Liquid size cap (the GitHub sync silently skips oversized files);
     stylesheet-tag content is aggregated theme-wide, so they apply identically.
     Hides the builder host before its JS runs so it can't flash; bundle-builder.js then
     moves the product swatch row OUT of the host (the same relocation the single view
     already performs) and reveals it, so the variant keeps swatches and nothing else.
     The bundle entry product (data-entry-mode="true") is exempt —
     /products/build-your-bundle always keeps the full builder in both arms. ---- */
  html.bb-off-pdp bundle-builder:not([data-entry-mode='true']) {
    display: none !important;
  }
  /* The swatch row's "+" (View more) tile opens the builder's browse modal — builder UI,
     so the variant arm hides it. */
  html.bb-off-pdp .bundle-builder__swatch-more {
    display: none !important;
  }
/* END_BLOCK:wd-sale-offer */

/* START_BLOCK:wd-sticky-cta (INDEX:145) */
/* A full-width bar pinned to the bottom of the viewport, sliding up into
     place. White so it reads as page furniture rather than a floating pill. */
  .wd-sticky-cta {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    background: #fff;
    border-block-start: 1px solid #e8e8e8;
    box-shadow: 0 -4px 20px rgb(0 0 0 / 8%);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease,
      visibility 0.24s ease;
  }

  .wd-sticky-cta--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .wd-sticky-cta__link {
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .wd-sticky-cta {
      padding: 12px;
    }

    .wd-sticky-cta__link {
      display: block;
      width: 100%;
      text-align: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wd-sticky-cta {
      transition: none;
    }
  }
/* END_BLOCK:wd-sticky-cta */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:account-actions (INDEX:151) */
.account-actions {
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: height var(--animation-values);

    &:has([data-active]) .account-actions__main-menu {
      visibility: hidden;
    }
  }

  .account-actions__header {
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .account-actions__title {
    /* Ideally we set the font-size here, but specificity issues make this necessary */
    --font-h5--size: var(--font-size--lg);

    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .account-actions__email {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    max-width: var(--account-actions-max-width);
    word-break: break-all;
  }

  .account-actions__sign-ins {
    padding: var(--padding-xl);
    padding-block-start: 0;
    padding-block-end: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .account-actions__sign-in-text {
    display: inline;
  }

  .account-actions__fallback-text {
    display: none;
  }

  .account-actions__sign-ins:not(:has(shop-login-button)) {
    gap: 0;

    .account-actions__sign-in-text {
      display: none;
    }

    .account-actions__fallback-text {
      display: block;
    }
  }

  /* Makes the shop login button radius match the theme settings */
  .account-actions__shop-login {
    --buttons-radius: var(--style-border-radius-buttons-primary);
  }

  .account-actions__nav {
    padding: var(--padding-xl);
    padding-block-start: 0;
  }

  .account-actions__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;

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

  .account-actions__link {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .account-actions__icon {
    display: flex;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-block: -4px;
  }
/* END_SNIPPET:account-actions */

/* START_SNIPPET:account-button (INDEX:152) */
.account-button {
    color: var(--color-foreground);
    appearance: none;
    border: none;
    background: none;
    height: var(--button-size);
    width: var(--button-size);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .account-button__avatar {
    --account-button-size: 1.625rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--account-button-size);
    height: var(--account-button-size);
    border-radius: var(--style-border-radius-50);
    background-color: var(--color-primary-button-background);
    font-size: var(--font-size--sm);
    font-weight: 500;
    color: var(--color-primary-button-text);
    text-transform: uppercase;
    line-height: 1;
  }

  .account-button__icon {
    color: currentColor;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* The shop avatar doesn't bubble the click event up to our button, so we need to prevent that or the button doesn't work */
  .account-button shop-user-avatar {
    pointer-events: none;
  }
/* END_SNIPPET:account-button */

/* START_SNIPPET:account-drawer (INDEX:153) */
.account-drawer {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .account-drawer__dialog {
    --animation-speed: 0.24s;
    --dialog-drawer-opening-animation: account-drawer-slide-in;
    --dialog-drawer-closing-animation: account-drawer-slide-out;

    height: fit-content;
    margin: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 0;
    padding: 0;
  }

  .account-drawer__close-button {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--padding-xs);
    inset-inline-end: var(--padding-xs);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .account-drawer__close-button .svg-wrapper {
    display: flex;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
  }

  .account-drawer__close-button svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  @keyframes account-drawer-slide-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes account-drawer-slide-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }
/* END_SNIPPET:account-drawer */

/* START_SNIPPET:account-popover (INDEX:154) */
.account-popover {
    --account-popover-min-width: 22rem;
    --account-actions-max-width: 22rem;
  }

  .account-popover__summary {
    padding: 0;

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

  .account-popover__panel {
    --account-popover-opacity: 0;
    --account-popover-y: 20px;
    border-radius: var(--style-border-radius-popover);
    margin: 0;
    top: calc(var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding));
    left: unset;
    right: calc(var(--anchor-right) * 1px);

    width: max-content;
    min-width: var(--account-popover-min-width);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    opacity: var(--account-popover-opacity);
    translate: 0 var(--account-popover-y);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;

    &:popover-open {
      --account-popover-opacity: 1;
      --account-popover-y: 0px;
    }
  }

  @starting-style {
    .account-popover__panel {
      --account-popover-opacity: 0;
      --account-popover-y: 20px;
    }
    .account-popover__panel:popover-open {
      --account-popover-opacity: 0;
      --account-popover-y: 20px;
    }
  }
/* END_SNIPPET:account-popover */

/* START_SNIPPET:add-to-cart-button (INDEX:155) */
.add-to-cart-text {
    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text {
    animation-name: atc-slide-out;
  }

  .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text--added {
    animation-name: atc-slide-in;
  }

  @keyframes atc-slide-in {
    from {
      opacity: 0;
      transform: translateY(0.5em);
    }

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

  @keyframes atc-slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(-1em);
      opacity: 0;
    }
  }
/* END_SNIPPET:add-to-cart-button */

/* START_SNIPPET:background-video (INDEX:158) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-video */

/* START_SNIPPET:bento-grid (INDEX:159) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific cases === */

    /* Exactly 1 item */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(1)) {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(2)) {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(4)) {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(5)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(7)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(8)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(10)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(11)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:160) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:bundle-widget (INDEX:162) */
.bundle-widget {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      display: block;
      font-family: inherit;
    }
    .bundle-widget[hidden] { display: none; }
    /* Sale A/B test: variant arm hides the widget entirely (html.bb-off-plp — set by
       Visually / the wd-sale-ab-prepaint head snippet; bundle-widget.js also no-ops,
       this rule is the pre-JS / belt-and-braces half). */
    html.bb-off-plp .bundle-widget { display: none !important; }

    /* Collapsed yellow bar — always the handle at the very bottom. */
    .bundle-widget__bar {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #F2FF00;
      color: #000;
      border: none;
      cursor: pointer;
      padding: 10px 20px;
      min-height: 37px;
      font-weight: 700;
      font-size: 13px;
      line-height: 1.2;
      text-align: center;
    }
    .bundle-widget__bar-chevron {
      display: inline-flex;
      transition: transform 0.25s ease;
    }
    .bundle-widget[data-open="true"] .bundle-widget__bar-chevron { transform: rotate(180deg); }

    /* Expanded white panel — slides up above the bar. */
    .bundle-widget__panel {
      background: #fff;
      box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .bundle-widget[data-open="true"] .bundle-widget__panel {
      max-height: 70vh;
      overflow: visible; /* let the SAVE tooltip escape the panel instead of being clipped (feedback) */
    }
    .bundle-widget__panel-inner {
      position: relative;
      max-width: 1100px;
      margin-inline: auto;
      padding: 18px 20px 18px 20px;
    }
    .bundle-widget__close {
      position: absolute;
      top: 12px;
      right: 12px; /* X on the right (item G2) */
      background: none;
      border: none;
      cursor: pointer;
      color: #000;
      display: inline-flex;
      padding: 4px;
      z-index: 1;
    }
    .bundle-widget__panel-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      padding-inline-end: 28px;
      /* No divider line — the CTA that used to sit below it was removed (PLP feedback 2). */
    }
    .bundle-widget__items {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .bundle-widget__item {
      width: 64px;
      height: 78px;
      border-radius: 4px;
      overflow: hidden;
      background: #cfe7f5;
      flex: 0 0 auto;
    }
    .bundle-widget__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .bundle-widget__item--empty {
      background: transparent;
      border: 1px dashed #b5b5b5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #b5b5b5;
    }
    .bundle-widget__item-plus { font-size: 20px; line-height: 1; }
    .bundle-widget__item--free { position: relative; }
    /* "FREE" tag removed from the PLP widget thumbnails (feedback 6). */
    .bundle-widget__item--free::after { content: none; }
    /* "In cart" badge on widget thumbnails (feedback) — same bottom-tag treatment the old "FREE"
       tag used, black pill with white text. */
    .bundle-widget__item--incart { position: relative; }
    .bundle-widget__item-incart {
      position: absolute;
      left: 0; /* edge-to-edge on the artwork so it never overhangs the frame (feedback) */
      right: 0;
      bottom: 0; /* flush with the artwork's bottom edge (feedback) */
      text-align: center;
      background: #121212;
      color: #ffffff;
      font-size: 9px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      padding: 3px 6px;
      border-radius: 0;
      white-space: nowrap;
    }
    /* Unframed thumbnail at the art's own aspect ratio — same convention as the cart rows
       (.cart-items__media-container, --ratio = images[1].aspect_ratio): landscape prints
       render landscape instead of being cover-cropped into the fixed portrait box.
       align-self stops the flex row stretching the tile back to the line height. */
    .bundle-widget__item.wd-bw-ratio {
      height: auto;
      aspect-ratio: var(--wd-ratio);
      align-self: center;
    }
    /* Framed thumbnail — same composite as the cart rows / bundle builder: raw art (second
       product image) padded by the frame's inset widths + the frame PNG overlaid (contain),
       height auto so nothing distorts. New wd- classes only; unframed thumbs are untouched. */
    .bundle-widget__item.wd-bw-framed {
      height: auto;
      min-height: 78px;
      background: transparent;
      overflow: visible;
      display: flex;
      align-items: center;
    }
    .bundle-widget__item.wd-bw-framed .wd-bw-frame-box {
      position: relative;
      width: 100%;
      flex: 1 1 auto;
    }
    .bundle-widget__item.wd-bw-framed .wd-bw-frame-overlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      z-index: 1;
    }
    .bundle-widget__item.wd-bw-framed .wd-bw-frame-media { padding: var(--tb, 0) var(--lr, 0); }
    /* Relative wrapper around the art: the "In cart" badge anchors to the ART's bottom edge
       inside the frame window, whatever the frame/tile ratio. z-index lifts the badge above
       the frame PNG overlay (z-index 1). */
    .bundle-widget__item.wd-bw-framed .wd-bw-frame-artbox { position: relative; }
    .bundle-widget__item.wd-bw-framed .bundle-widget__item-incart { z-index: 2; }
    .bundle-widget__item.wd-bw-framed .wd-bw-frame-art {
      display: block;
      width: 100%;
      height: auto;
    }
    /* Column: row 1 ("Total · SAVE · was · now") then the full-width CTA. Sized to fit its widest
       child (row 1) so the button below spans exactly that width — both breakpoints (feedback). */
    .bundle-widget__totals {
      display: inline-flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      flex: 0 0 auto;
      width: fit-content;
    }
    .bundle-widget__totals-line {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap; /* keep the whole total on ONE line (feedback) */
    }
    .bundle-widget__total-label { font-weight: 700; font-size: 16px; }
    .bundle-widget__save {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #F2FF00;
      color: #000;
      font-weight: 700;
      font-size: 12px;
      padding: 3px 8px;
    }
    /* Info icon + tooltip next to SAVE, reusing the PDP savings message (feedback 6). */
    .bundle-widget__save-info { display: inline-flex; position: relative; cursor: help; }
    .bundle-widget__save-info svg { width: 12px; height: 12px; display: block; }
    /* Identical to the PDP "SAVE X" tooltip: white bubble, dark text, downward tail (feedback). */
    .bundle-widget__save-tip {
      display: none;
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      width: 230px;
      background: #ffffff;
      color: #121212;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.4;
      text-align: left;
      white-space: normal;
      padding: 0.85rem 1rem;
      border-radius: 14px;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
      z-index: 30;
      pointer-events: none;
    }
    .bundle-widget__save-tip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border: 9px solid transparent;
      border-top-color: #ffffff;
      filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.08));
    }
    .bundle-widget__save-info:hover .bundle-widget__save-tip,
    .bundle-widget__save-info:focus .bundle-widget__save-tip,
    .bundle-widget__save-info.is-open .bundle-widget__save-tip { display: block; }
    .bundle-widget__total { font-weight: 700; font-size: 18px; }
    .bundle-widget__total s { color: #9b9b9b; font-weight: 700; margin-right: 4px; }
    .bundle-widget__total .bundle-widget__from { font-weight: 700; font-size: 18px; margin-right: 4px; }
    /* Standard CTA — black fully-rounded pill, not wider than the Figma (605px, item 19b). */
    .bundle-widget__cta {
      display: block;
      width: 100%;
      max-width: 605px;
      margin-inline: auto;
      background: #000;
      color: #fff;
      text-align: center;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.02em;
      padding: 16px;
      border-radius: 999px;
    }

    /* Desktop: the collapsed yellow bar spans the full screen width (PLP-3). */
    @media screen and (min-width: 750px) {
      /* Centre the panel content (thumbnails + total) on desktop (item F5). */
      .bundle-widget__panel-top { justify-content: center; align-items: center; gap: 32px; padding-inline-start: 0; padding-inline-end: 0; }
    }
    /* Mobile: keep the open panel usable — thumbnails scroll horizontally instead of wrapping
       into a tall column, and the Total drops below them (item 19c). */
    @media screen and (max-width: 749px) {
      .bundle-widget__panel-inner { padding: 16px 16px 16px 16px; }
      .bundle-widget__close { top: 10px; right: 8px; }
      /* Centre the panel content horizontally on mobile too (feedback) — matches desktop (F5). */
      .bundle-widget__panel-top { flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding-inline: 12px; }
      .bundle-widget__items { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; padding-bottom: 4px; justify-content: center; }
      .bundle-widget__item { width: 52px; height: 64px; }
      .bundle-widget__item.wd-bw-framed { min-height: 64px; }
      .bundle-widget__item-incart { font-size: 7px; letter-spacing: 0; }
      /* Same column layout as desktop: total on one line, full-width CTA below (feedback). Slightly
         tighter gaps + smaller price so the single line fits a narrow screen without page overflow. */
      .bundle-widget__totals { width: fit-content; max-width: 100%; }
      .bundle-widget__totals-line { gap: 10px; }
      .bundle-widget__total { font-size: 16px; }
    }
    /* "View bundle" button: full width of the totals column (= the width of the total line above it),
       both breakpoints (feedback). */
    .bundle-widget__view {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      background: #121212;
      color: #ffffff;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
      text-decoration: none;
      cursor: pointer;
    }
    .bundle-widget__view:hover { opacity: 0.85; }
/* END_SNIPPET:bundle-widget */

/* START_SNIPPET:button (INDEX:163) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:164) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SNIPPET:cart-discount (INDEX:166) */
.cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--sm);
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: 0 var(--padding-xs) var(--padding-sm) 0;
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

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

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  cart-discount-component {
    display: flex;
  }
/* END_SNIPPET:cart-discount */

/* START_SNIPPET:cart-drawer (INDEX:167) */
/* Recommendations are fetched when the drawer opens; reserve a little height so the panel
     doesn't snap open as they land, and give the wait a visible state. */
  .wd-cart-recs__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
  }

  .wd-cart-recs__spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(18, 18, 18, 0.15);
    border-top-color: rgba(18, 18, 18, 0.55);
    border-radius: 50%;
    animation: wd-cart-recs-spin 0.7s linear infinite;
  }

  @keyframes wd-cart-recs-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .wd-cart-recs__spinner { animation-duration: 2s; }
  }

  .cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .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] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .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 var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1;

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

  .cart-drawer__dialog {
    overflow: hidden;
  }

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

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__summary {
    background-color: var(--color-background);
    position: sticky;
    bottom: 0;
    z-index: 1;
  }

  /* Free-shipping progress bar (Figma 179-1084 empty / 187-1533 filled). */
  .mrk-freeship {
    background-color: #F2FF00;
    padding: 10px 16px 12px;
    text-align: center;
  }
  .mrk-freeship__text {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    color: #000;
  }
  .mrk-freeship__track {
    height: 5px;
    border-radius: 2.6px;
    background: rgba(255, 255, 255, 0.55);
    overflow: hidden;
  }
  .mrk-freeship__fill {
    height: 100%;
    border-radius: 2.6px;
    background: #000;
    transition: width 0.4s ease;
    min-width: 0;
  }
  .mrk-freeship--done .mrk-freeship__track { background: #fff; }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-icon-component (INDEX:168) */
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;
    }
  }
/* END_SNIPPET:cart-icon-component */

/* START_SNIPPET:cart-products (INDEX:170) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

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

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

  .cart-items__table {
    width: 100%;
  }

  .cart-items__table * {
    margin: 0;
  }

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

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

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

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    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-child {
    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-2xs); */
  }

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

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

  .cart-items__title {
    font-size: var(--cart-font-size--md);
    color: var(--color-foreground);
    font-weight: var(--font-h2--weight);
    text-transform: var(--product-title-case);
    line-height: 1;
  }

  .cart-items__variant {
    display: inline-block;
  }

  .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 .quantity-selector {
    display: inline-flex;
    flex: 0 1 var(--quantity-selector-width);
    font-size: var(--cart-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);
    width: 22px;
    height: 22px;
    justify-content: center;
    box-shadow: none;
    padding: 0;
    margin: 0 0 10px auto;
  }

  .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(--cart-font-size--md);
  }

  .cart-items__price-unit {
    font-size: var(--cart-font-size--xs);
  }

  .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: 0;
    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(--cart-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-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;
      justify-content: center;
    }
  }

  .cart__original-total-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

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

    &:has(.cart__installments) {
      row-gap: var(--gap-xs);
    }
  }

  .cart__original-total-container:empty {
    display: none;
  }

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

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

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

  .cart__original-total-container,
  .cart__original-total-container * {
    font-size: var(--cart-font-size--xs);
  }

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

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

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

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

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

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

  .cart-note {
    width: 100%;
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--sm);
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--cart-font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-note .svg-wrapper {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
    margin: 0;
  }

  .cart-note .icon-plus {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
  }

  /* 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__properties dt,
  .cart-items__properties dd {
    display: inline;
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:171) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--padding-sm);
  }

  .cart__summary-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart__installments {
    color: var(--color-foreground);
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:174) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    gap: var(--collection-card-gap);
    display: flex;
    flex-direction: column;
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    z-index: var(--layer-flat);
    pointer-events: none;

    a,
    button {
      /* only allow interactive elements to be clickable separate from .collection-card__link */
      pointer-events: auto;
    }
  }

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

  .collection-card__content {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--collection-card-gap);
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment);
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }

    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:contact-form (INDEX:176) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

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

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-foreground);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_SNIPPET:contact-form */

/* 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:editorial-collection-grid (INDEX:182) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:183) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:facets-actions (INDEX:184) */
/* Facets - Actions */
  .facets__actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    order: 1;
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    background-image: var(--to-top-gradient-background);
    z-index: var(--facets-sticky-z-index);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
  }

  .facets:not(.facets--drawer) .facets__actions {
    @media screen and (min-width: 750px) {
      position: static;
    }
  }

  .facets--vertical .facets__actions {
    padding-inline: 0;
    justify-content: center;
  }

  .facets--horizontal .facets__actions {
    @media screen and (min-width: 750px) {
      order: 0;
      bottom: auto;
      position: static;
      padding: 0;
      z-index: var(--layer-flat);
      flex-shrink: 0;
      align-items: center;
      margin-top: initial;
      background-image: none;
    }
  }

  .facets--horizontal .facets__actions--active::before {
    @media screen and (min-width: 750px) {
      content: '';
      border-inline-start: var(--style-border-width) solid var(--color-border);
      height: var(--font-paragraph--size);
      position: absolute;
    }
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .clear-filter:hover {
    text-decoration: underline;
    background-color: transparent;
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    transition: transform var(--animation-values), opacity var(--animation-values);
    opacity: 0;
    transform: translateY(100%);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__clear-all {
    box-shadow: none;
  }

  .facets--horizontal .facets__clear-all {
    @media screen and (min-width: 750px) {
      --facets-clear-all-min-width: var(--minimum-touch-target);
      --button-color: var(--color-primary);

      text-decoration: underline transparent 0.075em;
      text-underline-offset: 0.125em;
      width: auto;
      transform: none;
      opacity: 1;
      height: var(--minimum-touch-target);
      align-items: center;
      flex-grow: 0;
      transition: text-decoration-color var(--animation-speed) var(--animation-easing);
    }
  }

  .facets--horizontal .facets__clear-all:hover {
    @media screen and (min-width: 750px) {
      --button-color: var(--color-primary-hover);
    }
  }

  @starting-style {
    .facets__clear-all {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .facets__clear-all.active {
    transform: translateY(0);
    opacity: 1;
    display: grid;
  }

  .facets--horizontal .facets__clear-all.active {
    @media screen and (min-width: 750px) {
      padding-block: 0;
      padding-inline: var(--facets-form-horizontal-gap);
      background-color: transparent;
      position: static;
      transform: none;
    }
  }

  @starting-style {
    .facets__clear-all.active {
      opacity: 0;
      transform: translateY(100%);
    }

    .facets--horizontal .facets__clear-all.active {
      @media screen and (min-width: 750px) {
        opacity: 1;
        transform: none;
      }
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__see-results {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:facets-actions */

/* START_SNIPPET:filter-remove-buttons (INDEX:185) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets__clear-all-link {
    --button-color: var(--color-primary);

    border: none;
    background-color: transparent;
    padding: var(--padding-xs);
    min-width: fit-content;
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    color: var(--button-color);
    text-decoration-color: var(--button-color);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove:not(:has(facet-remove-component)) {
    display: none;
    margin: 0;
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:filters-toggle (INDEX:186) */
/* Facets - Toggle */
  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  /* Filter count */
  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }
/* END_SNIPPET:filters-toggle */

/* START_SNIPPET:free-shipping-bar (INDEX:190) */
.free-shipping-bar {
    padding: 0.75rem var(--cart-drawer-padding, 1rem);
    border-bottom: 1px solid rgba(18, 18, 18, 0.1);
  }
  .free-shipping-bar__label {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    text-align: center;
    color: rgb(18, 18, 18);
  }
  .free-shipping-bar__track {
    height: 6px;
    border-radius: 999px;
    background: rgba(18, 18, 18, 0.12);
    overflow: hidden;
  }
  .free-shipping-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: rgb(18, 18, 18);
    transition: width 0.3s ease;
  }
  .free-shipping-bar--unlocked .free-shipping-bar__fill {
    background: #1a7f37;
  }
/* END_SNIPPET:free-shipping-bar */

/* START_SNIPPET:grid-density-controls (INDEX:192) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:193) */
.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:194) */
.cart-drawer {
    --cart-drawer-padding: var(--padding-lg) var(--padding-lg);
    --cart-drawer-padding-desktop: var(--padding-lg) var(--padding-xl);
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--2xl: var(--font-size--2xl);
  }

  .cart-drawer__dialog {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    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);
  }

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

  .cart-drawer__inner {
    height: 100%;
  }

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

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

  .cart-drawer__close-button {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: calc(var(--padding-sm) * -1);
  }

  .cart-drawer__close-button svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

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

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs);
    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)); */
    box-shadow: 0px -3px 16px 9px rgb(0 0 0 / 19%);
    border-top: 1px solid #000;
    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__original-total-container:empty)) {
    border-block-start: none;
    padding-block-start: 0;
  }

  .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;
    
    overflow-y: auto;
    .cart-items__wrapper{
      padding: var(--cart-drawer-padding);
      @media screen and (min-width: 750px) {
        padding: var(--cart-drawer-padding-desktop);
      }
    }
    
  }
  .mrk-upsell-header{
      padding: var(--cart-drawer-padding);
      @media screen and (min-width: 750px) {
        padding: 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--empty .cart-drawer__headerr{
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__headingg {
    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;
  }

  header-actions {
    display: flex;

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

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

  .header-actions__action {
    --button-color: var(--color-foreground);

    cursor: pointer;
    display: flex;
    justify-content: center;
  }

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

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

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

  .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%,
      white 45.45%,
      white 100%
    );
  }

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

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
  }

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

  .cart-bubble--animating .cart-bubble__text {
    animation: cartBubbleSlideIn var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:195) */
.header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 750px) {
    .header--desktop header-menu + .header__drawer header-drawer {
      display: none;
    }
  }

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

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

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;

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

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

  .menu-drawer__navigation {
    padding: 0;

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

  details:not([open]) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details[open] .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details[open] .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  .menu-drawer:has(details[open]) {
    /* overflow: initial; */
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

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

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

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

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

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

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

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

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

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2.75 * var(--padding-lg) + var(--icon-size-xs));
  }
  @media(max-width: 769px){
    .menu-drawer-container * {
      --menu-top-level-font-size: var(--menu-font-md--size) !important;
      --menu-top-level-font-weight: 600;
    }
  }
  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .menu-drawer__close-button {
    background-color: transparent;
    color: var(--color-foreground);
    padding: var(--padding-xl);
    box-shadow: none;
    will-change: transform;
  }

  .menu-drawer__close-button .svg-wrapper,
  .menu-drawer__close-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

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

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

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

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

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

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

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }
  .menu-drawer__close-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

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

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

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

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

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

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

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

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

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

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }
   .menu-featured-collections {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 15px 0 15px 10px !important;
    background: #F4F4F4;
    scrollbar-width: thin;               
    scrollbar-color: #ccc transparent
  }
  .menu-featured-collections::-webkit-scrollbar {
  display: none;               
}
 .menu-featured-collection-image{
    max-width: 60px;
    max-height: 60px;
    margin: 0 auto;
    width: 60px;;
 }
 a.ah-menu-feature-img {
    width: 100%;
    height: 100%;
    display: inline-block;
}
 .menu-featured-collection-image img {
    border-radius: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}
  .menu-featured-collection-title {
    font-size: 12px;
    margin-top: 6px;
    font-weight: 700;
    position: relative;
  }
  .menu-featured-collection-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 6px;
    background-color: #f2ff00;
    z-index: 1;
}
.menu-featured-collection-title{
  text-align: center;
}
.menu-drawer__close-button {
    width: 100%;
    justify-content: end;
}
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:201) */
.jumbo-text__container {
    width: 100%;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    white-space: pre;
    width: 100%;
    will-change: font-size;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
  }

  jumbo-text[data-cap-text='true'] {
    text-box-edge: cap text;
  }

  .jumbo-text-space {
    display: inline-flex;
    width: 0.5ch;
  }

  :is(.jumbo-text-char, .jumbo-text-line) {
    display: inline-flex;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    [data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'],
    .ready[data-text-effect='reveal'] .jumbo-text-line {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-char {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-char {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'],
    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:204) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(---pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color: var(--color-background);
      --pill-label-background-color: var(--color-foreground);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;

    &.variant-option--swatches-disabled,
    &:has(input:disabled) {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;

    .variant-option--swatches-disabled &,
    .variant-option--swatches:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .variant-option--images {
    position: relative;
  }

  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover:not(:has(input:disabled)),
    &:has(input:checked) {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    &:has(input:disabled),
    &:has(input:disabled):hover {
      --image-facet-border-opacity: 0;

      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      img {
        opacity: var(--disabled-opacity);
      }

      input,
      label,
      .facets__image-label {
        cursor: not-allowed;
      }

      .facets__image-wrapper {
        border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
        border-radius: var(--image-facet-border-radius);
      }
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;

    .variant-option--images:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-list--swatches .variant-option__button-label:hover:not(:has(input:disabled)) {
    font-weight: 500;
  }

  .variant-option--images:not(:has(input:disabled)) .facets__image-label:hover {
    font-weight: 500;
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:205) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

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

  .drawer-localization__button .icon-flag,
  .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;
  }

  .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;
    color: var(--color-foreground);
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

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

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

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

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

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

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

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

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }

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

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

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

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

  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
    :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,
  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

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

  .header__column .localization-form__select {
    background-color: var(--header-bg-color);
  }

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

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

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

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

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

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

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

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

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

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

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

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:206) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:mrk-bundle-main-form (INDEX:214) */
.mrk-bundle-main-btn {
    position: relative;
  }
  .add-to-cart-text {
    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text {
    animation-name: atc-slide-out;
  }

  .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text--added {
    animation-name: atc-slide-in;
  }

  @keyframes atc-slide-in {
    from {
      opacity: 0;
      transform: translateY(0.5em);
    }

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

  @keyframes atc-slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(-1em);
      opacity: 0;
    }
  }
/* END_SNIPPET:mrk-bundle-main-form */

/* START_SNIPPET:overlay (INDEX:229) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:232) */
.predictive-search-results__wrapper slideshow-slides {
    /* 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));
  }
/* END_SNIPPET:predictive-search-resource-carousel */

/* START_SNIPPET:predictive-search (INDEX:233) */
predictive-search-component {
    &:has([data-search-results]):not(:has(.predictive-search-results__no-results)) {
      .predictive-search-form__footer {
        display: block;
      }
    }
  }

  .predictive-search-form__footer {
    display: none;
  }
/* END_SNIPPET:predictive-search */

/* START_SNIPPET:price-filter (INDEX:234) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  .facets__inputs-wrapper.price-facet__inputs-wrapper {
    flex-wrap: nowrap;
  }

  .price-facet__field {
    width: 50%;
    flex-grow: 0;
  }

  @container (max-width: 199px) {
    .facets__inputs-wrapper.price-facet__inputs-wrapper {
      flex-wrap: wrap;
      width: 100%;
    }

    .price-facet__inputs-wrapper .price-facet__field {
      width: 100%;
    }
  }

  .facets .facets__inputs-wrapper.price-facet__inputs-wrapper {
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  .facets--horizontal .facets__panel-content:has(.price-facet) {
    min-width: 360px;
  }

  .facets--horizontal .facets__inputs-wrapper.price-facet__inputs-wrapper {
    @media screen and (min-width: 750px) {
      padding: calc(var(--padding-md) + var(--style-border-width-inputs));
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .facets--horizontal .price-facet__highest-price {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .field__label.price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-card-badges (INDEX:236) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

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

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

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

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

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

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

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-card-badges */

/* START_SNIPPET:product-card (INDEX:238) */
product-card-link,
  :not(product-card-link) product-card {
    width: 100%;
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }

  /* Hide the variant swatches for product cards that show a swatches variant picker */
  :is(.product-card):has(swatches-variant-picker-component) .quick-add .variant-option--swatches {
    display: none;
  }

  /* Hide "Add" button for single option product cards that show a swatches variant picker */
  :is(.product-card:not([data-no-swatch-selected])):has(.quick-add__product-form-component--single-option):has(
      swatches-variant-picker-component
    )
    .quick-add__button--choose {
    display: none;
  }

  /* Hide "Add" button for single option product cards that show a swatches variant picker */
  :is(.product-card[data-no-swatch-selected]):has(.quick-add__product-form-component--single-option):has(
      swatches-variant-picker-component
    )
    add-to-cart-component {
    display: none;
  }

  /* Hide "add" button for multi-variant product cards that don't show a swatches variant picker */
  :is(.product-card):has(.quick-add__product-form-component--multi-variant):not(:has(swatches-variant-picker-component))
    .quick-add__button--add {
    display: none;
  }

  /* Hover effect for single variant product cards and product blocks */

  /* stylelint-disable selector-max-specificity */
  :is(.product-card):has(.quick-add__product-form-component--single-variant) .card-gallery:hover {
    & .quick-add__button--choose {
      display: none;
    }

    & .quick-add__button--add {
      display: grid;
    }
  }

  .product-card[data-no-swatch-selected] slideshow-component[data-generic-media-size='1'] slideshow-arrows {
    display: none;
  }

  .product-card[data-no-swatch-selected]
    slideshow-component[data-generic-media-size='1']
    slideshow-arrows:has(+ slideshow-slides slideshow-slide[variant-image]:not([hidden])) {
    display: flex;
  }

  .product-card .variant-option__swatch svg {
    display: none;
  }

  .product-card [data-available-count='0'] ~ svg {
    display: block;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:239) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);

    isolation: isolate;

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

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

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

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

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

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

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

  .main-collection-grid__empty-title {
    margin: 0;
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-media (INDEX:240) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

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

  ::view-transition-old(gallery-item),
  ::view-transition-new(gallery-item) {
    animation-duration: 0ms;
  }

  /* ---- Framed preview sizing, MOBILE ONLY -----------------------------------------------
     A dynamic-frame preview composites the raw art (placed by the % padding on
     .mrk-featured-media) under a frame PNG, so the composite's real aspect ratio is the
     FRAME's, not the art's — e.g. a portrait A print is art 0.7071 vs frame 1750x2153 =
     0.8128, composite 0.8112.

     base.css:1520 gives every slide `display: flex` + `aspect-ratio: var(--media-preview-ratio)`
     (the ART ratio). At >=750px that's neutralised by `height: var(--constrained-height, auto)`
     (base.css:1546), which is why the desktop PDP is correct. Below 750px that override doesn't
     exist, so align-items:stretch pulls .mrk-featured-product-frame-wrapper ~18% taller than its
     content, overriding its own `aspect-ratio: auto !important` (mrk.css:88). The art stays pinned
     by its padding while the frame overlay (object-fit:contain, mrk.css:124) re-centres in the
     taller box — the print rides up/clips and a band shows below.

     Scoped to max-width:749px so it exactly complements base.css's min-width:750px rule (desktop
     untouched), and gated on :has(.mrk-featured-product-frame-wrapper) so unframed slides keep
     their existing behaviour. slideshow.js's --slide-height measurement then reads the corrected
     height automatically. */
  @media screen and (max-width: 749px) {
    .product-media-container:has(.mrk-featured-product-frame-wrapper) {
      display: block;
      aspect-ratio: auto;
      height: auto;
    }

    .mrk-featured-product-frame-wrapper {
      height: auto !important;
    }

    /* Belt-and-braces: `contain` letterboxes the overlay whenever the wrapper box isn't exactly
       the PNG's ratio (0.2% here), which shifts the frame off the padded art. `fill` makes it
       cover the wrapper exactly so the window always lands on the print. */
    .mrk-frame-wrapper .mrk-frame-image-item {
      object-fit: fill !important;
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quick-add-modal (INDEX:242) */
.mrk-frame-price-wrapper .mrk-frame-price{display:none}
    .mrk-frame-price-wrapper .mrk-frame-compare-price {
        text-decoration: none;
        padding-left: 0;
    }
    body:has(#mrk-framing-service:checked) .mrk-frame-price-wrapper .mrk-frame-compare-price {
      text-decoration: line-through;
      padding-left: 2px;
    }
    body:has(#mrk-framing-service:checked) .mrk-frame-price-wrapper .mrk-frame-price {
        display: revert;
    }
    .mrk-frame-price-wrapper:has(.mrk-frame-compare-price[data-price]:not([data-price=""])) .mrk-frame-price {
      display: revert;
    }
    .mrk-frame-price-wrapper:has(.mrk-frame-compare-price[data-price]:not([data-price=""])) .mrk-frame-compare-price {
      text-decoration: line-through;
      padding-left: 2px;
    } 

  /* NOTE: the arrows are NO LONGER force-shown in the modal. That override
     displayed the default-visible "next" arrow even when the swatches fit (the
     "arrows that do nothing" bug on mobile). Visibility is now driven purely by
     real overflow - refreshSwatchOverflow (mrk.js) toggles .mrk-enable-controls
     to reveal the container, and updateSwatchArrows toggles each arrow by scroll
     position - identical to the PDP. */

  /* Modal media (moved here from the old quick-add trigger snippet). */
  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

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

    @media screen and (max-width: 750px) {
      position: fixed;
      display: block;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      /* Cap to the dynamic viewport (dvh accounts for Safari's bottom toolbar)
         so the modal - and the add-to-cart at its bottom - never sits under the
         bar. A little under 100 leaves breathing room. */
      max-height: 100dvh;
      border-radius: 0;
    }
    
  }

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

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 750px) {
      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);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground);
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    transition: transform 0.15s var(--animation-timing-bounce), opacity 0.15s var(--animation-easing);
  }

  .quick-add-modal__close:active {
    transform: scale(0.8);
  }

  .quick-add-modal__close svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  /* When these popups open/close, focus moves programmatically onto the dialog,
     its close button, or the trigger - which browsers treat as :focus-visible
     and show a stray black outline for mouse/touch users. Suppress it on those
     container/trigger elements (the controls inside the modal keep their normal
     keyboard focus rings). */
  .quick-add-modal:is(:focus, :focus-visible),
  .quick-add-modal__close:is(:focus, :focus-visible),
  .mrk-quick-add-btn:is(:focus, :focus-visible),
  body:has(.quick-add-modal[open]) .popup-link__content:is(:focus, :focus-visible),
  body:has(.quick-add-modal[open]) .popup-link__close:is(:focus, :focus-visible),
  body:has(.quick-add-modal[open]) .popup-link__button:is(:focus, :focus-visible) {
    outline: none;
  }

  /* A size-chart / frame-info popup opened from inside the quick-add modal is
     sized to match it (same width + height) so the quick-add modal behind it
     doesn't peek around the edges - without blacking out the background (the
     normal semi-transparent backdrop is kept). Scoped via
     :has(.quick-add-modal[open]) so popups on the PDP are unaffected. */
  @media screen and (min-width: 750px) {
    body:has(.quick-add-modal[open]) .popup-link__content:not(.popup-link__content--drawer) {
      width: min(var(--wide-content-width), 92vw);
      max-width: var(--wide-content-width);
      min-width: 672px;
      height: 85vh;
      max-height: 85vh;
      overflow-y: auto;
    }

    /* Cap the quick-add modal to the same height so all three modals match. */
    .quick-add-modal[open] {
      max-height: 85vh;
    }

    /* With the cap above, let the content fill the modal and scroll internally
       so the "See full details" link below it isn't clipped. */
    .quick-add-modal[open]:has(#mrk-main-variant-data) .quick-add-modal__content {
      flex: 1 1 auto;
      min-height: 0;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    max-width: var(--wide-content-width);
    overflow-y: auto;
    max-height: 100vh;
    min-width: 672px;

    @media screen and (max-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      /* Add the iOS safe-area inset at the bottom so the add-to-cart clears the
         home indicator / toolbar. */
      padding-block: var(--padding-xl) calc(var(--padding-xl) + env(safe-area-inset-bottom, 0px));
      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: 95dvh;
      min-width: 95%;
    }
  }

  @media screen and (max-width: 750px) {
    .quick-add-modal__content fieldset.variant-option.variant-option--buttons.variant-option--equal-width-buttons {
      margin: 14px 0;
    }
  }

  .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: 750px) {
      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: 750px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .variant-picker__form {
    display: block;
  }

  .quick-add-modal__content fieldset {
    margin-top: var(--padding-lg);
  }

  .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;
    height: 100%;
    min-height: 0;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 750px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      overflow-y: auto;
      max-height: 100%;
      height: 100%;
    }
  }

  .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 .variant-picker {
    --product-swatches-padding-block-end: 0px;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-block-end: calc(
      var(--product-swatches-padding-block-end) + 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 {
    padding: 0;
  }

  .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 .view-product-title {
    display: flex;
  }

  /* These two rules strip a stock product down to title/price/variant/buy in the
     modal. The custom framing buy-box (detected by #mrk-main-variant-data) must
     show its frame picker, framing service, gallery-wall, accordion etc., so the
     hiding is disabled when that buy-box is present. */
  .quick-add-modal__content:not(:has(#mrk-main-variant-data))
    .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) {
      display: none !important;
    }
  }

  .quick-add-modal__content:not(:has(#mrk-main-variant-data))
    .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: min(var(--gap-2xl), var(--gap));
    }

    .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 .media-gallery--grid .product-media-container:first-child {
      border-top-right-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media-container:last-child {
      border-bottom-right-radius: var(--style-border-radius-popover, 0);
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding: var(--padding-2xl);
    max-height: 100%;
    @media screen and (max-width: 750px) {
      padding: var(--padding-lg) 0;
    }
  }

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

  /* Carousel: show one image at a time (below) with working nav arrows on both
     desktop and mobile. The gallery has pointer-events:none, so re-enable them
     on the arrows so they're clickable. */
  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: flex;
    pointer-events: auto;
    /* Base CSS sets mix-blend-mode:difference on <slideshow-arrows> (only reset
       for circle/square shapes; ours is shape none), which makes the buttons
       invert/blend with the image. Force normal so our solid black buttons show. */
    mix-blend-mode: normal;
  }

  /* Arrow buttons: round black background with a white chevron so they read
     clearly over the image instead of overlapping it. */
  .quick-add-modal__content .product-information__media slideshow-arrows .slideshow-control {
    width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease;
    mix-blend-mode: normal;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows .slideshow-control:hover {
    opacity: 1;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows .slideshow-control:active {
    transform: scale(0.92);
  }

  .quick-add-modal__content .product-information__media slideshow-arrows .slideshow-control svg {
    width: 1rem;
    height: 1rem;
    color: #fff;
  }

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

  /* Show only the active (first) image - on desktop as well as mobile. */
  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    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 slideshow-controls {
    display: none;
  }

  /* Mobile: restore the native swipe carousel (like the product page). The rules
     above stack the images vertically and disable touch for the desktop layout;
     undo that here so users can swipe horizontally between images. */
  @media screen and (max-width: 749px) {
    .quick-add-modal__content .product-information__media media-gallery {
      pointer-events: auto;
    }

    .quick-add-modal__content .product-information__media slideshow-slides {
      flex-direction: row;
      gap: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .quick-add-modal__content .product-information__media slideshow-slide {
      flex: 0 0 100%;
      width: 100%;
      scroll-snap-align: start;
      padding: 0 2px;
    }

    /* Keep every slide in the swipe track (the desktop rule hides inactive ones). */
    .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
      display: block;
    }

    /* Show the pagination dots so users know there are more images. */
    .quick-add-modal__content .product-information__media slideshow-controls {
      display: flex;
    }
  }

  /* Desktop: the default modal rules make the media an ABSOLUTE vertical stack,
     which structurally can't slide (arrows have nothing to scroll). Restructure
     it into a horizontal carousel of natural-size images so the arrows (and
     trackpad) slide the main image - like the product page. */
  @media screen and (min-width: 750px) {
    .quick-add-modal__content .product-information__media {
      overflow: visible;
    }

    .quick-add-modal__content .product-information__media media-gallery {
      position: static;
      inset: auto;
      pointer-events: auto;
    }

    .quick-add-modal__content .product-information__media slideshow-slides {
      flex-direction: row;
      gap: 0;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
    }

    .quick-add-modal__content .product-information__media slideshow-slide {
      flex: 0 0 100%;
      width: 100%;
      scroll-snap-align: start;
      /* Undo content-visibility:auto (set earlier for inactive slides), which
         collapses them to zero width and leaves nothing to scroll. */
      content-visibility: visible;
    }

    .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
      display: block;
    }

    .quick-add-modal__content .product-information__media slideshow-controls,
    .quick-add-modal__content .product-information__media slideshow-arrows {
      display: flex;
    }
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content:not(:has(#mrk-main-variant-data)) .text-block.rte:not(product-price),
  .quick-add-modal__content:not(:has(#mrk-main-variant-data)) .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

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

  /* Subtle "See full details" link to the PDP. Only meaningful for the framing
     buy-box; hidden for the stock modal which already shows a title link. */
  .drool-quick-see-details-wrapper {
    display: none;
  }

  /* Stack content + link vertically (desktop dialog is display:flex row). */
  .quick-add-modal:has(#mrk-main-variant-data) {
    @media screen and (min-width: 750px) {
      flex-direction: column;
    }
  }

  /* The framing buy-box renders the full PDP details (which include the title),
     so suppress the stock injected title link to avoid a duplicate title -
     mirroring the live PDP where .view-product-title is hidden. */
  .quick-add-modal__content:has(#mrk-main-variant-data) .view-product-title {
    display: none;
  }

  /* Utility: any element tagged with this class is hidden inside the quick-add
     modal only (stays visible on the PDP). Applied to the bundle and accordion
     blocks; add it to a block's CSS class in the editor to hide more. */
  .quick-add-modal__content .hide-in-quick-view {
    display: none !important;
  }

  /* The stock modal makes the variant picker an internal scroll area (sized for
     a short, simple picker). With the taller framing buy-box that produces an
     ugly inner scrollbar that clips the option labels. Let the picker flow and
     scroll the modal as a whole instead. */
  .quick-add-modal__content:has(#mrk-main-variant-data) .product-details {
    height: auto;
    max-height: none;
  }

  .quick-add-modal__content:has(#mrk-main-variant-data) .product-details .variant-picker {
    flex: 0 0 auto;
    overflow: visible;
    min-height: auto;
    padding-block-end: 0;
  }

  .quick-add-modal:has(#mrk-main-variant-data) .drool-quick-see-details-wrapper {
    display: flex;
    justify-content: center;
    /* Tighter gap to the CTA directly above it. */
    padding: var(--padding-2xs) var(--padding-xl) var(--padding-lg);
  }

  /* Desktop: centre the link under the Add to Cart / details column (the right
     ~4/7 of the modal grid) rather than under the whole modal width. */
  @media screen and (min-width: 750px) {
    .quick-add-modal:has(#mrk-main-variant-data) .drool-quick-see-details-wrapper {
      padding-inline-start: calc(3 / 7 * 100%);
      padding-inline-end: 0;
    }
  }

  .drool-quick-see-details {
    font-size: var(--font-size--sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-foreground);
    opacity: 0.7;
  }

  .drool-quick-see-details:hover {
    opacity: 1;
  }

  /* Quick-view CTA: buy buttons + "See full details" wrapped together
     (.mrk-quickview-cta, rendered by buy-buttons.liquid for the quick-view
     template). The buy-box provides its own "See full details" here, so hide
     the modal-shell one to avoid a duplicate. */
  .quick-add-modal:has(.mrk-quickview-cta) .drool-quick-see-details-wrapper {
    display: none;
  }

  .quick-add-modal__content .mrk-quickview-see-details {
    display: block;
    text-align: center;
    margin-top: var(--padding-2xs);
    font-size: var(--font-size--sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--color-foreground);
    opacity: 0.7;
  }

  .quick-add-modal__content .mrk-quickview-see-details:hover {
    opacity: 1;
  }

  /* Mobile only: pin the whole CTA group (buy buttons + link) to the very bottom
     of the modal, full width, so both stay visible while the details scroll. */
  @media screen and (max-width: 749px) {
    .quick-add-modal__content .mrk-quickview-cta {
      position: sticky;
      bottom: -1.25rem;
      z-index: 3;
      background: var(--color-background);
      margin-inline: calc(-1 * var(--padding-xl));
      padding: var(--padding-sm) var(--padding-xl) calc(var(--padding-2xs) + env(safe-area-inset-bottom, 0px));
    }
  }

  /* The reviews rating in the quick view links to #review-component, which
     doesn't exist in the modal - disable the link so it isn't clickable.
     The rating is a group block rendered AS the anchor itself (a.pdp-rating),
     so the underline lives on .pdp-rating - not a descendant .pdp-rating a -
     which is why the template-level ".pdp-rating a {text-decoration:none}"
     never removed it. Target the element itself here. */
  .quick-add-modal__content .pdp-rating,
  .quick-add-modal__content .pdp-rating a {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }

  /* ---- Loading overlay ------------------------------------------------- */
  .quick-add-modal__loader {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }

  .quick-add-modal__loader[hidden] {
    display: none;
  }

  /* Give the modal height while loading so the (empty) dialog doesn't collapse
     and clip the spinner - matters on mobile where min-height is otherwise unset. */
  .quick-add-modal:has([data-quick-add-loader]:not([hidden])) {
    min-height: 60vh;

    @media screen and (min-width: 750px) {
      min-height: 500px;
    }
  }

  .quick-add-modal__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgb(0 0 0 / 0.12);
    border-top-color: rgb(0 0 0 / 0.55);
    border-radius: 50%;
    animation: quick-add-spin 0.7s linear infinite;
  }

  @keyframes quick-add-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ---- Mobile: stack media + buy-box vertically (was squished in a row) - */
  @media screen and (max-width: 749px) {
    .quick-add-modal__content .product-information__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-lg);
    }
    .quick-add-modal__content{
      display: block;
    }
    .quick-add-modal__content .product-information__media,
    .quick-add-modal__content .product-details {
      grid-column: auto;
      grid-row: auto;
      width: 100%;
      max-width: 100%;
    }

    .quick-add-modal__content .product-details {
      overflow: visible;
      max-height: none;
    }
  }

  /* ---- Bundle builder "pack mode" -------------------------------------- */
  /* The bundle builder's print selector opens THIS quick-view modal to preview a
     print and add it to the current pack (not the cart). It flags the dialog with
     data-bb-pack (quick-add.js -> window.mrkOpenQuickAdd). In that mode we reveal the
     "Add to pack" CTA (rendered inside .mrk-quickview-cta by buy-buttons.liquid, so it
     inherits the mobile sticky and sits with "See full details") and hide the native buy
     path (Add to cart + framing service), since the pack owns its own material/framing
     and pricing. The size + frame pickers stay visible so the shopper's choice carries
     into the slot. */
  .bb-qv-add-to-pack-wrap {
    display: none;
  }

  #quick-add-dialog[data-bb-pack] .bb-qv-add-to-pack-wrap {
    display: block;
    margin-top: var(--padding-3xs);
  }

  #quick-add-dialog[data-bb-pack] .bb-qv-add-to-pack {
    width: 100%;
  }

  /* The product-details block can carry an inline max-height/overflow (sticky
     details), which in the modal would trap the size/frame pickers in a cramped
     scroll box. Let it flow so everything is visible in pack mode. */
  #quick-add-dialog[data-bb-pack] .product-details {
    max-height: none !important;
    overflow: visible !important;
  }


  /* Hide the native buy path in pack mode — but ONLY .buy-buttons-block, NOT the
     .mrk-quickview-cta wrapper around it: that wrapper also holds "Add to pack" and
     "See full details", and it's what carries the mobile sticky treatment. Hiding the
     wrapper is what previously lost both the link and the stickiness. */
  #quick-add-dialog[data-bb-pack] .buy-buttons-block,
  #quick-add-dialog[data-bb-pack] .mrk-framing-service-wrapper  {
    display: none !important;
  }

  /* ---- Dynamic-frame slide: let it size to the FRAME, not the art -----------------
     A framed preview composites the raw art (positioned by the % padding on
     .mrk-featured-media) under a frame PNG. Its true ratio is the FRAME's — e.g. the
     A-series landscape frame is 2500x1709 (1.4628) while the art is 1555x1100 (1.4136).

     base.css gives every slide `display: flex` + `aspect-ratio: var(--media-preview-ratio)`,
     and --media-preview-ratio is the ART's ratio. Flex `align-items: stretch` then pulls
     .mrk-featured-product-frame-wrapper to that taller box, overriding its own
     `aspect-ratio: auto !important` (mrk.css). The art stays pinned at the top by its
     percentage padding, so the surplus showed as a white band under the print while the
     frame PNG (height:100%, object-fit:contain) centred itself in the stretched box.

     Fix: on a slide that actually contains a dynamic frame, stop forcing the art ratio and
     stop stretching the wrapper — it then takes its natural (frame) height and the print
     sits in the frame exactly as it does on the product page, at every image ratio.
     Scoped to #quick-add-dialog so the PDP gallery and the cart are untouched. */
  #quick-add-dialog .product-media-container:has(.mrk-featured-product-frame-wrapper) {
    display: flex;      /* kill the flex stretch outright, not just align-items */
    aspect-ratio: auto;  /* don't force the ART ratio onto a FRAME-shaped composite */
    height: auto;
    max-height: none;
  }
  #quick-add-dialog .mrk-featured-product-frame-wrapper {
    height: auto !important;        /* size to the composite, never to the slide */
    aspect-ratio: auto !important;
    margin: auto !important;
  }
  /* The art is placed by PERCENTAGE PADDING on .mrk-featured-media, but the frame overlay is
     drawn with object-fit:contain (mrk.css). Contain letterboxes the frame whenever the wrapper
     box isn't exactly the PNG's ratio — and it never is: the composite works out to 1.4695 for
     this A-landscape print while the frame file is 2500x1709 = 1.4628. Padding-positioned art vs
     letterboxed frame are two different systems, so the window drifts off the art and the surplus
     shows as a white band. `fill` makes the overlay cover the wrapper exactly, so the frame's
     window always lands on the padded art at every ratio; the <0.5% stretch is imperceptible. */
  #quick-add-dialog .mrk-frame-wrapper .mrk-frame-image-item {
    aspect-ratio: auto !important;
    object-fit: fill !important;
  }

  /* Default BLACK frame preview, live-site parity.
     mrk.js:461 only applies the default preview while `window.__mrkFrameTouched` is false, and
     mrk.js:602 sets that flag permanently on the FIRST frame / framing-service click anywhere on
     the page — unavoidable once you've been building a pack. From then on an unframed print opens
     the quick view with no frame at all.

     Declarative restore: when NO frame image is active inside the modal, show the black one. It's
     self-disabling — the moment mrk.js activates a real frame the :has() stops matching, so a
     genuine Black/White/Oak choice is never overridden and nothing here fights the JS. Scoped to
     #quick-add-dialog, so the PDP gallery and cart are untouched. */
  #quick-add-dialog
    .mrk-featured-product-frame-wrapper:not(:has(.mrk-frame-image-item.mrk-active-gallery-frame))
    .mrk-frame-image-item[color='black'] {
    display: block !important;
  }

  /* ---- Shorter media on mobile -------------------------------------------------------
     Applies to EVERY quick view — bundle builder, home page, collection page — because this
     snippet is rendered from layout/theme.liquid and so loads on every page. It lived in
     blocks/bundle-builder.liquid first, which was the wrong home: a block's stylesheet only
     loads on the template that renders the block, so it could never have reached the quick
     view opened from a collection or the home page.

     WIDTH is the lever, never max-height. A framed preview composites the art under a frame
     PNG with the art placed by PERCENTAGE padding (--tb / --lr, see snippets/product-media.liquid),
     and CSS resolves percentage padding — top and bottom included — against the containing
     block's WIDTH. Capping the height would leave that padding where it was and slide the print
     out of the frame window. Reducing the width scales the whole composite together.

     Exactly ONE element is capped, on purpose. Capping the media COLUMN as well multiplied the
     two reductions together (60% x 60%) and left the print far too small on Android. .product-media
     is the right single box: on a framed slide it is the same element as
     .mrk-featured-product-frame-wrapper (product-media.liquid:30), and on an unframed one it is
     the image wrapper (product-media.liquid:100, which becomes .product-media-inner when a frame
     IS present) — so it is never nested inside itself and can only apply once.

     !important + the id: assets/drool.css:93 already sets `max-width: 320px !important` on this
     element. This selector carries an id (1-1-0), so it outranks that. */
  @media screen and (max-width: 749px) {
    #quick-add-dialog .product-media {
      max-width: var(--qv-media-width, 56%) !important;
      margin-inline: auto !important;
    }

    /* ---- Slides hug their content instead of boxing it ------------------------------
       On mobile <slideshow-slides> is a horizontal flex row holding EVERY slide at once, so
       the container takes the height of the TALLEST slide. base.css:1525 gives every
       .product-media-container `aspect-ratio: var(--gallery-aspect-ratio, --media-preview-ratio)`,
       and _product-media-gallery.liquid:319 falls back to `| default: 1.0` — SQUARE — for any
       media with no preview ratio. Measured on device: slide 0 (the framed print) was 316px at
       `ratio: auto`, slides 1-4 were 430px at `ratio: 1 / 1`, so the container sat at 430 and
       letterboxed the print in the surplus.

       The existing fix further up only clears the ratio for slides that contain a frame wrapper,
       i.e. slide 0. This clears it for the rest, so each slide is as tall as its own image and the
       row is no longer padded out by a square that isn't really square. */
    #quick-add-dialog .product-media-container {
      aspect-ratio: auto !important;
      height: auto !important;
    }

    /* The gallery block stretches every image to `height: 100%` + `object-fit: contain`
       (_product-media-gallery.liquid:154), so the image fills the box and letterboxes rather than
       setting the height. Releasing it lets the natural height come through.

       Deliberately NOT applied inside a framed slide: there the overlay PNG relies on covering the
       wrapper exactly (`object-fit: fill`, see the frame-fit rules above) so the frame's window
       lands on the padding-positioned art. Giving that overlay a natural height would drift the
       window off the print — the white-band bug. */
    #quick-add-dialog
      .product-media-container:not(:has(.mrk-featured-product-frame-wrapper))
      :is(img, video, iframe, .deferred-media__poster-image) {
      height: auto !important;
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:resource-card (INDEX:244) */
.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;
    }
  }

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

  .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:247) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

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

  /* Predictive search header tweaks for small screens */
  @media screen and (max-width: 749px) {
    .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;
      }
    }
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:248) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  .header__column--center .search-action {
    width: auto;
    flex-grow: 1;
  }

  :is(.header__column--left, .header__column--center) .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);
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:249) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:sorting (INDEX:257) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: flex;
    right: 0;
    flex-direction: column;
    gap: var(--margin-3xs);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    min-width: 180px;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-mobile-wrapper .sorting-filter__options {
    border-radius: var(--style-border-radius-popover);
    position: absolute;
    top: 0;
    right: 0;
    width: max-content;
    min-width: var(--facets-panel-min-width);
    max-width: var(--facets-panel-width);
    max-height: var(--facets-panel-height);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    padding: var(--padding-sm);
    gap: var(--gap-sm);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .sorting-filter__options {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: content-visibility var(--animation-speed-slow) allow-discrete,
      padding-block var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    block-size: auto;

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

    &:focus-within {
      overflow-y: visible;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:267) */
: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-width: 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:280) */
.variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    display: flex;
    flex-direction: column;
    /* gap: var(--padding-lg); */
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-3xs);
    margin: 0;
    padding: 0;
    border: none;
  }
  .variant-option--swatches{
    gap: var(--gap-sm);
  }
  .variant-option--buttons legend {
    padding: 0;
    font-weight: 600;
  }
  .mrk-variant-picker-header .popup-link__button {
    text-decoration: underline;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
  }

  dialog-component.popup-link {
      display: flex;
  }
  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
    display:none
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    --variant-picker-stroke-color: var(--color-variant-border);

    display: flex;
    flex: 0 0 calc(3ch + 1.3em);
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-height: calc(3ch + 1.3em);
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

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

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }
  .variant-option__button-label.variant-option__button-label--has-swatch {
    --variant-picker-stroke-color: var(--color-variant-border);

    display: flex;
    flex: 0 0 calc(3ch + 1.3em);
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    /* overflow: clip; */
    justify-content: center;
    min-height: calc(3ch + 1.3em);
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover .mrk-option-info{
      color: var(--color-selected-variant-background);
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }
  .variant-option__button-label__text {
    text-align: left;
    text-wrap: auto;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

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

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

  .variant-option__button-label.variant-option__button-label--has-swatch {
    padding: 0;
    border: none;
    display: block;
    flex-basis: auto;
    min-height: auto;
  }

   .variant-option__button-label:not(.variant-option__button-label--has-swatch):not(.mrk-size-option):has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }
  .variant-option__button-label.mrk-size-option:has(:checked) {
    &:not(:hover) .mrk-size-item-title{
      color: #aeaeae
    }
  }
  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .variant-option__button-label--has-swatch:hover .swatch {
    outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    /* outline: none; */
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }
  .variant-option__button-label--has-swatch:has(:checked){
    .mrk-option-info{
      color: var(--color-selected-variant-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-picker-stroke-color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));

    background-color: inherit;
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label input,
  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .variant-option__button-label svg {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .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;
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);
  }

  .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--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:video (INDEX:283) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:wd-nav-header-drawer (INDEX:287) */
.header__icon--menu {
      position: initial;
    }

    @media screen and (min-width: 750px) {
      .header--desktop header-menu + .header__drawer header-drawer {
        display: none;
      }
    }

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

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

    .header__drawer {
      display: flex;
      min-height: 60px;
      align-items: center;

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

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

    .menu-drawer__navigation {
      padding: 0;

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

    details:not([open]) .header__icon--menu .header-drawer-icon--close {
      display: none;
    }

    details[open] .header__icon--menu .header-drawer-icon--close {
      @media screen and (min-width: 750px) {
        display: none;
      }
    }

    details[open] .header__icon--menu .header-drawer-icon--open {
      display: none;

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

    .menu-drawer {
      position: fixed;
      transform: translateX(-100%);
      visibility: hidden;
      height: var(--drawer-height);
      width: var(--drawer-width);
      max-width: var(--drawer-max-width);
      z-index: var(--layer-menu-drawer);
      left: 0;
      top: 0;
      padding: 0;
      background-color: var(--color-background);
      overflow: auto;
      display: flex;
      border-right: var(--style-border-drawer);
      box-shadow: var(--shadow-drawer);
      flex-direction: column;

      @media screen and (min-width: 750px) {
        width: 25rem;
      }

      .header__drawer--desktop & {
        height: 100vh;
      }
    }

    .menu-drawer:has(details[open]) {
      /* overflow: initial; */
    }

    .menu-drawer__backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100dvh;
      backdrop-filter: brightness(0.75);
      z-index: var(--layer-heightened);
      opacity: 0;
      transition: opacity var(--drawer-animation-speed) ease;

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

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

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

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

    .menu-drawer__navigation-container {
      display: grid;
      grid-template-rows: 1fr auto;
      align-content: space-between;
      overflow-y: auto;
      height: 100%;
    }

    .menu-drawer__inner-submenu {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow-y: auto;

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

    .menu-drawer__nav-buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .menu-drawer-container[open] .menu-drawer__animated-element {
      animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
      animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
      animation-fill-mode: backwards;
    }

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

    .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
      min-height: calc(2.75 * var(--padding-lg) + var(--icon-size-xs));
    }
    @media(max-width: 769px){
      .menu-drawer-container * {
        --menu-top-level-font-size: var(--menu-font-md--size) !important;
        --menu-top-level-font-weight: 600;
      }
    }
    .menu-drawer__menu-item--mainlist {
      min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
      font-family: var(--menu-top-level-font-family);
      font-style: var(--menu-top-level-font-style);
      font-weight: var(--menu-top-level-font-weight);
      font-size: var(--menu-top-level-font-size);
      line-height: var(--menu-top-level-font-line-height);
      text-transform: var(--menu-top-level-font-case);
      color: var(--menu-top-level-font-color);
      justify-content: space-between;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .menu-drawer__close-button {
      background-color: transparent;
      color: var(--color-foreground);
      padding: var(--padding-xl);
      box-shadow: none;
      will-change: transform;
    }

    .menu-drawer__close-button .svg-wrapper,
    .menu-drawer__close-button svg {
      width: var(--icon-size-md);
      height: var(--icon-size-md);
    }

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

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

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

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

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

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

    .menu-drawer svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
    .menu-drawer__close-button svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }
    .menu-drawer__submenu {
      position: absolute;
      width: 100%;
      top: 0;
      height: 100dvh;
      left: 0;
      background-color: var(--color-background);
      z-index: var(--layer-flat);
      transform: translateX(-5%);
      visibility: hidden;
      overflow-y: auto;
      opacity: 0;
    }

    .menu-drawer__back-button > .svg-wrapper {
      margin-right: var(--padding-md);
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }

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

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

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

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

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

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

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

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

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

      100% {
        visibility: hidden;
        opacity: 0;
        transform: translateX(-1rem);
      }
    }
     .menu-featured-collections {
      display: flex;
      gap: 30px;
      overflow-x: auto;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding: 15px 0 15px 10px !important;
      background: #F4F4F4;
      scrollbar-width: thin;
      scrollbar-color: #ccc transparent
    }
    .menu-featured-collections::-webkit-scrollbar {
    display: none;
  }
   .menu-featured-collection-image{
      max-width: 60px;
      max-height: 60px;
      margin: 0 auto;
      width: 60px;;
   }
   a.ah-menu-feature-img {
      width: 100%;
      height: 100%;
      display: inline-block;
  }
   .menu-featured-collection-image img {
      border-radius: 100%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 1/1;
  }
    .menu-featured-collection-title {
      font-size: 12px;
      margin-top: 6px;
      font-weight: 700;
      position: relative;
    }
    .menu-featured-collection-title::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 6px;
      background-color: #f2ff00;
      z-index: 1;
  }
  .menu-featured-collection-title{
    text-align: center;
  }
  .menu-drawer__close-button {
      width: 100%;
      justify-content: end;
  }
/* END_SNIPPET:wd-nav-header-drawer */