/** Shopify CDN: Minification failed

Line 15548:2 Unexpected "{"
Line 15548:3 Expected identifier but found "%"
Line 15549:27 Unexpected "/"
Line 15551:57 Unterminated string token
Line 15552:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:breadcrumbs (INDEX:1) */
.breadcrumbs {
    --breadcrumbs-color: rgb(var(--color-foreground-rgb) / 0.6);
    --breadcrumbs-color-current: var(--color-foreground);
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--breadcrumbs-align, flex-start);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--typo-nav-font-family, var(--font-body--family));
    font-size: var(--typo-nav-font-size, 0.8125rem);
    line-height: var(--typo-nav-line-height, 1.2);
    letter-spacing: var(--typo-nav-letter-spacing, 0.02em);
    font-weight: var(--typo-nav-font-weight, var(--font-body--weight, 450));
    text-transform: var(--typo-nav-text-transform, none);
  }

  .breadcrumbs__item {
    display: inline-flex;
    align-items: center;
  }

  .breadcrumbs__link {
    color: var(--breadcrumbs-color);
    text-decoration: none;
    transition: color var(--animation-speed-medium) var(--animation-easing);
  }

  .breadcrumbs__link:hover,
  .breadcrumbs__link:focus-visible {
    color: var(--breadcrumbs-color-current);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .breadcrumbs__current {
    color: var(--breadcrumbs-color-current);
  }

  .breadcrumbs__sep {
    margin-inline: 0.5em;
    color: var(--breadcrumbs-color);
    user-select: none;
  }

  .breadcrumbs__sep.breadcrumbs__sep--icon {
    display: inline-flex;
    align-items: center;
  }

  .breadcrumbs__sep.breadcrumbs__sep--icon svg {
    width: auto;
    height: var(--font-size--md, 1rem);
  }

  .breadcrumbs__link.breadcrumbs__link--icon {
    display: inline-flex;
    align-items: center;
  }

  .breadcrumbs__link.breadcrumbs__link--icon svg {
    width: var(--font-size--lg, 1.125rem);
    height: var(--font-size--lg, 1.125rem);
  }

  @media (prefers-reduced-motion: reduce) {
    .breadcrumbs__link {
      transition: none;
    }
  }
/* END_SECTION:breadcrumbs */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:collection-sub-nav (INDEX:6) */
.collection-sub-nav {
    --collection-sub-nav-text: var(--color-foreground);
    --collection-sub-nav-border: var(--color-border);
    --collection-sub-nav-bg-hover: var(--color-foreground);
    --collection-sub-nav-fg-hover: var(--color-background);
  }

  .collection-sub-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--collection-sub-nav-align, center);
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    font-family: var(--typo-nav-font-family, var(--font-body--family));
    font-weight: var(--typo-nav-font-weight, var(--font-body--weight, 450));
    letter-spacing: var(--typo-nav-letter-spacing, normal);
  }

  .collection-sub-nav__item {
    display: inline-flex;
  }

  .collection-sub-nav__pill {
    display: inline-flex;
    align-items: center;
    color: var(--collection-sub-nav-text);
    background: transparent;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--animation-speed-medium, 200ms) var(--animation-easing, ease),
                color var(--animation-speed-medium, 200ms) var(--animation-easing, ease),
                border-color var(--animation-speed-medium, 200ms) var(--animation-easing, ease);
  }

  .collection-sub-nav--pill-outlined .collection-sub-nav__pill {
    border: 1px solid var(--collection-sub-nav-border);
    border-radius: var(--collection-sub-nav-radius, 999px);
    padding-block: var(--padding-xs);
    padding-inline: var(--padding-lg);
  }

  .collection-sub-nav--pill-filled .collection-sub-nav__pill {
    border: 1px solid transparent;
    border-radius: var(--collection-sub-nav-radius, 999px);
    padding-block: var(--padding-xs);
    padding-inline: var(--padding-lg);
    background: var(--color-background-secondary, transparent);
  }

  .collection-sub-nav--pill-text .collection-sub-nav__pill {
    border: none;
    padding-block: var(--padding-2xs);
    padding-inline: var(--padding-xs);
  }

  .collection-sub-nav--size-small .collection-sub-nav__pill {
    font-size: 0.8125rem;
    padding-block: 6px;
  }

  .collection-sub-nav--size-medium .collection-sub-nav__pill {
    font-size: 0.9375rem;
  }

  .collection-sub-nav--size-large .collection-sub-nav__pill {
    font-size: 1rem;
    padding-block: 10px;
    padding-inline: var(--padding-xl);
  }

  .collection-sub-nav--case-uppercase .collection-sub-nav__pill {
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .collection-sub-nav--case-capitalize .collection-sub-nav__pill {
    text-transform: capitalize;
  }

  .collection-sub-nav__pill:hover,
  .collection-sub-nav__pill:focus-visible {
    background: var(--collection-sub-nav-bg-hover);
    color: var(--collection-sub-nav-fg-hover);
    border-color: var(--collection-sub-nav-bg-hover);
  }

  .collection-sub-nav__pill--current {
    background: var(--collection-sub-nav-bg-hover);
    color: var(--collection-sub-nav-fg-hover);
    border-color: var(--collection-sub-nav-bg-hover);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-sub-nav__pill {
      transition: none;
    }
  }
/* END_SECTION:collection-sub-nav */

/* START_SECTION:dy-product-recs-tabs (INDEX:11) */
.dy-product-recs-tabs {
    display: block;
  }

  .dy-product-recs-tabs[hidden] {
    display: none;
  }

  .dy-product-recs-tabs__heading {
    margin-block-end: var(--margin-md);
    text-align: center;
  }

  .dy-product-recs-tabs__tablist {
    display: flex;
    justify-content: center;
    gap: var(--dy-recs-tab-gap, var(--padding-md));
    border-block-end: var(--style-border-width) solid var(--color-input-border);
    margin-block-end: var(--padding-xl);
  }

  .dy-product-recs-tabs__tablist[hidden] {
    display: none;
  }

  .dy-product-recs-tabs__tab {
    background: none;
    border: none;
    border-block-end: 2px solid transparent;
    color: var(--dy-recs-tab-color, var(--color-foreground));
    cursor: pointer;
    font: inherit;
    font-size: var(--dy-recs-tab-font-size, var(--font-size-static-sm));
    letter-spacing: var(--dy-recs-tab-letter-spacing, normal);
    margin-block-end: calc(-1 * var(--style-border-width));
    padding-block: var(--dy-recs-tab-padding, var(--padding-sm));
    padding-inline: 0;
    text-transform: var(--dy-recs-tab-text-transform, none);
    transition: color var(--animation-speed) ease, border-color var(--animation-speed) ease;
  }

  .dy-product-recs-tabs__tab[aria-selected='true'] {
    border-block-end-color: var(--dy-recs-tab-active-color, var(--color-foreground));
    color: var(--dy-recs-tab-active-color, var(--color-foreground));
    font-weight: var(--font-weight-semibold, 600);
  }

  .dy-product-recs-tabs__viewport {
    position: relative;
  }

  .dy-product-recs-tabs__grid {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dy-product-recs-tabs__grid--grid {
    display: grid;
    grid-template-columns: repeat(var(--dy-recs-columns-mobile, 2), 1fr);
    column-gap: var(--dy-recs-columns-gap, var(--padding-lg));
    row-gap: var(--dy-recs-rows-gap, var(--padding-lg));
  }

  @media screen and (min-width: 750px) {
    .dy-product-recs-tabs__grid--grid {
      grid-template-columns: repeat(var(--dy-recs-columns, 4), 1fr);
    }
  }

  .dy-product-recs-tabs__grid--carousel {
    display: flex;
    gap: var(--dy-recs-columns-gap, var(--padding-lg));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    container-type: inline-size;
    container-name: dy-product-recs-tabs;
  }

  .dy-product-recs-tabs__grid--carousel::-webkit-scrollbar {
    display: none;
  }

  .dy-product-recs-tabs__grid--carousel .dy-product-recs-tabs__item {
    flex: 0 0 clamp(150px, 60cqw, 320px);
    scroll-snap-align: start;
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .dy-product-recs-tabs__grid--carousel .dy-product-recs-tabs__item {
      flex-basis: calc(
        (100% - (var(--dy-recs-columns-gap, var(--padding-lg)) * (var(--dy-recs-columns, 4) - 1))) /
          var(--dy-recs-columns, 4)
      );
    }
  }

  .dy-product-recs-tabs__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: var(--layer-heightened);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background: var(--color-background);
    color: var(--color-foreground);
    box-shadow: 0 2px 12px rgb(0 0 0 / 15%);
    cursor: pointer;
  }

  .dy-product-recs-tabs__arrow .icon-caret {
    rotate: -90deg;
  }

  .dy-product-recs-tabs__arrow--prev .icon-caret {
    rotate: 90deg;
  }

  .dy-product-recs-tabs__arrow:hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }

  .dy-product-recs-tabs__arrow[disabled] {
    display: none;
  }

  .dy-product-recs-tabs__arrow--prev {
    inset-inline-start: 0.5rem;
  }

  .dy-product-recs-tabs__arrow--next {
    inset-inline-end: 0.5rem;
  }

  /* Title/price text alignment intentionally defers to each card block's own `alignment`
     setting in templates/product.card.json (applied by text.liquid via the inline --text-align
     variable on each .text-block). No section-level override here, so a brand controls title
     and price alignment per-block from its own product-card template rather than from this
     shared section. To force a fixed alignment regardless of the card settings, add a rule on
     `.dy-product-recs-tabs__item .text-block > *` (higher specificity than text.liquid's own
     `.text-block > *`), as cart-recommendations.liquid still does. */

  .dy-product-recs-tabs__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm, 0.7rem);
  }

  .dy-product-recs-tabs__skeleton-media {
    aspect-ratio: 4 / 5;
    inline-size: 100%;
    border-radius: var(--style-border-radius-card, 0);
  }

  .dy-product-recs-tabs__skeleton-line {
    block-size: 0.75rem;
    border-radius: var(--style-border-radius-sm, 0.25rem);
  }

  .dy-product-recs-tabs__skeleton-line--title {
    inline-size: 70%;
  }

  .dy-product-recs-tabs__skeleton-line--price {
    inline-size: 40%;
  }

  /* Shimmer base + sweep, mirroring assets/dy-plp.css's dy-skeleton pattern. The rgb() grey is the
     fallback for iOS < 16.4 (no color-mix); color-mix ties the tint to the theme foreground. */
  .dy-product-recs-tabs__skeleton-media,
  .dy-product-recs-tabs__skeleton-line {
    position: relative;
    overflow: hidden;
    background: rgb(128 128 128 / 12%);
    background: color-mix(in srgb, var(--color-foreground, #808080) 10%, transparent);
  }

  .dy-product-recs-tabs__skeleton-media::after,
  .dy-product-recs-tabs__skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 25%), transparent);
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--color-background, #ffffff) 60%, transparent),
      transparent
    );
  }

  @keyframes dy-product-recs-tabs-shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .dy-product-recs-tabs__skeleton-media::after,
    .dy-product-recs-tabs__skeleton-line::after {
      animation: dy-product-recs-tabs-shimmer 1.4s ease-in-out infinite;
    }
  }
/* END_SECTION:dy-product-recs-tabs */

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

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

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

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

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

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

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

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

/* START_SECTION:footer-utilities (INDEX:15) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);

    border-top: var(--border-width) solid var(--divider-color, var(--color-border));
    color: var(--color-foreground-muted);

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

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

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

    /* 4 blocks: Four equal columns, outer items at edges */
    .utilities--blocks-4 {
      grid-template-columns: repeat(4, 1fr);
    }

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

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

    /* 5–6 blocks: flex wrap with even spacing */
    .utilities--blocks-5,
    .utilities--blocks-6 {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:16) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

  .footer-content .menu__heading__default {
    font-weight: var(--font-heading--weight);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

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

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

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

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

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

  .announcement-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header-brands (INDEX:18) */
.brand-bar {
    display: none;
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  @media screen and (min-width: 990px) {
    .brand-bar {
      /* Restore the section grid (overridden by display:none above) so .section--page-width
         places the list in the centred content column, aligned with the rest of the header. */
      display: grid;
    }
  }

  .brand-bar__list {
    display: flex;
    align-items: stretch;
    justify-content: start;
    margin: 0;
    padding: 0;
  }

  .brand-bar__item {
    display: flex;
    align-items: stretch;
  }

  /* Divider between items — centred vertically via align-self */
  .brand-bar__item + .brand-bar__item::before {
    content: '';
    width: 1px;
    height: 1rem;
    align-self: center;
    background-color: currentColor;
    opacity: 0.2;
    flex-shrink: 0;
  }

  .brand-bar__link {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding-inline: var(--padding-lg, 24px);
    height: var(--brand-bar-height, 48px);
    transition: background-color var(--animation-speed, 0.2s) ease;
  }

  .brand-bar__link:hover,
  .brand-bar__link:focus-visible {
    background-color: var(--brand-bar-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .brand-bar__link {
      transition: none;
    }
  }
/* END_SECTION:header-brands */

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

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(
        :has(.menu-list__link:is(:hover, [aria-expanded='true']))
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

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

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

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

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

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .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-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

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

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

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

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

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

  /* Mobile/Desktop media visibility */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .hero__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:layered-slideshow (INDEX:21) */
.layered-slideshow-section {
    position: relative;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:lookbook-detail (INDEX:23) */
.lookbook-detail__hero {
    background-color: var(--color-lookbook-background);
    padding-block: 3rem;
  }

  .lookbook-detail__heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
  }

  .lookbook-detail__heading-tag {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .lookbook-detail__heading-label {
    font-family: var(--font-h2--family);
    font-style: var(--font-h2--style);
    font-weight: var(--font-h2--weight);
    font-size: var(--font-h2--size);
    line-height: var(--font-h2--line-height);
    letter-spacing: var(--font-h2--letter-spacing);
    text-transform: uppercase;
  }

  .lookbook-detail__looks {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .lookbook-detail__divider {
    width: 100%;
    margin: 0;
    border: none;
    border-block-start: 1px solid rgb(var(--color-border-rgb) / var(--opacity-15));
  }

  .lookbook-detail__row--paired {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 10px;
  }

  .lookbook-detail__related {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-block: 2rem;
  }

  .lookbook-detail__related-link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .lookbook-detail__related-image {
    width: 100%;
    height: auto;
    display: block;
  }

  .lookbook-detail__related-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1rem;
    color: var(--color-white);
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgb(0 0 0 / 0.5);
  }

  .lookbook-detail__description {
    max-width: var(--max-width--body-normal);
    margin-inline: auto;
    margin-block-end: 2rem;
    text-align: center;
  }

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

    .lookbook-detail__row--paired {
      grid-template-columns: 1fr 1fr;
    }
  }
/* END_SECTION:lookbook-detail */

/* START_SECTION:lookbook-index (INDEX:24) */
.lookbook-index__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .lookbook-index__item {
    border-block-start: 1px solid var(--color-black);
  }

  .lookbook-index__item:last-child {
    border-block-end: 1px solid var(--color-black);
  }

  @media screen and (min-width: 750px) {
    .lookbook-index__item:nth-child(odd) {
      border-inline-end: 0.5px solid var(--color-black);
    }

    .lookbook-index__item:nth-child(even) {
      border-inline-start: 0.5px solid var(--color-black);
    }

    .lookbook-index__item:nth-last-child(-n + 2) {
      border-block-end: 1px solid var(--color-black);
    }
  }

  .lookbook-index__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .lookbook-index__image {
    width: 100%;
    height: auto;
    display: block;
  }

  .lookbook-index__caption {
    display: flex;
    justify-content: space-between;
    padding-block: 20px;
    padding-inline: 25px;
    background-color: var(--color-lookbook-background);
    text-transform: uppercase;
  }

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

    .lookbook-index__caption {
      padding-inline: 80px;
    }
  }
/* END_SECTION:lookbook-index */

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

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

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

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

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

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

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

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

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

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

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    /* Mobile: full-width single column */
    --col-span: 6;
    --blog-post-card-scale: 0.5;
    grid-column: span var(--col-span);
    background-color: var(--color-background);
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  @media screen and (min-width: 750px) {
    .blog-post-item {
      /* Desktop: read per-item values set via inline style */
      --col-span: var(--col-span-md, 2);
      --blog-post-card-scale: var(--scale-md, 0.6);
    }
  }

  /* Remove border and padding when the card contains an image. */
  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }

  /**
   * Grid layout: equal-width image tiles with the title overlaid at the bottom.
   * Title and image rendering come from the Title and Image blocks, so their
   * settings (typography, colour, border) are honoured here too.
   */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(var(--blog-grid-mobile-cols), 1fr);
    gap: var(--rows-gap) var(--columns-gap);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media screen and (min-width: 750px) {
    .blog-grid {
      grid-template-columns: repeat(var(--blog-grid-cols), 1fr);
    }
  }

  /* Featured group + "More articles" divider that leads the grid. */
  .blog-grid--featured {
    margin-block-end: var(--rows-gap);
  }

  .blog-grid__divider {
    margin-block: var(--gap-2xl) var(--gap-xl);
    text-align: center;
    text-wrap: balance;
  }
/* END_SECTION:main-blog */

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

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

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

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

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

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

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

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

  /* On mobile (single column) the order summary would otherwise sit between the
     items and the Offers / recommendation blocks; push it to the end so it reads
     items → offers → recommendations → summary. */
  @media screen and (max-width: 749px) {
    .cart-page__summary {
      order: 1;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:mobile-mega-menu (INDEX:34) */
.mobile-mega-menu__overlay {
    position: fixed;
    inset: 0;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--animation-speed-slow) ease,
      visibility var(--animation-speed-slow) ease;
    z-index: var(--layer-overlay);
  }

  .mobile-mega-menu__overlay.is-active {
    opacity: 1;
    visibility: visible;
  }

  .mobile-mega-menu {
    /* Declared on the drawer root so it inherits to BOTH the header (min-height)
       and the panel (inset), which are siblings — the panel is reparented by JS
       and would otherwise only see the var via its own ancestor chain. */
    --mm-header-height: 56px;
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 100%;
    max-width: var(--mm-drawer-max-width, 420px);
    height: 100dvh;
    background: var(--color-background);
    transform: translateX(100%);
    transition: transform var(--animation-speed-slow) ease;
    z-index: var(--layer-menu-drawer);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .mobile-mega-menu.is-active {
    transform: translateX(0);
  }

  .mobile-mega-menu__header {
    display: flex;
    align-items: center;
    gap: var(--padding-2xs);
    padding: var(--padding-md) var(--padding-2xs);
    min-height: var(--mm-header-height);
    flex-shrink: 0;
  }

  .mobile-mega-menu__title {
    flex: 1;
    font-family: var(--font-body--family);
    font-size: var(--menu-font-md--size);
    color: var(--color-foreground-heading);
    text-transform: uppercase;
  }

  .mobile-mega-menu__back,
  .mobile-mega-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mm-icon-btn-size, 32px);
    height: var(--mm-icon-btn-size, 32px);
    padding: var(--padding-2xs);
    background: transparent;
    border: none;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    color: var(--color-foreground-heading);
  }

  .mobile-mega-menu__back[hidden] {
    display: none;
  }

  .mobile-mega-menu__back:focus-visible,
  .mobile-mega-menu__close:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  .mobile-mega-menu__root {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--padding-lg);
    display: flex;
    flex-direction: column;
  }

  /* Sliding sub-panels overlay the whole drawer below the header. */
  .mobile-mega-menu__panel {
    position: absolute;
    inset: var(--mm-header-height, 56px) 0 0;
    background: var(--color-background);
    overflow-y: auto;
    padding: var(--padding-md) var(--padding-lg);
    transform: translateX(100%);
    transition: transform var(--animation-speed-slow) ease;
  }

  .mobile-mega-menu__panel.is-active {
    transform: translateX(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-mega-menu__overlay,
    .mobile-mega-menu,
    .mobile-mega-menu__root,
    .mobile-mega-menu__panel {
      transition-duration: 0.01ms;
    }
  }
/* END_SECTION:mobile-mega-menu */

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

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

    > a {
      display: flex;
    }

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

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

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

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

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

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

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

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

/* START_SECTION:product-hotspots (INDEX:39) */
.section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:40) */
sticky-add-to-cart {
    --sticky-bar-overshoot: 20px;
    --sticky-bar-image-size: 5rem;
    --sticky-bar-button-min-width: 18rem;
    --sticky-bar-backdrop-blur: 20px;
    --sticky-bar-backdrop-saturate: 180%;
    --sticky-bar-backdrop-brightness: 1.5;
  }

  .sticky-add-to-cart__bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    max-inline-size: none;
    border-radius: 0;
    opacity: 0;
    transform: translateY(calc(100% + var(--sticky-bar-overshoot)));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    box-shadow: var(--shadow-popover);
    padding-block: var(--padding-2xl);
    padding-inline: max(var(--page-margin), calc((100% - var(--crg-page-width, var(--page-width, 82.5rem))) / 2));
    display: flex;
    align-items: center;
    gap: var(--gap-xl);

    @starting-style {
      opacity: 0;
      transform: translateY(calc(100% + var(--sticky-bar-overshoot)));
    }

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

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

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

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

  /* Specificity override: top-position unavailable state must translate up, not down */
  sticky-add-to-cart[data-position='top']:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    transform: translateY(-100%);
  }

  /* Top position — slides down from above the viewport */
  sticky-add-to-cart[data-position='top'] .sticky-add-to-cart__bar {
    inset-block-start: 0;
    inset-block-end: auto;
    transform: translateY(-100%);

    @starting-style {
      opacity: 0;
      transform: translateY(-100%);
    }
  }

  sticky-add-to-cart[data-position='top'] .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateY(0);
    /* Above --layer-menu-drawer (18) so the bar stays visible over the sticky header on scroll-up */
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

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

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

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

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

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

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

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
    margin-block-start: var(--margin-3xs);
  }

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

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      &::before {
        --border: 1px;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:product-recs-tabs (INDEX:43) */
.product-recs-tabs__tablist {
    display: flex;
    justify-content: center;
    gap: var(--product-recs-tab-gap, var(--padding-md));
    border-block-end: var(--style-border-width) solid var(--color-input-border);
    margin-block-end: var(--padding-xl);
  }

  .product-recs-tabs__tab {
    background: none;
    border: none;
    border-block-end: 2px solid transparent;
    color: var(--product-recs-tab-color, var(--color-foreground));
    cursor: pointer;
    font: inherit;
    font-size: var(--product-recs-tab-font-size, var(--font-size-static-sm));
    letter-spacing: var(--product-recs-tab-letter-spacing, normal);
    margin-block-end: calc(-1 * var(--style-border-width));
    padding-block: var(--product-recs-tab-padding, var(--padding-sm));
    padding-inline: 0;
    text-transform: var(--product-recs-tab-text-transform, none);
    transition: color var(--animation-speed) ease, border-color var(--animation-speed) ease;
  }

  .product-recs-tabs__tab[aria-selected="true"] {
    border-block-end-color: var(--product-recs-tab-active-color, var(--color-foreground));
    color: var(--product-recs-tab-active-color, var(--color-foreground));
    font-weight: var(--font-weight-semibold, 600);
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .product-recs-tabs__tab {
      transition-duration: 0.01ms;
    }

    .product-recs-tabs__skeleton-item {
      animation: none;
    }
  }

  .product-recs-tabs__skeleton {
    display: grid;
    grid-template-columns: var(--resource-list-columns-mobile, repeat(2, 1fr));
    gap: var(--resource-list-column-gap-desktop, 8px);
  }

  @media screen and (min-width: 750px) {
    .product-recs-tabs__skeleton {
      grid-template-columns: var(--resource-list-columns, repeat(5, 1fr));
    }
  }

  .product-recs-tabs__skeleton-item {
    aspect-ratio: 2 / 3;
    background: var(--color-background-2, var(--color-input-border));
    border-radius: var(--style-border-radius);
    animation: product-recs-tabs-pulse 1.5s ease-in-out infinite;
  }

  @keyframes product-recs-tabs-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* carousel_gutter slider.
     The resource-list-carousel snippet sets --gutter-slide-width as an inline style on its
     own wrapper div; children inherit that value. Setting --gutter-slide-width directly on
     slideshow-slides via a CSS rule wins over the inherited value, allowing the section
     setting to override the snippet default (--util-page-margin-offset ≈ 40px on desktop).
     0 px = first card flush with the content column edge (centered appearance);
     higher values inset the first card the way a standard full-bleed carousel would.
     safe center additionally centres cards when too few to overflow. */
  .product-recs-tabs slideshow-slides {
    --gutter-slide-width: var(--product-recs-carousel-gutter, var(--util-page-margin-offset));
    justify-content: safe center;
  }
/* END_SECTION:product-recs-tabs */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:reveal-list (INDEX:45) */
.reveal-list__heading {
    margin: 0 0 var(--gap-2xl, 3rem);
    text-align: center;
    font-family: var(--reveal-heading-font, inherit);
    font-size: var(--reveal-heading-size, inherit);
    font-weight: var(--reveal-heading-weight, inherit);
    letter-spacing: var(--reveal-heading-letter-spacing, normal);
    text-transform: var(--reveal-heading-case, none);
  }

  .reveal-item {
    position: relative;
    text-align: left;
  }

  .reveal-item__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .reveal-item__title {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    text-decoration: none;
    color: inherit;
    font-family: var(--reveal-title-font, inherit);
    /* Mobile card label: cap the (desktop-tuned) title size so long names stay
       readable on a narrow card. Desktop restores the full size below. */
    font-size: min(var(--reveal-title-size, 1rem), 1.25rem);
    font-weight: var(--reveal-title-weight, 400);
    letter-spacing: var(--reveal-title-letter-spacing, normal);
    text-transform: var(--reveal-title-case, none);
  }

  .reveal-item__number {
    font-family: var(--reveal-number-font, inherit);
    font-size: var(--reveal-number-size, 0.7em);
    font-weight: var(--reveal-number-weight, inherit);
    letter-spacing: var(--reveal-number-letter-spacing, normal);
    text-transform: var(--reveal-number-case, none);
    font-variant-numeric: tabular-nums;
  }

  /* ── Mobile: horizontal scroll-snap carousel (image card + title below) ── */
  .reveal-list__items {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 16px;
  }

  .reveal-list__items::-webkit-scrollbar {
    display: none;
  }

  .reveal-item {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }

  .reveal-item__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-block-end: var(--gap-md, 1rem);
  }

  .reveal-item__title {
    justify-content: flex-start;
  }

  /* "Learn more" affordance — only shown on the mobile card when a link is set.
     display:block forces it onto its own line below the title (the underline still
     hugs the text, not the full card width). */
  .reveal-item__more {
    display: block;
    width: fit-content;
    margin-block-start: var(--gap-xs, 0.5rem);
    color: inherit;
    font-family: var(--reveal-title-font, inherit);
    font-size: 0.875rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }

  /* ── Desktop: vertical hover-reveal list ── */
  @media screen and (min-width: 750px) {
    .reveal-list__items {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--reveal-row-gap, 48px);
      overflow: visible;
      padding-inline: 0;
    }

    .reveal-item {
      flex: 0 0 auto;
      text-align: center;
    }

    .reveal-item__more {
      display: none;
    }

    .reveal-item__media {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: var(--reveal-size, 180px);
      height: var(--reveal-size, 180px);
      aspect-ratio: auto;
      margin-block-end: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      z-index: var(--layer-flat, 1);
    }

    /* Alternate the reveal side per row — the image is anchored fully outside the
       title box (100% = the item's edge), so the offset is an outward gap and never
       overlaps the text. Logical properties so the sides mirror correctly in RTL. */
    .reveal-list__items > *:nth-child(odd) .reveal-item__media {
      inset-inline-start: 100%;
      margin-inline-start: var(--reveal-offset-inline, 2vw);
    }

    .reveal-list__items > *:nth-child(even) .reveal-item__media {
      inset-inline-end: 100%;
      margin-inline-end: var(--reveal-offset-inline, 2vw);
    }

    .reveal-item:hover .reveal-item__media,
    .reveal-item:focus-within .reveal-item__media {
      opacity: 1;
    }

    /* Restore the full, section-controlled title size on desktop */
    .reveal-item__title {
      font-size: var(--reveal-title-size, 1rem);
    }
  }

  /* Intentional: gate on `reduce` (only the reveal fade needs suppressing) rather
     than wrapping the base in `no-preference` — simpler and equivalent here. */
  @media (prefers-reduced-motion: reduce) {
    .reveal-item__media {
      transition: none;
    }
  }
/* END_SECTION:reveal-list */

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:status-guide (INDEX:51) */
/* Scoped with the section class (not just the bare heading class) so this
     reliably wins against base.css's global `h2 { color: var(--color); }` rule
     regardless of stylesheet load order. */
  .section-status-guide .status-guide__heading {
    text-align: center;
    margin: 0 0 var(--padding-2xl, 40px);
    color: var(--status-guide-heading-color, inherit);
  }

  .status-guide__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--padding-lg, 20px);
  }

  @media screen and (max-width: 749px) {
    .status-guide__grid {
      padding-inline: var(--page-margin);
    }
  }

  @media screen and (min-width: 750px) {
    .status-guide__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      width: 60%;
      margin-inline: auto;
    }
  }
/* END_SECTION:status-guide */

/* START_SECTION:store-detail (INDEX:52) */
.store-detail__layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
  }

  .store-detail__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    flex: 0 0 auto;
    padding-inline: var(--page-margin);
  }

  .store-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    color: currentColor;
    text-decoration: none;
  }

  /* <noscript> fallback for the country-mismatch redirect in the Liquid above. */
  .store-detail__redirect-notice {
    padding-inline: var(--page-margin);
    padding-block: 2rem;
  }

  .store-detail__back-icon {
    width: 25px;
    height: 25px;
  }

  .store-detail__intro {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .store-detail__name {
    margin: 0;
    font-size: 1.125rem;
  }

  .store-detail__address {
    margin: 0;
  }

  .store-detail__map {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 24rem;
    min-width: 0;
  }

  .store-detail__map-frame,
  .store-detail__map-canvas {
    width: 100%;
    height: 100%;
    border: 0;
  }

  @media screen and (min-width: 750px) {
    .store-detail__layout {
      flex-direction: row;
      gap: 0;
    }

    .store-detail__content {
      max-width: min(max(33.333%, var(--sidebar-width)), var(--narrow-content-width));
    }

    .store-detail__map {
      height: 45rem;
    }
  }
/* END_SECTION:store-detail */

/* START_SECTION:store-locator (INDEX:53) */
store-locator {
    --border-color: rgb(var(--color-border-rgb) / var(--opacity-15));
  }

  .store-locator__admin-warning {
    border: 1px solid var(--color-error);
    color: var(--color-error);
    padding: 1rem;
    margin-block-end: 1.5rem;
    margin-inline: var(--page-margin);
  }

  .store-locator__layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .store-locator__sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    flex: 0 0 auto;
  }

  .store-locator__header {
    padding-inline: var(--page-margin);
  }

  .store-locator__intro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.5rem;
  }

  .store-locator__heading {
    margin: 0;
  }

  .store-locator__az {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9375rem;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
  }

  .store-locator__search {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-end: 1.5rem;
  }

  .store-locator__geolocate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    background: var(--color-foreground);
    color: var(--color-background);
    border: none;
    padding-inline: 1rem;
    font-size: 0.9375rem;
    cursor: pointer;
  }

  .store-locator__geolocate-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1.05rem;
  }

  .store-locator__geolocate-wrapper {
    position: relative;
    display: block;
  }

  .store-locator__location-notice {
    --store-locator-location-notice-max-width: 300px;
    --store-locator-location-notice-gap: 0.75rem;
    --store-locator-location-notice-arrow-size: 10px;
    --store-locator-location-notice-native-fallback-top: calc(
      anchor(bottom) + var(--store-locator-location-notice-gap)
    );
    --store-locator-location-notice-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--store-locator-location-notice-gap)
    );

    inset: unset;
    top: var(--store-locator-location-notice-top, var(--store-locator-location-notice-native-fallback-top));
    left: max(
      calc(var(--store-locator-location-notice-max-width) / 2 + 1rem),
      min(anchor(center), calc(100vw - var(--store-locator-location-notice-max-width) / 2 - 1rem))
    );
    width: min(var(--store-locator-location-notice-max-width), calc(100vw - 2rem));
    margin: 0;
    padding: 1.25rem 2.5rem 1.25rem 1.25rem;
    color: var(--color-foreground);
    background: var(--color-background);
    border: 1px solid currentColor;
    border-radius: 0;
    /* Chrome's UA stylesheet for [popover] defaults to overflow: auto, which would clip the
       arrow pseudo-element below since it's positioned outside the box bounds. */
    overflow: visible;
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 -0.5rem;
    transform: translateX(-50%);
  }

  @supports not (position-anchor: --store-locator-geolocate-trigger) {
    .store-locator__location-notice {
      position: fixed;
      top: var(--store-locator-location-notice-fixed-fallback-top);
      left: max(
        calc(var(--store-locator-location-notice-max-width) / 2 + 1rem),
        min(
          calc((var(--anchor-left) + var(--anchor-width) / 2) * 1px),
          calc(100vw - var(--store-locator-location-notice-max-width) / 2 - 1rem)
        )
      );
    }
  }

  .store-locator__location-notice:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .store-locator__location-notice:popover-open {
      opacity: 0;
      translate: 0 -0.5rem;
    }
  }

  /* Half-diamond pointer: a rotated square with only two adjacent borders visible, matching
     the tooltip arrow technique used by the PDP BNPL popover (blocks/bnpl-price-bar.liquid).
     Points up by default (popover sits below the trigger, horizontally centred, on mobile). */
  .store-locator__location-notice::before {
    content: '';
    position: absolute;
    top: calc(var(--store-locator-location-notice-arrow-size) / -2 - 1px);
    left: 50%;
    width: var(--store-locator-location-notice-arrow-size);
    height: var(--store-locator-location-notice-arrow-size);
    background: var(--color-background);
    border-inline-start: 1px solid currentColor;
    border-block-start: 1px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
  }

  @media screen and (min-width: 750px) {
    /* Desktop: popover sits to the right of the trigger, vertically centred on it, with the
       pointer on its left edge instead of its top edge. */
    .store-locator__location-notice {
      top: anchor(center);
      left: min(
        calc(anchor(right) + var(--store-locator-location-notice-gap)),
        calc(100vw - var(--store-locator-location-notice-max-width) - 1rem)
      );
      width: auto;
      max-width: var(--store-locator-location-notice-max-width);
      transform: translateY(-50%);
    }

    @supports not (position-anchor: --store-locator-geolocate-trigger) {
      .store-locator__location-notice {
        top: calc((var(--anchor-top) + var(--anchor-height) / 2) * 1px);
        left: min(
          calc((var(--anchor-left) + var(--anchor-width)) * 1px + var(--store-locator-location-notice-gap)),
          calc(100vw - var(--store-locator-location-notice-max-width) - 1rem)
        );
      }
    }

    .store-locator__location-notice::before {
      top: 50%;
      left: calc(var(--store-locator-location-notice-arrow-size) / -2 - 1px);
      border-inline-start: 1px solid currentColor;
      border-block-start: none;
      border-block-end: 1px solid currentColor;
      transform: translateY(-50%) rotate(45deg);
    }
  }

  .store-locator__location-notice-close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target, 2.75rem);
    height: var(--minimum-touch-target, 2.75rem);
    color: var(--color-foreground);
    cursor: pointer;
  }

  .store-locator__location-notice-close svg {
    width: 1rem;
    height: 1rem;
  }

  .store-locator__location-notice-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .store-locator__search-field {
    position: relative;
  }

  .store-locator__search-input {
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    padding-inline: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .store-locator__suggestions {
    position: absolute;
    z-index: var(--layer-raised);
    inset-inline: 0;
    top: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-background);
    border: 1px solid var(--border-color);
    border-top: 0;
    max-height: 15rem;
    overflow-y: auto;
  }

  .store-locator__suggestion {
    padding: 0.625rem 1rem;
    cursor: pointer;
  }

  .store-locator__suggestion--active,
  .store-locator__suggestion:hover {
    background: var(--card-bg-hover);
  }

  .store-locator__count {
    margin: 0;
  }

  .store-locator__tabs {
    display: none;
  }

  .store-locator[data-active-tab] .store-locator__tabs {
    display: flex;
    justify-content: center;
    gap: 5rem;
    border-bottom: 1px solid var(--border-color);
    padding-block-end: 0.3rem;
  }

  .store-locator__tab {
    background: none;
    border: none;
    padding: 0;
    font-size: 1.0625rem;
    color: var(--color-foreground-muted);
    cursor: pointer;
  }

  .store-locator__tab[aria-selected="true"] {
    color: var(--color-foreground);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.5rem;
  }

  .store-locator[data-active-tab="store"] .store-locator__map {
    display: none;
  }

  .store-locator[data-active-tab="map"] .store-locator__store-panel {
    display: none;
  }

  .store-locator__list {
    display: flex;
    flex-direction: column;
    max-height: 45rem;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .store-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-inline-start: 5px solid transparent;
    padding-block: 1.5rem;
    padding-inline-start: 0;
    padding-inline-end: var(--page-margin);
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
  }

  .store-card--static {
    cursor: default;
  }

  @media (prefers-reduced-motion: no-preference) {
    .store-card {
      transition: background-color var(--animation-values-slow), border-inline-start-color var(--animation-values-slow);
    }
  }

  .store-card:not(.store-card--static):hover,
  .store-card:not(.store-card--static):focus-visible,
  .store-card--active {
    background-color: var(--card-bg-hover);
    border-inline-start-color: var(--color-foreground);
  }

  .store-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding-inline-start: var(--page-margin);
  }

  .store-card__name {
    display: block;
    font-size: 1.125rem;
  }

  .store-card__distance {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .store-card__distance[hidden] {
    display: none;
  }

  .store-card__distance-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  .store-card__address {
    display: block;
  }

  .store-card__chevron {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    color: var(--color-foreground);
  }

  .store-locator__map {
    flex: 1 1 auto;
    position: static;
    height: 20rem;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .store-locator__map-placeholder {
    color: var(--color-foreground-muted);
  }

  @media screen and (min-width: 750px) {
    .store-locator__layout {
      flex-direction: row;
      align-items: stretch;
      gap: 0;
    }

    .store-locator__sidebar-group {
      max-width: min(max(33.333%, var(--sidebar-width)), var(--narrow-content-width));
      gap: 1.5rem;
    }

    .store-locator__header {
      padding-block-start: 1.5rem;
    }

    .store-locator__map {
      position: sticky;
      top: 1rem;
      height: auto;
      min-height: 45rem;
      width: auto;
    }

    .store-locator[data-active-tab] .store-locator__tabs {
      display: none;
    }

    .store-locator[data-active-tab="store"] .store-locator__map {
      display: flex;
    }

    .store-locator[data-active-tab="map"] .store-locator__store-panel {
      display: block;
    }

    .store-locator__item:first-child {
      border-top: 1px solid var(--border-color);
    }

    .store-card__distance-icon {
      width: 25px;
      height: 25px;
    }
  }
/* END_SECTION:store-locator */

/* START_SECTION:tier-benefits-accordion (INDEX:55) */
/* Scoped with the section class (not just the bare heading class) so this
     reliably wins against base.css's global `h2 { color: var(--color); }` rule
     regardless of stylesheet load order. */
  .section-tier-benefits-accordion .tier-benefits-accordion__heading {
    text-align: center;
    margin-block-end: var(--padding-xl);
    color: var(--tier-benefits-accordion-heading-color, inherit);
  }

  .section-tier-benefits-accordion .details__header {
    color: var(--tier-benefits-accordion-title-color, inherit);
  }

  @media screen and (max-width: 749px) {
    .section-tier-benefits-accordion .accordion {
      margin-inline: var(--full-page-margin-inline-offset);
      width: calc(100% - (var(--full-page-margin-inline-offset) * 2));
      padding-inline: 24px;
    }
  }
/* END_SECTION:tier-benefits-accordion */

/* START_SECTION:tier-benefits-tabs (INDEX:56) */
/* Scoped with the section class (not just the bare heading class) so this
     reliably wins against base.css's global `h2 { color: var(--color); }` rule
     regardless of stylesheet load order. */
  .section-tier-benefits-tabs .tier-benefits-tabs__heading {
    text-align: center;
    margin-block-end: var(--padding-xl);
    color: var(--tier-benefits-tabs-heading-color, inherit);
  }

  .tier-benefits-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: min-content;
    column-gap: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .tier-benefits-tabs {
      width: 60%;
      margin-inline: auto;
    }
  }

  .tier-benefits-tabs__tab {
    grid-row: 1;
    width: 100%;
    background: none;
    border: none;
    border-block-end: 2px solid transparent;
    color: var(--tier-benefits-tab-color, var(--color-foreground));
    cursor: pointer;
    font: inherit;
    padding-block: var(--padding-sm);
    padding-inline: 0;
  }

  .tier-benefits-tabs__tab[aria-selected='true'] {
    color: var(--tier-benefits-tab-active-color, var(--tier-benefits-tab-color, var(--color-foreground)));
    border-block-end-color: var(--tier-benefits-tab-active-color, var(--tier-benefits-tab-color, var(--color-foreground)));
  }

  .tier-benefits-tabs__panel {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    gap: var(--padding-lg);
    margin-block-start: var(--padding-xl);
  }

  .tier-benefits-tabs__panel[hidden] {
    display: none;
  }

  .tier-benefits-tabs__panel-text,
  .tier-benefits-tabs__panel-image {
    width: 50%;
  }

  .tier-benefits-tabs__panel-text ol {
    padding-left: 0;
    list-style-position: inside;
  }

  .tier-benefits-tabs__panel-text ol li {
    margin-block-end: var(--padding-sm, 12px);
  }

  .tier-benefits-tabs__panel-image img {
    width: 100%;
    height: auto;
    display: block;
  }
/* END_SECTION:tier-benefits-tabs */

/* START_SECTION:timeline (INDEX:57) */
.timeline__header {
    margin-block-end: var(--gap-lg, 1.5rem);
  }

  .timeline__heading {
    margin: 0;
    color: var(--timeline-heading-color, inherit);
  }

  .timeline__marquee {
    display: block;
    width: 100%;
    overflow: hidden;
  }

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

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

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

  @media (prefers-reduced-motion: no-preference) {
    .timeline__marquee: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:timeline */

/* CSS from block stylesheet tags */
/* START_BLOCK:_announcement (INDEX:59) */
.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:_announcement_links (INDEX:61) */
.announcement-bar__links {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .announcement-bar__links {
      display: flex;
      align-items: center;
      gap: var(--padding-lg, 24px);
      flex-shrink: 0;
    }
  }

  .announcement-bar__utility-link {
    font-family: var(--announcement-links-font-family, var(--font-subheading--family, var(--font-body--family)));
    font-size: var(--announcement-links-font-size, 0.75rem);
    font-weight: var(--announcement-links-font-weight, var(--font-subheading--weight, 500));
    letter-spacing: var(--announcement-links-letter-spacing, 0.04em);
    text-transform: var(--announcement-links-text-transform, uppercase);
    color: var(--announcement-links-color, var(--color-foreground));
    text-decoration: none;
    white-space: nowrap;
  }

  .announcement-bar__utility-link:hover,
  .announcement-bar__utility-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.125em;
  }
/* END_BLOCK:_announcement_links */

/* START_BLOCK:_announcement_slider (INDEX:62) */
.announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: 100%;
  }

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

  .announcement-bar__slide {
    transition: opacity var(--animation-speed) ease-in-out, visibility var(--animation-speed) ease-in-out;
    place-content: center;
    --text-align: center;
    text-align: center;
    /* Default: hidden (prevents flash of all stacked slides) */
    opacity: 0;
    visibility: hidden;
  }

  @media screen and (min-width: 990px) {
    .announcement-bar__slide {
      --text-align: left;
      text-align: left;
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .announcement-bar__slide {
      transition-duration: 0.01ms;
    }
  }

  /* Show first slide before JS sets aria-hidden attributes */
  .announcement-bar__slide:first-child {
    opacity: 1;
    visibility: visible;
  }

  /* JS-driven state — these come after :first-child so they win at equal specificity */
  .announcement-bar__slide[aria-hidden='false'] {
    opacity: 1;
    visibility: visible;
  }

  .announcement-bar__slide[aria-hidden='true'] {
    opacity: 0;
    visibility: hidden;
  }

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

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_BLOCK:_announcement_slider */

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

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

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

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

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

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

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

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

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

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

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

  /**
   * Tile layout (grid blog): image fills the tile, title overlaid at the bottom.
   * The Image and Title blocks render normally, so their settings still apply.
   */
  .blog-post-card--tile {
    position: relative;
    height: 100%;
  }

  .blog-post-card--tile .blog-post-card__tile-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }

  .blog-post-card--tile .blog-post-card__image-container,
  .blog-post-card--tile .blog-post-card__image-placeholder {
    aspect-ratio: var(--blog-tile-ratio, 2 / 3);
    overflow: hidden;
  }

  .blog-post-card--tile .blog-post-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .blog-post-card--tile .blog-post-card__image-placeholder {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .blog-post-card--tile .blog-post-card__title-bar {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 0.75rem 1rem;
    background-color: var(--blog-tile-overlay, rgb(0 0 0 / 0.4));
    text-align: var(--blog-tile-text-align, center);
    /* Default to light text for contrast on the overlay; a custom Title colour overrides this. */
    --color-foreground: rgb(255 255 255);
  }

  .blog-post-card--tile .blog-post-card__tile-link:focus-visible {
    outline: 2px solid rgb(var(--color-background-rgb, 255 255 255));
    outline-offset: -2px;
  }

  .blog-post-card--tile .blog-post-card__title-bar .text-block > * {
    text-align: var(--blog-tile-text-align, center);
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:64) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

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

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

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

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

  .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:67) */
.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:68) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

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

/* START_BLOCK:_bnpl-provider (INDEX:70) */
.bnpl-provider {
    display: flex;
    align-items: center;
  }

  .bnpl-provider:not(:last-child) {
    border-inline-end: 1px solid var(--color-border);
    padding-inline-end: var(--padding-md);
  }

  .bnpl-provider:not(:first-child) {
    padding-inline-start: var(--padding-md);
  }

  .bnpl-provider__logo {
    display: block;
    height: 1.5em;
    width: auto;
    object-fit: contain;
  }

  .bnpl-provider__link {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:_bnpl-provider */

/* START_BLOCK:_brand-item (INDEX:71) */
.brand-bar__logo {
    display: block;
    height: var(--brand-bar-logo-height, 16px);
    width: auto;
    object-fit: contain;
    /* Sister brands are dimmed; the active (current site) brand stays full opacity. */
    opacity: 0.6;
    transition: opacity var(--animation-speed, 0.2s) ease;
  }

  .brand-bar__link:hover .brand-bar__logo,
  .brand-bar__link:focus-visible .brand-bar__logo,
  .brand-bar__link--active .brand-bar__logo {
    opacity: 1;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .brand-bar__logo {
      transition: none;
    }
  }
/* END_BLOCK:_brand-item */

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

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

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

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

  .card__inner {
    flex: 1;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_cart-summary (INDEX:75) */
/* Summary title — full width and centred, matching the live Mimco "Order
     Summary" heading. Typography (size/weight/family) comes from the chosen
     type preset class; this only handles placement within the summary column. */
  .cart-summary__heading {
    width: 100%;
    margin: 0;
    text-align: center;
  }

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

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

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

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

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

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

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

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

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      /* Content height (not height: 100%) so the sticky inner is shorter than the
         viewport and can pin to the top while the taller items column scrolls
         past. The extend panel (.cart-summary--extend) keeps its own full height
         for the background/border. */
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      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);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: 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;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:76) */
.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;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

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

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

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

/* START_BLOCK:_collection-image (INDEX:79) */
.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:81) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_footer-social-icons (INDEX:93) */
.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:94) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_header-menu (INDEX:95) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

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

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

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

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

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

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

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

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

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

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

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

    display: flex;
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

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

    background-color: transparent;
  }

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

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

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    width: 200px;
  }

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

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:98) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  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:102) */
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:107) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

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

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

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

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

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

/* START_BLOCK:_search-input (INDEX:113) */
.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:114) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

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

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

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

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

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

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

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

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

/* START_BLOCK:_status-tier (INDEX:116) */
.status-tier {
    text-align: center;
    max-width: 135px;
    margin-inline: auto;
  }

  .status-tier__circle {
    background-color: var(--color-background);
    color: var(--color-foreground);
    width: 120px;
    height: 120px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: var(--font-weight-medium, 500);
  }

  @media screen and (min-width: 750px) {
    .status-tier {
      max-width: 180px;
    }

    .status-tier__circle {
      width: 180px;
      height: 180px;
    }
  }

  .status-tier__caption {
    margin: var(--padding-lg, 20px) 0 0;
    font-weight: var(--font-weight-medium, 500);
  }
/* END_BLOCK:_status-tier */

/* START_BLOCK:_tier-benefits-tab (INDEX:117) */
.tier-benefits-tab {
    display: contents;
  }
/* END_BLOCK:_tier-benefits-tab */

/* START_BLOCK:_timeline-entry (INDEX:118) */
.timeline-entry {
    flex-shrink: 0;
    width: var(--timeline-card-width, 235px);
    white-space: normal;
    text-align: start;
  }

  /* --timeline-image-ratio is an intentional override hook; it defaults to 3/4.
     A merchant-facing ratio setting can be added later if mixed orientations are
     needed, so the property is left unset by design (review: orphan-var noted). */
  .timeline-entry__image {
    display: block;
    width: 100%;
    aspect-ratio: var(--timeline-image-ratio, 3 / 4);
    object-fit: cover;
  }

  .timeline-entry .placeholder-image {
    display: block;
    width: 100%;
    aspect-ratio: var(--timeline-image-ratio, 3 / 4);
  }

  .timeline-entry__text {
    margin-block-start: var(--timeline-image-text-gap, 0.75rem);
  }

  .timeline-entry__year {
    margin: 0 0 var(--gap-2xs, 0.25rem);
    font-weight: 600;
    color: var(--timeline-year-color, inherit);
  }

  .timeline-entry__caption {
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
    color: var(--timeline-caption-color, inherit);
  }
/* END_BLOCK:_timeline-entry */

/* START_BLOCK:app-exclusive-qr (INDEX:122) */
.app-exclusive-qr {
    display: block;
    /* Intentionally not a merchant colour token — a QR code's quiet zone must
       stay white regardless of colour scheme, or scanners can fail to read it. */
    --app-exclusive-qr-border-color: #ffffff;
    border: 8px solid var(--app-exclusive-qr-border-color);
  }
/* END_BLOCK:app-exclusive-qr */

/* START_BLOCK:back-link (INDEX:123) */
.back-link {
    display: inline-flex;
  }

  .back-link__anchor {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    cursor: pointer;
    overflow: visible;
  }

  .back-link__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
  }

  .back-link--button-unstyled .back-link__anchor {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
/* END_BLOCK:back-link */

/* START_BLOCK:bnpl-price-bar (INDEX:124) */
.bnpl-price-bar {
    display: block;
  }

  .bnpl-price-bar--divider {
    padding-block-end: var(--padding-md);
    border-block-end: 1px solid var(--color-border);
  }

  .bnpl-price-bar__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }

  .bnpl-price-bar__message {
    margin: 0;
  }

  .bnpl-price-bar__popover-anchor {
    display: inline-flex;
  }

  .bnpl-price-bar__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
  }

  .bnpl-price-bar__trigger-label {
    border-block-end: 1px solid currentColor;
  }

  .bnpl-price-bar__trigger .svg-wrapper,
  .bnpl-price-bar__trigger .svg-wrapper > svg {
    width: 1.4em;
    height: 1.4em;
  }

  .bnpl-price-bar__popover {
    --bnpl-price-bar-popover-max-width: 360px;
    --bnpl-price-bar-popover-gap: 8px;
    --bnpl-price-bar-popover-viewport-margin: 16px;
    --bnpl-price-bar-popover-arrow-size: 10px;
    --bnpl-price-bar-popover-close-size: 24px;
    --bnpl-price-bar-popover-native-fallback-top: calc(anchor(bottom) + var(--bnpl-price-bar-popover-gap));
    --bnpl-price-bar-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--bnpl-price-bar-popover-gap)
    );

    position: fixed;
    inset: unset;
    top: var(--bnpl-price-bar-popover-top, var(--bnpl-price-bar-popover-native-fallback-top));
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-lg);
    padding-inline-end: calc(var(--bnpl-price-bar-popover-close-size) + var(--padding-sm));
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border-radius: 4px;
    border: 1px solid currentColor;
    overflow: visible;
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 8px;
  }

  @supports not (position-anchor: --bnpl-price-bar-trigger) {
    .bnpl-price-bar__popover {
      top: var(--bnpl-price-bar-popover-fixed-fallback-top);
      left: max(
        var(--bnpl-price-bar-popover-viewport-margin),
        min(
          calc(var(--anchor-left) * 1px),
          calc(100vw - var(--bnpl-price-bar-popover-max-width) - var(--bnpl-price-bar-popover-viewport-margin))
        )
      );
      right: auto;
      max-inline-size: min(
        var(--bnpl-price-bar-popover-max-width),
        calc(100vw - (var(--bnpl-price-bar-popover-viewport-margin) * 2))
      );
    }
  }

  .bnpl-price-bar__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  @starting-style {
    .bnpl-price-bar__popover:popover-open {
      opacity: 0;
      translate: 0 8px;
    }
  }

  .bnpl-price-bar__popover::before {
    content: '';
    position: absolute;
    top: calc(var(--bnpl-price-bar-popover-arrow-size) / -2 - 1px);
    left: var(--bnpl-price-bar-arrow-left, 50%);
    width: var(--bnpl-price-bar-popover-arrow-size);
    height: var(--bnpl-price-bar-popover-arrow-size);
    background: var(--color-background);
    border-inline-start: 1px solid currentColor;
    border-block-start: 1px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
  }

  .bnpl-price-bar__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bnpl-price-bar-popover-close-size);
    height: var(--bnpl-price-bar-popover-close-size);
    color: var(--color-foreground);
    cursor: pointer;
  }

  .bnpl-price-bar__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .bnpl-price-bar__close svg {
    width: 100%;
    height: 100%;
  }

  .bnpl-price-bar__popover-intro,
  .bnpl-price-bar__popover-subtext {
    margin: 0 0 var(--gap-sm) 0;
    padding-inline-end: var(--padding-lg);
    font-size: var(--font-size--sm);
    line-height: 1.5;
  }

  .bnpl-price-bar__providers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: var(--gap-sm) 0 0 0;
    padding: 0;
  }
/* END_BLOCK:bnpl-price-bar */

/* START_BLOCK:cart-recommendations (INDEX:129) */
.cart-recommendations {
    display: block;
  }

  .cart-recommendations[hidden] {
    display: none;
  }

  .cart-recommendations__heading {
    margin-block-end: var(--margin-md);
    text-align: center;
  }

  .cart-recommendations__grid {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cart-recommendations__grid--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-recommendations__grid--grid {
      grid-template-columns: repeat(var(--cart-recommendations-columns, 4), 1fr);
    }
  }

  .cart-recommendations__grid--carousel {
    display: flex;
    gap: var(--padding-lg);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    container-type: inline-size;
    container-name: cart-recommendations;
    cursor: grab;
  }

  .cart-recommendations__grid--carousel.cart-recommendations__grid--dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
  }

  .cart-recommendations__grid--carousel::-webkit-scrollbar {
    display: none;
  }

  .cart-recommendations__grid--carousel .cart-recommendations__item {
    flex: 0 0 clamp(150px, 60cqw, 320px);
    scroll-snap-align: start;
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .cart-recommendations__grid--carousel .cart-recommendations__item {
      flex-basis: calc(
        (100% - (var(--padding-lg) * (var(--cart-recommendations-columns, 4) - 1))) / var(--cart-recommendations-columns, 4)
      );
    }
  }

  .cart-recommendations__viewport {
    position: relative;
  }

  .cart-recommendations__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: var(--layer-heightened);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: none;
    background: var(--color-background);
    color: var(--color-foreground);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  .cart-recommendations__arrow .icon-caret {
    rotate: -90deg;
  }

  .cart-recommendations__arrow--prev .icon-caret {
    rotate: 90deg;
  }

  /* Override product.card.json's center-aligned title/price. text.liquid sets --text-align as
     an inline style on .text-block itself, so overriding the variable on an ancestor doesn't
     work. Instead, override text-align directly on .text-block > * with higher specificity
     (0,2,1) than text.liquid's own .text-block > * rule (0,1,1). */
  .cart-recommendations__item .text-block > * {
    text-align: var(--cart-recommendations-text-align, left);
  }

  /* Override .spacing-style's padding-block shorthand (0,1,0) with higher specificity (0,2,1)
     so the merchant can add space above the product image from the block settings rather
     than having to navigate to the product card template to change it there. */
  .cart-recommendations__item .card-gallery {
    padding-block-start: var(--cart-recommendations-image-padding-top, 0px);
  }

  /* That padding pushes the image down, but the top-anchored badges are absolutely
     positioned against the gallery's padding-box top and only offset by the card's own
     --padding-block-start (0 here, set inline on the DY card), so they'd float above the
     image. Add the same image spacing so they stay inside the image. Bottom-anchored
     badges are unaffected (padding-block-end stays 0). */
  .cart-recommendations__item .card-gallery .product-badges--top-left,
  .cart-recommendations__item .card-gallery .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--cart-recommendations-image-padding-top, 0px));
  }

  /* Reveal quick-add on recommendation cards even though global settings.quick_add is off.
     Scoped to galleries that have the injected component so sold-out cards (which get no
     <template data-dy-quick-add> and therefore no injection) are unaffected. */
  .cart-recommendations__item .card-gallery:has(quick-add-component) {
    --quick-add-display: flex;
    --quick-add-mobile-display: flex;
    --quick-add-mobile-opacity: 1;
  }

  .cart-recommendations__arrow:hover {
    background: var(--color-foreground);
    color: var(--color-background);
  }

  .cart-recommendations__arrow[disabled] {
    display: none;
  }

  .cart-recommendations__arrow--prev {
    left: 0.5rem;
  }

  .cart-recommendations__arrow--next {
    right: 0.5rem;
  }

  .cart-recommendations__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm, 0.7rem);
  }

  .cart-recommendations__skeleton-media {
    aspect-ratio: 4 / 5;
    inline-size: 100%;
    border-radius: var(--style-border-radius-card, 0);
  }

  .cart-recommendations__skeleton-line {
    block-size: 0.75rem;
    border-radius: var(--style-border-radius-sm, 0.25rem);
  }

  .cart-recommendations__skeleton-line--title {
    inline-size: 70%;
  }

  .cart-recommendations__skeleton-line--price {
    inline-size: 40%;
  }

  /* Shimmer base + sweep, mirroring assets/dy-plp.css's dy-skeleton pattern. rgba grey is the
     fallback for iOS < 16.4 (no color-mix); color-mix ties the tint to the theme foreground. */
  .cart-recommendations__skeleton-media,
  .cart-recommendations__skeleton-line {
    position: relative;
    overflow: hidden;
    background: rgba(128, 128, 128, 0.12);
    background: color-mix(in srgb, var(--color-foreground, #808080) 10%, transparent);
  }

  .cart-recommendations__skeleton-media::after,
  .cart-recommendations__skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--color-background, #ffffff) 60%, transparent),
      transparent
    );
  }

  @keyframes cart-recommendations-shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .cart-recommendations__skeleton-media::after,
    .cart-recommendations__skeleton-line::after {
      animation: cart-recommendations-shimmer 1.4s ease-in-out infinite;
    }
  }
/* END_BLOCK:cart-recommendations */

/* START_BLOCK:collection-faqs (INDEX:131) */
.collection-faqs {
    display: flex;
    flex-direction: column;
    gap: var(--accordions-gap, 8px);
  }

  .collection-faqs__heading {
    margin: 0;
  }

  .collection-faqs .details {
    border-radius: var(--details-border-radius);
    background-color: var(--color-background);
  }

  .collection-faqs .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);
    border-radius: var(--details-border-radius);
    padding-block: var(--accordion-row-padding-block-start) var(--accordion-row-padding-block-end);
    padding-inline: var(--accordion-row-padding-inline-start) var(--accordion-row-padding-inline-end);
  }

  @media (prefers-reduced-motion: no-preference) {
    .collection-faqs .details {
      transition: background-color var(--animation-speed-slow) var(--animation-easing), box-shadow var(--animation-speed-slow) var(--animation-easing);
    }

    .collection-faqs .details__header {
      transition: border-radius var(--animation-speed-slow) var(--animation-easing);
    }
  }

  .collection-faqs .details__header .svg-wrapper {
    flex-shrink: 0;
  }

  .collection-faqs [open] .details__header {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .collection-faqs details[open] {
    box-shadow: 0 2px 8px 0 rgb(var(--color-shadow-rgb) / var(--opacity-15));
  }

  .collection-faqs .details-content {
    padding-block: var(--padding-md);
    padding-inline: calc(var(--accordion-row-padding-inline-start) + var(--padding-md)) calc(var(--accordion-row-padding-inline-end) + var(--padding-md));
  }

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

  .collection-faqs.accordion--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:collection-faqs */

/* START_BLOCK:comparison-slider (INDEX:133) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    color: var(--handle-color, var(--color-foreground));
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

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

/* START_BLOCK:contact-form (INDEX:135) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:disclosures (INDEX:137) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

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

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:dismiss-button (INDEX:138) */
/* Overlay placement anchors the button to a corner, so the host section needs
     a positioning context. Inline placement leaves it in the content flow. */
  .shopify-section:has(.dismiss-button--overlay) {
    position: relative;
  }

  /* Robust hide: beats a `.shopify-section { display: ... }` rule by specificity. */
  .shopify-section[hidden] {
    display: none;
  }

  .dismiss-button.dismiss-button--overlay {
    position: absolute;
    inset-block-start: 0;
    z-index: var(--layer-raised, 2);
  }

  .dismiss-button.dismiss-button--overlay.dismiss-button--right {
    inset-inline-end: 0;
  }

  .dismiss-button.dismiss-button--overlay.dismiss-button--left {
    inset-inline-start: 0;
  }

  .dismiss-button.dismiss-button--inline {
    display: inline-flex;
    vertical-align: middle;
  }

  /* Size drives the icon dimensions via a custom property; the button padding
     stays constant so all sizes share a consistent tap target. */
  .dismiss-button.dismiss-button--small {
    --dismiss-button-icon-size: 0.75rem;
  }

  .dismiss-button.dismiss-button--medium {
    --dismiss-button-icon-size: 1rem;
  }

  .dismiss-button.dismiss-button--large {
    --dismiss-button-icon-size: 1.5rem;
  }

  .dismiss-button__button {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Keep a comfortable tap target (>=44px) even at the smallest icon size. */
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: var(--padding-sm, 0.75rem);
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .dismiss-button__icon {
    display: block;
    width: var(--dismiss-button-icon-size, 1rem);
    height: var(--dismiss-button-icon-size, 1rem);
    /* Let clicks/hover fall through to the button so the pointer cursor shows. */
    pointer-events: none;
  }
/* END_BLOCK:dismiss-button */

/* START_BLOCK:email-signup (INDEX:139) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

  .email-signup__heading {
    color: var(--color, inherit);
    padding-block: var(--padding-sm);
  }

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

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

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

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

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

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

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

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

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

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

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

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

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

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

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

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

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

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

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

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

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

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

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

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

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

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

  .email-signup__button.button-unstyled:hover {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

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

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

/* START_BLOCK:filters (INDEX:141) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

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

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    flex-wrap: wrap;
    column-gap: var(--gap-sm);
    row-gap: var(--gap-2xs);
    justify-content: space-between;
    align-items: center;
    min-height: var(--minimum-touch-target);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  /* Dissolve the controls wrapper's box on mobile so Filter, grid and sort become
     direct flex children of .facets-toggle and spread evenly (space-between).
     display: contents leaves the DOM tree intact, so descendant selectors and the
     section-rendering relocation lookups still resolve. */
  .facets-toggle .facets-mobile-wrapper {
    display: contents;
  }

  /* Product count sits on its own row, centred, beneath the Filter / grid / sort
     controls. Higher specificity than the base `.products-count-wrapper { display: none }`. */
  .facets-toggle .facets-toggle__count {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .facets-toggle__wrapper {
    margin-inline-start: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

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

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

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

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

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

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

  /* Collection controls bar (vertical filter style) stacks into three rows on desktop:
     row 1 grid density + sort, row 2 applied filter chips, row 3 centred product count. */
  .collection-controls-bar {
    @media screen and (min-width: 750px) {
      flex-direction: column;
      align-items: stretch;
      gap: var(--padding-xs);
    }
  }

  .collection-controls-bar__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--facets-form-horizontal-gap);
  }

  /* Sort control in the controls bar: show the "Sort" label by default, and once a
     non-default sort is selected (.facets__panel--sorted) show the selected option
     name in its place. The status override beats `.desktop\:hidden { …!important }`. */
  .collection-controls-bar .sorting-filter .facets__panel--sorted .facets__status {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: inline-block !important;
      font-size: var(--font-paragraph--size);
    }
  }

  .collection-controls-bar .sorting-filter .facets__panel--sorted .facets__label {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .collection-controls-bar__applied {
    display: flex;
    flex-wrap: wrap;
  }

  /* Collapse the applied-filters row when there are no active filter chips. */
  .collection-controls-bar__applied:not(:has(.facets-remove__pill)) {
    display: none;
  }

  /* filter-remove-buttons is hidden inside horizontal facets by default
     (.facets--horizontal .facets-remove { display: none }); re-show it here so the
     applied-filter chips render in the controls bar. Higher specificity than that rule. */
  .collection-controls-bar .collection-controls-bar__applied .facets-remove {
    @media screen and (min-width: 750px) {
      display: flex;
      padding: 0;
      margin: 0;
    }
  }

  .collection-controls-bar .products-count-wrapper.collection-controls-bar__count {
    @media screen and (min-width: 750px) {
      display: flex;
      justify-content: center;
      width: 100%;
      margin: 0;
    }
  }

  .collection-controls-bar__applied-label {
    align-self: center;
    white-space: nowrap;
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  /* Un-hide the clear-all link that filter-remove-buttons renders at the end of chips */
  .collection-controls-bar .collection-controls-bar__applied .facets__clear-all-link {
    @media screen and (min-width: 750px) {
      display: inline-flex;
      align-items: center;
    }
  }

  .facets--vertical {
    display: none;

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

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

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

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

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

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

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


  /* 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-family: var(--facets-summary-font-family);
    font-style: var(--facets-summary-font-style);
    font-weight: var(--facets-summary-font-weight);
    font-size: var(--facets-summary-font-size, var(--font-h5--size));
    letter-spacing: var(--facets-summary-letter-spacing, 0em);
    text-transform: var(--facets-summary-text-transform);
    color: var(--facets-summary-color, var(--color-foreground));
    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(--facets-summary-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);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  .facets__summary .icon-plus-minus {
    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);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .facets--drawer .facets__summary .icon-plus-minus {
    margin-inline-start: var(--margin-2xs);
  }

  .facets__summary .icon-plus-minus__minus {
    display: none;
  }

  details[open] > summary .icon-plus-minus__plus {
    display: none;
  }

  details[open] > summary .icon-plus-minus__minus {
    display: block;
  }

  /* 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 .checkbox__label-text,
  .facets__pill-label,
  .facets__image-label,
  .facets__swatch-label {
    font-family: var(--facets-option-font-family);
    font-style: var(--facets-option-font-style);
    font-weight: var(--facets-option-font-weight);
    font-size: var(--facets-option-font-size);
    letter-spacing: var(--facets-option-letter-spacing, 0em);
    text-transform: var(--facets-option-text-transform);
  }

  .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__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__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(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

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

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Facets - Label */
  .facets__label {
    color: var(--facets-summary-color, var(--color-foreground));
    cursor: pointer;
    white-space: nowrap;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  /* 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(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  .facets--vertical .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --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;
    }
  }

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

  /* The Filters heading is rendered inside .facets--horizontal and relocated by
     <collection-layout> JS into the sidebar above the filter panel. When there is
     no category sidebar the JS never runs, so hide it in-place to prevent it from
     appearing as an extra row in the controls bar. */
  .facets--horizontal .facets--filters-title {
    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);
    }
  }

  /* Facets - Actions */
  .facets__drawer-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
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-block-start: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

    @media screen and (min-width: 990px) {
      display: none;
    }
  }
/* END_BLOCK:filters */

/* START_BLOCK:find-in-store (INDEX:142) */
.find-in-store__button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .find-in-store-dialog__panel {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: 0;
    background-color: var(--color-background);
    padding: var(--padding-sm) var(--padding-lg);
    max-width: calc(100% - 1rem);
    max-height: 97dvh;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xl) var(--padding-3xl);
      width: 660px;
      height: 440px;
      max-width: 660px;
      max-height: 440px;
    }
  }

  .find-in-store-dialog__panel[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .find-in-store-dialog__panel.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .find-in-store-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-md);
    margin-block-end: var(--margin-lg);
  }

  .find-in-store-dialog__heading {
    margin: 0;
  }

  .find-in-store-dialog__back {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
    color: currentColor;
    cursor: pointer;
  }

  .find-in-store-dialog__back svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  /*
   * Matches snippets/dy-search-box.liquid's close button convention (in-flow flex button,
   * not the shared position:fixed `.close-button`), which sizes its icon at --icon-size-sm —
   * noticeably bigger than --icon-size-xs, the base `.close-button`'s icon size.
   */
  .find-in-store-dialog__close {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: flex-end;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .find-in-store-dialog__close svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  /* Default to the list view: hide the detail-view header/content, show the list-view ones. */
  .find-in-store-dialog__header--detail,
  [data-find-in-store-details] {
    display: none;
  }

  .find-in-store-dialog:not([data-view='list']) .find-in-store-dialog__header--list,
  .find-in-store-dialog:not([data-view='list']) .find-in-store-dialog__search,
  .find-in-store-dialog:not([data-view='list']) .find-in-store-dialog__count,
  .find-in-store-dialog:not([data-view='list']) [data-find-in-store-list] {
    display: none;
  }

  .find-in-store-dialog:not([data-view='list']) .find-in-store-dialog__header--detail {
    display: flex;
  }

  .find-in-store-dialog:not([data-view='list']) [data-find-in-store-details] {
    display: block;
  }

  .find-in-store-dialog__search {
    position: relative;
    margin-block-end: var(--margin-md);
  }

  .find-in-store-dialog__search-input {
    width: 100%;
    height: 45px;
    box-sizing: border-box;
    padding-inline: var(--padding-md);
    border: 1px solid rgb(var(--color-border-rgb) / var(--opacity-15));
    border-radius: 0;
  }

  .find-in-store-dialog[data-maps-unavailable] .find-in-store-dialog__search {
    display: none;
  }

  .find-in-store-dialog__suggestions {
    position: absolute;
    z-index: var(--layer-raised);
    inset-inline: 0;
    top: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-background);
    border: 1px solid rgb(var(--color-border-rgb) / var(--opacity-15));
    border-top: 0;
    max-height: 15rem;
    overflow-y: auto;
  }

  .find-in-store-dialog__suggestion {
    padding: var(--padding-sm) var(--padding-md);
    cursor: pointer;
  }

  .find-in-store-dialog__suggestion--active,
  .find-in-store-dialog__suggestion:hover {
    background: var(--card-bg-hover);
  }

  .find-in-store-dialog__count {
    margin: 0 0 var(--margin-2xl);
  }

  .find-in-store-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .find-in-store-list__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-md);
    padding-block: var(--padding-xl);
    border-block-end: 1px solid rgb(var(--color-border-rgb) / var(--opacity-15));

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .find-in-store-list__item:first-child {
    border-block-start: 1px solid rgb(var(--color-border-rgb) / var(--opacity-15));
  }

  .find-in-store-list__item:last-child {
    border-block-end: none;
  }

  .find-in-store-list__info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    min-width: 0;
  }

  .find-in-store-list__name,
  .find-in-store-list__distance,
  .find-in-store-list__availability,
  .find-in-store-list__pickup-time {
    margin: 0;
  }

  .find-in-store-list__pickup-time {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size--xs);
  }

  .find-in-store-list__distance,
  .find-in-store-list__availability {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .find-in-store-list__distance[hidden] {
    display: none;
  }

  .find-in-store-list__pin,
  .find-in-store-list__check {
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .find-in-store-list__pin svg,
  .find-in-store-list__check svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .find-in-store-list__info-button {
    width: 100%;
    height: 45px;

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

  .find-in-store-list__empty {
    color: var(--color-foreground-muted);
  }

  /*
   * Mobile: `.find-in-store-detail__layout` is collapsed with `display: contents` so its
   * children (content, map) become flex items of `.find-in-store-detail` itself, alongside the
   * hours block (`.store-details`, rendered as a sibling of `.layout` by
   * snippets/store-availability-list.liquid) — letting `order` place the map after the hours
   * table without changing the markup. Desktop restores the side-by-side layout and drops the
   * ordering, since `.layout` is a real flex row there again.
   */
  .find-in-store-detail[hidden] {
    display: none;
  }

  .find-in-store-detail {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);

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

  .find-in-store-detail__layout {
    display: contents;

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

  .find-in-store-detail__content {
    order: 1;
  }

  .find-in-store-detail > .store-details {
    order: 2;
  }

  .find-in-store-detail__map {
    order: 3;
    margin-block-end: var(--margin-lg);
  }

  .find-in-store-detail__content,
  .find-in-store-detail__map {
    @media screen and (min-width: 750px) {
      flex: 0 0 50%;
      min-width: 0;
      margin-block-end: 0;
      order: initial;
    }
  }

  .find-in-store-detail__name {
    margin: 0 0 var(--margin-sm);
  }

  .find-in-store-detail__address {
    margin: 0 0 var(--margin-lg);
  }

  .find-in-store-detail__map,
  .find-in-store-detail__map-frame {
    height: 14rem;
    border: 0;
  }

  /*
   * assets/store-detail-map.js (shared with sections/store-detail.liquid) hardcodes this class
   * name on the canvas it swaps the iframe fallback for, so it's styled here rather than
   * renamed.
   */
  .find-in-store-detail__map .store-detail__map-canvas {
    width: 100%;
    height: 100%;
    border: 0;
  }
/* END_BLOCK:find-in-store */

/* START_BLOCK:footer-copyright (INDEX:144) */
.footer-utilities__group-copyright {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs, 0.3rem);
    color: var(--color-utilities, var(--color-foreground-muted));
  }

  /* Push the copyright block to the end on mobile (the utilities container is a
     flex column below 750px). Reset on desktop so the grid order is untouched. */
  .footer-utilities__group-copyright--last-mobile {
    order: 1;
  }

  @media screen and (min-width: 750px) {
    .footer-utilities__group-copyright--last-mobile {
      order: 0;
    }
  }

  /* Full-bleed separator shown above the copyright when it is moved to the end
     on mobile. Breaks out of the section gutter to span the full viewport width.
     Hidden on desktop, where the reorder does not apply. */
  .footer-copyright__divider {
    width: auto;
    margin-inline: calc(-1 * var(--page-margin));
    height: var(--divider-thickness, 1px);
    margin-block-end: var(--gap-xs, 8px);
    background-color: var(--divider-color, var(--color-border));
  }

  /* Stretch the block to the full row so the full-bleed divider centres
     precisely (equal gutters), and keep the links centred within it.
     Both are reset at the desktop breakpoint where the divider hides. */
  .footer-utilities__group-copyright:has(.footer-copyright__divider) {
    align-self: stretch;
  }

  .footer-utilities__group-copyright:has(.footer-copyright__divider) .footer-copyright__links {
    justify-content: center;
  }

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

    /* Divider is hidden but stays in DOM — reset the stretch and centering
       so the block behaves normally in the desktop grid. */
    .footer-utilities__group-copyright:has(.footer-copyright__divider) {
      align-self: auto;
    }

    .footer-utilities__group-copyright:has(.footer-copyright__divider) .footer-copyright__links {
      justify-content: normal;
    }
  }

  .footer-copyright__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .footer-copyright__link {
    display: inline-flex;
  }

  .footer-copyright__link:not(:last-child)::after {
    content: "-";
    margin-inline: var(--gap-xs, 8px);
    opacity: 0.6;
  }

  .footer-copyright__links a {
    color: var(--color-utilities, var(--color-foreground-muted));
    text-decoration: none;
  }

  .footer-copyright__links a:hover {
    text-decoration: underline;
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-localization (INDEX:145) */
.footer-localization {
    color: var(--color-utilities, var(--color-foreground-muted));
  }

  .footer-localization__button {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs, 0.3rem);
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    text-decoration: none;
  }

  .footer-localization__button:hover {
    color: var(--color-foreground);
  }

  .footer-localization__button .icon-flag {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
  }

  .footer-localization__button .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

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

  .footer-localization__dropdown {
    position: relative;
    --footer-localization-z-index: 10;
  }

  .footer-localization .localization-wrapper {
    position: absolute;
    /* Cancel the theme's `dropdown-localization-component .localization-wrapper`
       top anchor — with both top and bottom set, the box collapses to 0 height. */
    top: auto;
    bottom: calc(100% + 0.5rem);
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    border-radius: var(--border-radius-popover, 8px);
    box-shadow: var(--shadow-popover);
    z-index: var(--footer-localization-z-index);
  }
/* END_BLOCK:footer-localization */

/* START_BLOCK:footer-policy-list (INDEX:146) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:148) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:149) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

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

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

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

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

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:mega-menu-link (INDEX:153) */
/* Scoped to .mega-menu-link so the chosen colour beats the base
     .mega-menu__btn-text rule (defined in mega-menu-panel.liquid) on
     specificity, regardless of stylesheet concatenation order. */
  .mega-menu-link .mega-menu__btn-text {
    color: var(--mm-btn-color, var(--color-foreground-heading));
  }

  .mega-menu-link .mega-menu__btn:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }
/* END_BLOCK:mega-menu-link */

/* START_BLOCK:mega-menu-promo (INDEX:154) */
.mega-menu__promo-link {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm);
    width: 100%;
    text-decoration: none;
  }

  a.mega-menu__promo-link:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  .mega-menu__promo-image {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: var(--mm-promo-radius, var(--style-border-radius-lg, 12px));
  }

  .mega-menu__promo-caption {
    font-family: var(--font-body--family);
    font-size: var(--mm-promo-caption-size, var(--font-size--2xl));
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height--heading-normal);
    color: var(--color-foreground-heading);
    text-align: center;
  }

  /* Additive typography overrides — higher-specificity ancestor selector wins.
     Fallbacks reproduce the base rule values verbatim, so unset settings render
     identically to the pre-additive baseline. */
  .mega-menu__dropdown-portal .mega-menu__promo-caption {
    font-family: var(--mm-promo-caption-font-family, var(--font-body--family));
    font-weight: var(--mm-promo-caption-font-weight, var(--font-weight-bold, 700));
    text-transform: var(--mm-promo-caption-text-transform, none);
    text-align: var(--mm-promo-caption-text-align, center);
    color: var(--mm-promo-caption-color, var(--color-foreground-heading));
  }
/* END_BLOCK:mega-menu-promo */

/* START_BLOCK:mega-menu-rail-link (INDEX:155) */
.mega-menu__quick-link {
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: var(--menu-font-md--line-height);
    color: var(--mm-rail-link-color, var(--color-foreground-heading));
    text-decoration: none;
  }

  .mega-menu__quick-link:hover {
    text-decoration: underline;
  }

  .mega-menu__quick-link:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }
/* END_BLOCK:mega-menu-rail-link */

/* START_BLOCK:mega-menu-rail (INDEX:156) */
.mega-menu__quick-links {
    order: 1;
    flex-shrink: 0;
    width: var(--mm-rail-width, 200px);
  }

  /* Optional coloured rail (--mega-menu-rail-bg is set inline when a background is chosen). */
  .mega-menu__quick-links--filled {
    background: var(--mega-menu-rail-bg);
    padding: var(--padding-lg);
    border-radius: var(--style-border-radius-lg, 12px);
  }

  .mega-menu__quick-links-heading {
    margin-block-end: var(--padding-md);
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-foreground-secondary, var(--color-foreground-muted));
  }

  .mega-menu__quick-links-list {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }
/* END_BLOCK:mega-menu-rail */

/* START_BLOCK:menu (INDEX:157) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:mobile-mega-menu-item (INDEX:158) */
.mobile-mega-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--padding-lg) 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: start;
  }

  .mobile-mega-menu__row-text {
    font-family: var(--font-body--family);
    font-size: var(--font-size--md, 1.125rem);
    font-weight: var(--mm-row-title-weight, 400);
    color: var(--mm-row-title-color, var(--color-foreground-heading));
  }

  .mobile-mega-menu__row-chevron {
    flex-shrink: 0;
    margin-inline-end: calc(-1 * var(--padding-2xs));
    color: var(--color-foreground-heading);
  }

  .mobile-mega-menu__quick-links {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
    margin-block-end: var(--padding-xl);
    padding-block-end: var(--padding-lg);
    border-block-end: var(--style-border-width) solid var(--color-border);
  }

  .mobile-mega-menu__row:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  .mobile-mega-menu__quick-link {
    font-family: var(--font-body--family);
    font-size: var(--font-size--lg, 1.125rem);
    font-weight: 600;
    color: var(--color-foreground-heading);
    text-decoration: none;
  }

  .mobile-mega-menu__quick-link:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  .mobile-mega-menu__group {
    margin-block-end: var(--padding-xl);
  }

  .mobile-mega-menu__group-heading {
    display: block;
    margin-block-end: var(--padding-md);
    font-family: var(--font-body--family);
    font-size: var(--menu-font-md--size);
    font-weight: 400;
    color: var(--color-foreground-heading);
    text-decoration: none;
  }

  .mobile-mega-menu__group-heading:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  .mobile-mega-menu__group-list {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .mobile-mega-menu__group-link {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    text-decoration: none;
    padding-inline-start: var(--padding-lg);
  }

  .mobile-mega-menu__group-link:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  /* Promo tiles stacked at the bottom of the mobile panel */
  .mobile-mega-menu__promos {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
    margin-block-start: var(--padding-xl);
  }

  /* Override desktop flex/grid sizing — promos are full-width in the mobile panel */
  .mobile-mega-menu__panel .mega-menu__promo {
    width: 100%;
    grid-column: unset;
    order: unset;
    flex-shrink: unset;
  }

  /* Override desktop rail sizing — full-width, no fixed 160px, no flex order */
  .mobile-mega-menu__panel .mega-menu__quick-links {
    width: auto;
    order: unset;
    flex-shrink: unset;
    margin-block-end: var(--padding-xl);
  }

  .mobile-mega-menu__panel .mega-menu__quick-links--filled {
    padding: var(--padding-md);
  }
/* END_BLOCK:mobile-mega-menu-item */

/* START_BLOCK:mobile-mega-menu-link (INDEX:159) */
/* Scoped to --link so the chosen colour beats the base
     .mobile-mega-menu__row-text rule (defined in mobile-mega-menu-item.liquid)
     on specificity, regardless of stylesheet concatenation order. */
  .mobile-mega-menu__row--link .mobile-mega-menu__row-text {
    color: var(--mm-row-text-color, var(--color-foreground-heading));
  }

  .mobile-mega-menu__row--link:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }
/* END_BLOCK:mobile-mega-menu-link */

/* START_BLOCK:notify-me (INDEX:160) */
.notify-me {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    margin-block-start: var(--global-margin-vertical-med);
  }

  .notify-me[hidden] {
    display: none;
  }

  .notify-me__form {
    display: flex;
    gap: var(--gap-sm);
  }

  .notify-me__form[hidden] {
    display: none;
  }

  .notify-me__heading {
    margin: 0;
  }

  .notify-me__input {
    flex: 1;
    min-width: 0;
    padding: var(--input-padding);
    border: 1px solid var(--color-foreground);
    border-radius: 0;
  }

  notify-me-component .notify-me__input:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .notify-me__submit {
    flex-shrink: 0;
  }

  .notify-me__success,
  .notify-me__error {
    margin: 0;
    font-size: 0.875em;
  }

  .notify-me__success {
    color: var(--notify-me-success-color, inherit);
  }

  .notify-me__error {
    color: var(--color-error);
  }
/* END_BLOCK:notify-me */

/* START_BLOCK:overlay-image-card (INDEX:161) */
.overlay-image-card {
    position: relative;
    display: block;
    /* Fill the container width so the tile stays "1:1 at every width". Without
       this the tile falls back to an intrinsic size (~300px) when its parent
       group is a left-aligned flex column (align-items: flex-start), which does
       not stretch block children. */
    inline-size: 100%;
    /* Focus-ring colours exposed as custom properties so they stay themeable
       and overridable per tile, per the theme convention (cf. the disruptor
       tiles' --disruptor-focus-* vars). */
    --overlay-image-card-focus-outline: rgb(255 255 255);
    --overlay-image-card-focus-shadow: rgb(0 0 0);

    aspect-ratio: var(--ratio, 1);
    overflow: hidden;
    contain: layout paint;
    border-radius: var(--border-radius, 0);
    color: inherit;
    text-decoration: none;
  }

  /* Dual white/black ring so the focus indicator keeps >=3:1 contrast (WCAG
     1.4.11) against any underlying photo, regardless of the theme text colour
     the tile inherits. */
  .overlay-image-card:focus-visible {
    outline: 3px solid var(--overlay-image-card-focus-outline);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 5px var(--overlay-image-card-focus-shadow);
  }

  .overlay-image-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .overlay-image-card__content {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised, 2);
    display: flex;
    flex-direction: column;
    justify-content: var(--vertical-alignment, flex-end);
    align-items: var(--horizontal-alignment, center);
    padding: var(--padding-lg, 2rem);
    text-align: var(--text-align, center);
    pointer-events: none;
  }

  .overlay-image-card__heading {
    display: block;
    margin: 0;
    max-width: 100%;
  }

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

/* START_BLOCK:page-content (INDEX:162) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:163) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:164) */
.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:165) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

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

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-colour-swatches (INDEX:169) */
.swatch-group {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:product-colour-swatches */

/* START_BLOCK:product-custom-property (INDEX:170) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-description (INDEX:171) */
/*
   * Specificity is bumped above snippets/text.liquid's `.text-block > *:first-child` and
   * `.text-block p` rules (both of which would otherwise win and zero this out), since the specs
   * now render as descendants of .text-block so they inherit its alignment/colour/width/background.
   */
  .text-block > p.product-description__spec {
    margin-block-start: var(--margin-md);
  }

  .text-block > p.product-description__spec + p.product-description__spec {
    margin-block-start: var(--margin-xs);
  }

  .product-description-expand {
    --product-desc-expand-speed: 0.4s;
    display: block;
    width: 100%;
  }

  .product-description-expand__content {
    position: relative;
    overflow: hidden;
    max-height: var(--collapsed-height, 100px);
    transition: max-height var(--product-desc-expand-speed) ease;
  }

  .product-description-expand__content::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 2.5em;
    background: linear-gradient(to bottom, transparent, var(--color-background));
    pointer-events: none;
    transition: opacity var(--animation-speed-slow) ease;
  }

  .product-description-expand[data-expanded] .product-description-expand__content {
    overflow: visible;
  }

  .product-description-expand[data-expanded] .product-description-expand__content::after {
    opacity: 0;
    pointer-events: none;
  }

  .product-description-expand[data-fits] .product-description-expand__content {
    max-height: none;
    overflow: visible;
  }

  .product-description-expand[data-fits] .product-description-expand__content::after {
    display: none;
  }

  .product-description-expand__toggle[hidden] {
    display: none;
  }

  .product-description-expand__toggle {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-block-start: 1.25rem;
    margin-inline: auto;
    padding: 0;
    background: none;
    border: none;
    border-block-end: 1px solid currentColor;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-decoration: none;
    line-height: 1.4;
  }

  .product-description-expand__toggle:hover {
    opacity: 0.7;
  }

  .product-description-expand__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .product-description-expand__toggle-icon {
    font-size: 1.1em;
    line-height: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-description-expand__content,
    .product-description-expand__content::after {
      transition: none;
    }
  }
/* END_BLOCK:product-description */

/* START_BLOCK:product-hotspots (INDEX:172) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
    /* Fill the container: the block carries no intrinsic width, so without this
       it collapses to 0 when placed directly in a section/group (the carousel
       and standalone section size it themselves, so this is a no-op there). */
    width: 100%;
  }

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

  /* Hide hotspots that resolve to no product on all devices (live only; still shown in the editor) */
  .hotspot.hotspot--empty {
    display: none;
  }

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

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

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

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    /* Extra top/bottom breathing room for the text column (image stays flush) */
    padding-block: var(--padding-md, 12px);
    overflow: hidden;
  }

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

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

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

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

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

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    /* Square corners by design — the shoppable card is a flush image tile, so we
       intentionally opt out of the theme popover-radius token here. */
    border-radius: 0;
    border: var(--style-border-popover);
    width: max-content;
    min-width: min(var(--maximum-width-dialog), 260px);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);
    /* Slightly translucent by default (theme-aware); overridable via card_background */
    background: var(--hotspot-card-bg, rgb(var(--color-background-rgb) / 0.85));

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

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

  /* Keyboard focus ring for the card-wide link (inset so it isn't clipped by the card edge) */
  .hotspot .hotspot-dialog__link:focus-visible {
    outline: var(--focus-ring-width, 2px) solid rgb(var(--color-foreground-rgb));
    outline-offset: calc(var(--focus-ring-width, 2px) * -1);
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--padding-md, 12px);
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    /* Fixed square thumbnail (sized by product_image_size), no padding, no radius */
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    align-self: center;
    object-fit: cover;
  }

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

  /* Shop now text link (alternative CTA to the quick-add button) */
  .hotspot-dialog__shop-now {
    position: relative;
    z-index: var(--layer-raised);
    width: fit-content;
    align-self: flex-start;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }

  /* CTA style toggle: show the Shop now link OR the quick-add button, not both */
  .product-hotspots[data-cta-style='shop_now'] .hotspot-dialog .quick-add {
    display: none;
  }

  /* Shop now cards don't surface the sold-out badge (the link still goes to the PDP) */
  .product-hotspots[data-cta-style='shop_now'] .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: none;
  }

  .product-hotspots[data-cta-style='quick_add'] .hotspot-dialog__shop-now {
    display: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .hotspot-dialog[open] .quick-add__button:is(:hover, :focus, :focus-visible, :active) {
    translate: 0 0;
    transition-delay: var(--animation-speed-slow);
  }

  .hotspot-dialog[open] .quick-add__button:is(:hover, :focus, :focus-visible, :active)::before {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
    transition-duration: var(--animation-speed);
    transition-delay: var(--animation-speed-slow);
  }

  /* Respect reduced-motion: drop the card/marker transitions and quick-add slide-in */
  @media (prefers-reduced-motion: reduce) {
    .hotspot .hotspot-dialog,
    .hotspot .hotspot-dialog[data-closing='true'],
    .hotspot-trigger,
    .hotspot-trigger::after {
      transition-duration: 0.01ms;
    }

    .hotspot-dialog[open] .quick-add__button {
      animation: none;
    }
  }
/* END_BLOCK:product-hotspots */

/* START_BLOCK:product-info-callout (INDEX:173) */
.info-callout {
    --_close-size: 24px;
    --_arrow-size: 10px;
    --_tooltip-gap: 8px;
    position: relative;
    display: block;
    width: 100%;
  }

  .info-callout__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    flex-wrap: wrap;
  }

  .info-callout[data-alignment='left'] .info-callout__row {
    justify-content: flex-start;
  }

  .info-callout[data-alignment='left'] .info-callout__label {
    text-align: start;
  }

  .info-callout[data-alignment='right'] .info-callout__row {
    justify-content: flex-end;
  }

  .info-callout[data-alignment='right'] .info-callout__label {
    text-align: end;
  }

  .info-callout__icon {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
  }

  .info-callout__label {
    min-width: 0;
  }

  .info-callout__label > * {
    display: inline;
    margin-block: 0;
  }

  .info-callout__trigger {
    display: inline;
    margin-inline-start: 0.375em;
    padding: 0;
    background: none;
    border: none;
    border-block-end: 1px solid currentColor;
    border-radius: 0;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
  }

  .info-callout__trigger:hover {
    opacity: 0.7;
  }

  .info-callout__trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* Tooltip — absolutely positioned below the row, full parent width */
  .info-callout__tooltip {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + var(--_tooltip-gap));
    z-index: var(--z-index-overlay, 10);
  }

  .info-callout__tooltip[hidden] {
    display: none;
  }

  /* Inner box carries the visual styling */
  .info-callout__tooltip-inner {
    position: relative;
    padding-block-start: var(--tooltip-pt, var(--padding-lg));
    padding-block-end: var(--tooltip-pb, var(--padding-lg));
    padding-inline-start: var(--tooltip-pl, var(--padding-lg));
    padding-inline-end: calc(var(--_close-size) + var(--padding-sm));
    background: var(--tooltip-bg, var(--color-background));
    border: 1px solid currentColor;
  }

  /* Upward-pointing arrow aligned to trigger centre */
  .info-callout__tooltip-inner::before {
    content: '';
    position: absolute;
    inset-block-start: calc(var(--_arrow-size) / -2 - 1px);
    inset-inline-start: var(--tooltip-arrow-left, 50%);
    transform: translateX(-50%) rotate(45deg);
    width: var(--_arrow-size);
    height: var(--_arrow-size);
    background: var(--tooltip-bg, var(--color-background));
    border-block-start: 1px solid currentColor;
    border-inline-start: 1px solid currentColor;
  }

  .info-callout__tooltip-content {
    font-size: var(--font-size--sm);
    line-height: 1.5;
  }

  .info-callout__tooltip-content > * {
    margin-block: 0;
  }

  .info-callout__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--_close-size);
    height: var(--_close-size);
    color: var(--color-foreground);
    cursor: pointer;
  }

  .info-callout__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .info-callout__close svg {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:product-info-callout */

/* START_BLOCK:product-inventory (INDEX:174) */
.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:175) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:178) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:same-day-delivery (INDEX:179) */
.same-day-delivery {
    --sdd-icon-width: 30px;
    --sdd-tip-gap: var(--padding-2xl);
    --sdd-tip-arrow: 12px;
    --sdd-tip-background: color-mix(in srgb, var(--color-foreground) 5%, var(--color-background));
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: var(--padding-block-start, var(--padding-md)) var(--padding-inline-end, var(--padding-lg))
      var(--padding-block-end, var(--padding-md)) var(--padding-inline-start, var(--padding-lg));
    background: var(--sdd-background, rgb(var(--color-foreground-rgb) / var(--opacity-5)));
    color: var(--color-foreground);
    font-size: var(--font-size--md);
  }

  /*
   * The informational tooltip is v1 behaviour: a plain CSS :hover/:focus-within reveal, no JS,
   * no Popover API. Scoped to the icon+label header (not the whole widget) so hovering the
   * search form or result below doesn't also pop the tooltip open.
   */
  .same-day-delivery__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
  }

  .same-day-delivery__icon-trigger {
    flex-shrink: 0;
    width: var(--sdd-icon-width);
    margin-block-start: var(--margin-2xs);
    color: var(--color-foreground);
  }

  .same-day-delivery__icon svg {
    width: 100%;
    height: auto;
  }

  /* Dedicated tooltip disclosure icon, separate from the status icon above — mobile-only (see
     same-day-delivery.js#toggleTooltip); desktop hides it and relies purely on header hover. */
  .same-day-delivery__tooltip-icon {
    flex-shrink: 0;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: var(--color-foreground);
    cursor: pointer;
  }

  .same-day-delivery__tooltip-icon svg {
    width: 100%;
    height: 100%;
  }

  .same-day-delivery__tooltip-icon:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* Mobile (default): sits above the header, arrow pointing down. Desktop (hover): sits to the
     left of the header, arrow pointing right (see the (hover: hover) block below). */
  .same-day-delivery__tip {
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(100% + var(--sdd-tip-gap));
    z-index: var(--layer-raised);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);
  }

  @media (prefers-reduced-motion: reduce) {
    .same-day-delivery__tip {
      transition-duration: 0.01ms;
    }
  }

  /* Mobile: opened/closed exclusively via JS (see same-day-delivery.js#toggleTooltip), never by
     :focus-within — otherwise focusing the close button on tap (a normal side effect of clicking
     it) would satisfy :focus-within and keep the tooltip open right after closing it. */
  .same-day-delivery__header[data-open] .same-day-delivery__tip {
    opacity: 1;
    visibility: visible;
  }

  .same-day-delivery__tip-inner {
    position: relative;
    padding: var(--padding-md);
    padding-inline-end: calc(var(--icon-size-sm) + var(--padding-md));
    background: var(--sdd-tip-background);
    border: 1px solid currentColor;
    text-align: center;
  }

  /* The close button is mobile-only UI (see same-day-delivery.js#toggleTooltip) — on desktop
     the tooltip is pure hover/focus, closes itself when the pointer/focus leaves, and never
     needed an explicit close affordance in v1 either. */
  .same-day-delivery__tip-close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
    cursor: pointer;
  }

  /* Arrow — mobile: points down, centred under the header.
     +1px anchors the square to the border-box edge (the % inset is relative to the padding
     box), so its base meets the 1px border flush with no seam. */
  .same-day-delivery__tip-inner::after {
    content: '';
    position: absolute;
    inset-block-start: calc(100% + 1px);
    inset-inline-start: 50%;
    width: var(--sdd-tip-arrow);
    height: var(--sdd-tip-arrow);
    background: var(--sdd-tip-background);
    border-inline-end: 1px solid currentColor;
    border-block-end: 1px solid currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .same-day-delivery__tip-text {
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: var(--line-height--body-normal);
  }

  /* Desktop: tooltip to the left of the header, arrow pointing right. */
  @media (hover: hover) {
    .same-day-delivery__header:hover .same-day-delivery__tip,
    .same-day-delivery__header:focus-within .same-day-delivery__tip {
      opacity: 1;
      visibility: visible;
    }

    /* Escape dismisses the hover/focus-triggered tip without requiring the pointer or focus to
       move (see same-day-delivery.js's global Escape handler, WCAG 1.4.13 Dismissable). Same
       specificity as the reveal rule above; placed after it so source order wins. */
    .same-day-delivery__header[data-dismissed] .same-day-delivery__tip {
      opacity: 0;
      visibility: hidden;
    }

    .same-day-delivery__tip {
      inset-block: 0 auto;
      inset-inline: auto calc(100% + var(--sdd-tip-gap));
      width: max-content;
      max-width: 280px;
    }

    .same-day-delivery__tip-inner {
      padding-inline-end: var(--padding-md);
      text-align: start;
    }

    .same-day-delivery__tip-inner::after {
      inset-block-start: var(--padding-lg);
      inset-inline-start: calc(100% + 1px);
      inset-inline-end: auto;
      border-block-end: 0;
      border-block-start: 1px solid currentColor;
      border-inline-end: 1px solid currentColor;
      transform: translate(-50%, 0) rotate(45deg);
    }

    .same-day-delivery__tip-close {
      display: none;
    }

    /* No dedicated icon on desktop (hovering the header reveals the tooltip), but a keyboard-only
       user still needs a focusable element inside the header for :focus-within to ever apply —
       keep the button in the tab order, visually hidden until it receives focus (same pattern as
       the theme's own .visually-hidden utility). */
    .same-day-delivery__tooltip-icon:not(:focus, :active) {
      position: absolute;
      overflow: hidden;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      clip: rect(0 0 0 0);
    }
  }

  .same-day-delivery__text {
    font-size: var(--font-size--sm);
    margin: 0;
    line-height: var(--line-height--body-normal);
  }

  .same-day-delivery__trigger,
  .same-day-delivery__retry,
  .same-day-delivery__reset {
    align-self: flex-start;
    color: currentColor;
    text-decoration: underline;
    cursor: pointer;
    background-color: transparent;
  }
  
  .same-day-delivery__trigger:hover,
  .same-day-delivery__retry:hover,
  .same-day-delivery__reset:hover {
    background-color: transparent;
  }

  .same-day-delivery__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    position: relative;
  }

  .same-day-delivery__input-row {
    display: flex;
    gap: var(--gap-sm);
  }

  .same-day-delivery__input {
    flex: 1;
    min-width: 0;
    height: 45px;
    box-sizing: border-box;
    padding-inline: var(--padding-md);
    border: 1px solid rgb(var(--color-border-rgb) / var(--opacity-15));
    border-radius: 0;
  }

  .same-day-delivery__input:disabled {
    background: var(--input-disabled-background-color);
    color: var(--input-disabled-text-color);
  }

  .same-day-delivery__check-button {
    flex-shrink: 0;
    height: 45px;
    box-sizing: border-box;
    padding-block: 0;
    padding-inline: var(--padding-xl);
  }

  .same-day-delivery__suggestions {
    position: absolute;
    z-index: var(--layer-raised);
    inset-inline: 0;
    top: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-background);
    border: 1px solid rgb(var(--color-border-rgb) / var(--opacity-15));
    border-top: 0;
    max-height: 15rem;
    overflow-y: auto;
  }

  .same-day-delivery__suggestion {
    padding: var(--padding-sm) var(--padding-md);
    cursor: pointer;
  }

  .same-day-delivery__suggestion--active,
  .same-day-delivery__suggestion:hover {
    background: var(--card-bg-hover);
  }

  .same-day-delivery__result {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    padding: var(--padding-md);
  }

  .same-day-delivery__cutoff-message {
    margin: 0;
    min-width: 0;
    flex: 1;
    font-size: var(--font-size--xs);
  }

  .same-day-delivery__fee {
    flex-shrink: 0;
    text-align: end;
  }

  .same-day-delivery__fee-amount,
  .same-day-delivery__fee-caption {
    margin: 0;
  }

  .same-day-delivery__fee-amount {
    font-weight: 700;
  }

  .same-day-delivery__fee-caption {
    font-size: var(--font-size--xs);
  }

  /* State visibility: every state-dependent element defaults to hidden, then each state reveals
     only what it needs. Kept flat (one rule per element) rather than one giant selector list, so
     each state's shape is easy to scan. */
  .same-day-delivery__trigger,
  .same-day-delivery__form,
  .same-day-delivery__retry,
  .same-day-delivery__result,
  .same-day-delivery__reset {
    display: none;
  }

  .same-day-delivery__cutoff-message,
  .same-day-delivery__fee,
  .same-day-delivery__icon--eligible,
  .same-day-delivery__icon--ineligible {
    display: none;
  }

  [data-state='idle'] .same-day-delivery__trigger {
    display: inline-block;
  }

  [data-state='expanded'] .same-day-delivery__form,
  [data-state='checking'] .same-day-delivery__form {
    display: flex;
  }

  [data-state='checking'] .same-day-delivery__input,
  [data-state='checking'] .same-day-delivery__check-button {
    opacity: var(--opacity-60);
    pointer-events: none;
  }

  [data-state='invalid'] .same-day-delivery__retry {
    display: inline-block;
  }

  [data-state='eligible'] .same-day-delivery__result {
    display: flex;
  }

  [data-state='eligible'] .same-day-delivery__reset,
  [data-state='ineligible'] .same-day-delivery__reset {
    display: flex;
  }

  [data-state='eligible'] .same-day-delivery__cutoff-message,
  [data-state='eligible'] .same-day-delivery__fee {
    display: block;
  }

  /* The header's icon swaps to match the result — eligible/ineligible text lives in the header
     (see #setHeaderLabel in same-day-delivery.js) rather than in a separate block below it. */
  [data-state='eligible'] .same-day-delivery__icon--default,
  [data-state='ineligible'] .same-day-delivery__icon--default {
    display: none;
  }

  [data-state='eligible'] .same-day-delivery__icon--eligible {
    display: block;
  }

  [data-state='ineligible'] .same-day-delivery__icon--ineligible {
    display: block;
  }

  [data-state='eligible'] .same-day-delivery__result {
    background: color-mix(in srgb, var(--color-success) 10%, var(--color-background));
  }

  [data-state='eligible'] .same-day-delivery__icon--eligible,
  [data-state='eligible'] .same-day-delivery__fee-amount {
    color: var(--color-success);
  }

  /* No Maps API key configured (or Maps failed to load): the checker has no usable interaction
     without autocomplete, so only the intro text (and tooltip) remain visible. Placed last so it
     wins over the [data-state="..."] "show" rules above at equal specificity. */
  [data-maps-unavailable] .same-day-delivery__trigger,
  [data-maps-unavailable] .same-day-delivery__form,
  [data-maps-unavailable] .same-day-delivery__retry,
  [data-maps-unavailable] .same-day-delivery__result,
  [data-maps-unavailable] .same-day-delivery__reset {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .same-day-delivery {
      padding: var(--padding-lg) var(--padding-xs);
    }

    .same-day-delivery__input-row {
      width: 100%;
    }
  }

  /* Lines the "Check for same day delivery" trigger/retry links up under the header's own
     text rather than under its icon. */
  .same-day-delivery__trigger,
  .same-day-delivery__retry,
  .same-day-delivery__reset {
    margin-inline-start: calc(var(--sdd-icon-width) + var(--gap-sm));
  }
/* END_BLOCK:same-day-delivery */

/* START_BLOCK:social-links (INDEX:182) */
.social-icons__wrapper {
    display: flex;
    gap: var(--social-icons-gap, var(--gap-sm));
    padding-block: var(--social-icons-padding-top, 0) var(--social-icons-padding-bottom, 0);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    /* The visible icon follows the merchant's icon size, but the tappable area
       never drops below the 24px WCAG 2.5.8 minimum (icon_size can be set as
       low as 12px). At the 24px default this is a no-op. */
    block-size: max(var(--social-icons-size, var(--icon-size-lg)), 24px);
    min-block-size: 24px;
  }

  .social-icons__icon-wrapper a {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 24px;
  }

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

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: max(var(--social-icons-size, var(--icon-size-lg)), 24px);

    .social-icons__icon {
      display: block;
    }

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

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

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

/* START_BLOCK:spacer (INDEX:183) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:184) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:187) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* START_BLOCK:visibility (INDEX:188) */
/* The Shopify-generated block wrapper must also leave the layout tree.
     Otherwise it stays a shrink-to-fit flex item, and a full-width child
     (e.g. a group set to fill) resolves its width against this wrapper's
     content box instead of the section — collapsing the section width in
     left-aligned (align-items: flex-start) layouts. The [data-viewport]
     hide rules below live on the inner element, so hiding still works. */
  .shopify-block.visibility-block {
    display: contents;
  }

  /* Keep the viewport wrapper out of the layout tree while it is shown, so it
     matches the display:contents behaviour of the 'any' case. The hide rules
     below share this specificity and win by source order when their media
     query matches. */
  .visibility-block[data-viewport] {
    display: contents;
  }

  /* Mobile only → hide from 750px up */
  @media screen and (min-width: 750px) {
    .visibility-block[data-viewport='mobile'] {
      display: none;
    }
  }

  /* Tablet & up / Desktop only → hide below 750px */
  @media screen and (max-width: 749px) {
    .visibility-block[data-viewport='tablet_up'],
    .visibility-block[data-viewport='desktop'] {
      display: none;
    }
  }

  /* Desktop only → also hide across the tablet range (up to 989px) */
  @media screen and (max-width: 989px) {
    .visibility-block[data-viewport='desktop'] {
      display: none;
    }
  }
/* END_BLOCK:visibility */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:189) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

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

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

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

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

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

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

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:accordion-styles (INDEX:190) */
.accordion {
    flex: 1;
    width: 100%;
  }

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

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

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: var(--style-border-width) 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 {
    padding-block-start: var(--summary-padding-block-start, var(--padding-sm));
    padding-block-end: var(--summary-padding-block-end, var(--padding-sm));
    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);
    letter-spacing: var(--summary-letter-spacing, 0em);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:add-to-cart-button (INDEX:191) */
/* Deliberately NOT a .add-to-cart-text so it doesn't inherit that class's
     atc-slide/opacity animation (triggered by the optimistic data-added state),
     which would fade the label in with a delay instead of showing it instantly. */
  .add-to-cart-loading {
    display: none;
    align-items: center;
    justify-content: center;
  }

  /* Three-dot breathing loader — same rhythm as the cart item removal indicator
     but smaller to fit the pill button. */
  .add-to-cart-loading__dots {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline: var(--padding-sm);
  }

  .add-to-cart-loading__dots span {
    inline-size: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: currentColor;
    animation: atc-loading-dot 0.8s linear infinite;
  }

  .add-to-cart-loading__dots span:nth-child(2) {
    animation-delay: -0.4s;
  }

  @keyframes atc-loading-dot {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }

    50% {
      transform: scale(0.6);
      opacity: 0.5;
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .add-to-cart-loading__dots span {
      animation: none;
    }
  }

  /* While the request is in flight, show the dots and suppress the normal
     content + the optimistic "added" burst. */
  .button[data-loading] .add-to-cart-text,
  .button[data-loading] .add-to-cart__added {
    display: none;
  }

  .button[data-loading] .add-to-cart-loading {
    display: inline-flex;
  }

  .button[data-loading] {
    cursor: wait;
    pointer-events: none;
  }
/* END_SNIPPET:add-to-cart-button */

/* START_SNIPPET:back-to-top (INDEX:192) */
back-to-top-component {
    display: none;
    position: fixed;
    bottom: var(--margin-2xl);
    left: var(--back-to-top-center-x, 50%);
    transform: translateX(-50%);
    z-index: calc(var(--layer-sticky) - 1);
  }

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

  .back-to-top__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: var(--minimum-touch-target);
    min-height: var(--minimum-touch-target);
    padding: var(--margin-xs);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-foreground);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
  }

  back-to-top-component[data-visible='true'] .back-to-top__button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .back-to-top__icon {
    width: 24px;
    height: 24px;
    color: currentColor;
  }

  .back-to-top__label {
    font-size: var(--font-size--sm);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  @media (prefers-reduced-motion: reduce) {
    .back-to-top__button {
      transition: none;
    }
  }
/* END_SNIPPET:back-to-top */

/* START_SNIPPET:background-media (INDEX:193) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:194) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:195) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:199) */
.button__icon {
    flex-shrink: 0;
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons-styles (INDEX:200) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    /* Render as a block in its own right so width applies regardless of parent
       context. Without this the span relies on being a flex child to be
       blockified, which breaks when wrapped (e.g. inside a visibility block). */
    display: block;
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

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

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

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

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

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

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

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

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

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

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:201) */
.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: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:202) */
.cart-bubble {
    --cart-padding: 0.2em;

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

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

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

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

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:203) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer-shipping-bar (INDEX:205) */
.cart-drawer-shipping-bar {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding-inline: var(--theme-drawer-padding);
    padding-block: var(--padding-md);
  }

  .cart-drawer-shipping-bar__text {
    margin: 0;
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
  }

  .cart-drawer-shipping-bar__track {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 0.375rem;
    /* --style-border-radius-pills (not --style-border-radius-50, which is 50% and
       turns a short wide bar into an ellipse) so the ends stay pill-shaped
       regardless of the track's height, and respect the merchant's global
       roundness setting. */
    border-radius: var(--style-border-radius-pills, 999px);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    /* Keeps the track's edge visible even if a merchant-chosen fill colour has
       little contrast against the track's own tint. */
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    overflow: hidden;
  }

  .cart-drawer-shipping-bar__fill {
    position: absolute;
    inset: 0;
    transform-origin: left;
    /* Animating transform (not width) keeps this off the layout/paint path. */
    transform: scaleX(calc(var(--cart-drawer-shipping-bar-progress, 0) / 100));
    background-color: var(--cart-drawer-shipping-bar-fill-color, var(--color-primary-button-background));
    border-radius: inherit;
    transition: transform 0.4s ease;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .cart-drawer-shipping-bar__fill {
      transition: none;
    }
  }

  .cart-drawer-shipping-bar--qualified .cart-drawer-shipping-bar__fill {
    background-color: var(--cart-drawer-shipping-bar-fill-color, var(--color-success, #2e9c2e));
  }
/* END_SNIPPET:cart-drawer-shipping-bar */

/* START_SNIPPET:cart-drawer (INDEX:206) */
.theme-drawer__dialog.cart-drawer__dialog {
    /* Intentional off-palette literals: these are the exact neutral greys from
       Mimco's cart-drawer design spec, not derivable from a
       rgb(var(--color-foreground-rgb) / --opacity-*) blend (the brand grey is a
       distinct cool tone, and deriving it would drift with any foreground-colour
       change). Kept as fixed values so the dividers match the design regardless
       of the global palette. */
    --cart-drawer-border-color: rgb(189, 190, 194);
    /* Lighter divider used by Mimco for the item rows and the panel's left edge,
       reserving the darker --cart-drawer-border-color for the header/footer rules. */
    --cart-drawer-border-color-light: rgb(226, 226, 226);
    /* Narrower panel to match Mimco's live drawer (~24rem vs the 30rem default).
       Scoped here so the menu/filter drawers keep the theme default width. */
    --theme-drawer-width: 24rem;

    border-left-color: var(--cart-drawer-border-color-light);
    background-color: rgb(var(--color-background-rgb) / 0.98);
  }

  /* Hover-previewed opens skip moving focus to the close button (see
     theme-drawer.js openOnHover), but the native <dialog> still falls back to
     focusing itself when nothing else is focused. That fallback focus isn't a
     real interactive target, so its default outline is just visual noise. */
  .cart-drawer__dialog:focus {
    outline: none;
  }

  @media screen and (min-width: 990px) {
    .theme-drawer__dialog.cart-drawer__dialog {
      /* --cart-drawer-top is set in JS to the cart trigger icon's live bottom edge — --header-height
         alone measures only the sticky header's own height, not any non-sticky promo/utility
         bars above it, so it's kept only as a pre-hydration fallback. */
      top: var(--cart-drawer-top, var(--header-height, 0px));
      height: calc(100dvh - var(--cart-drawer-top, var(--header-height, 0px)));

      /* Anchoring to the icon (above) intentionally overlaps the sticky header's nav row
         beneath it. .header-section sits at var(--layer-menu-drawer), higher than the base
         drawer z-index, so without this the header would paint over that overlapping strip. */
      z-index: calc(var(--layer-menu-drawer) + 1 + var(--drawer-stack-order, 0));

      /* The drawer hangs below the cart icon rather than from the top of the viewport, so
         its top edge is exposed and needs a border to close off the panel (matching the
         left border). Mobile stays a full-height modal from top: 0, so no top edge shows. */
      border-top: var(--style-border-width) solid var(--cart-drawer-border-color);
    }
  }

  cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

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

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

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

  /* --- Mimco-style line item layout ------------------------------------
     Re-flow the shared cart table row into Mimco's live mini-cart shape:

       [ image ]  title .............. remove (×)
       [ image ]  Colour: value
       [ image ]  Qty: n
       [ image ]  Edit .............. price

     The underlying <td>s and their JS refs are untouched — this only routes
     them through named grid areas, plus the drawer-only Qty/Edit nodes that
     cart-products.liquid renders for the drawer context. */
  .cart-drawer__dialog .cart-items__table-row {
    grid-template-columns: 90px minmax(0, 1fr) auto;
    grid-template-areas:
      'media title title'
      'media colour colour'
      'media qty qty'
      'media edit price'
      'media error error';
    column-gap: var(--gap-md);
    row-gap: var(--gap-xs);
    align-items: start;
  }

  .cart-drawer__dialog .cart-items__media-container {
    aspect-ratio: 90 / 112;
  }

  /* Route the details cell's children straight into the row grid for every drawer
     row (not only the unit-price-less --full-width-variants variant), so the named
     areas below resolve regardless of the item's pricing type. */
  .cart-drawer__dialog .cart-items__details {
    display: contents;
  }

  .cart-drawer__dialog .cart-items__table-row .cart-items__product-info {
    grid-area: title;
    /* Reserve room for the × overlaid at this cell's top-right (20px glyph + 7px
       inset) so a long product name never runs under the remove control. */
    padding-inline-end: 2rem;
  }

  .cart-drawer__dialog .cart-items__table-row .cart-items__variants-wrapper {
    grid-area: colour;
  }

  .cart-drawer__dialog .cart-items__table-row .cart-items__drawer-qty {
    grid-area: qty;
  }

  .cart-drawer__dialog .cart-items__table-row .cart-items__drawer-edit {
    grid-area: edit;
  }

  .cart-drawer__dialog .cart-items__table-row .cart-items__price {
    grid-area: price;
    align-self: center;
    text-align: end;
  }

  /* Sale pricing (matches the live CRG mini-carts): the selling price takes the
     brand's configurable sale colour, with the "was" price struck-through beneath
     it in the normal price colour. */
  .cart-drawer__dialog .cart-items__price--on-sale {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 2px;
  }

  .cart-drawer__dialog .cart-items__price--on-sale text-component {
    color: var(--cart-drawer-sale-color, var(--color-sale-price, var(--color-foreground)));
  }

  .cart-drawer__dialog .cart-items__price-compare {
    text-decoration-line: line-through;
  }

  /* The shared quantity <td> keeps its (now hidden) stepper so the cart update
     JS still finds its input; only the remove control surfaces, pinned
     top-right like Mimco.

     The title spans the full content width (cols 2–3) so long names get the
     whole row; the × is placed as an overlay in that same top-right cell rather
     than owning its own grid track — otherwise it shares column 3 with the wider
     price beneath it and squeezes the name. Explicit line placement (not a named
     area) lets it sit over the title cell without reserving column width. */
  .cart-drawer__dialog .cart-items__table-row .cart-items__quantity {
    grid-column: 3;
    grid-row: 1;
    z-index: 1;
    margin: 0;
    /* Pin the remove control to the right edge of the row and inset it so the ×
       glyph lines up vertically with the header close button's × — that button is
       34px wide with a centred 20px glyph, so its glyph is inset (34 - 20) / 2 = 7px
       from the panel's padding edge. */
    justify-self: end;
    margin-inline-end: 7px;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .cart-drawer__dialog .cart-items__quantity-controls {
    justify-content: flex-end;
  }

  .cart-drawer__dialog .cart-items__quantity .quantity-selector-wrapper,
  .cart-drawer__dialog .cart-items__quantity-controls > .volume-pricing-info,
  .cart-drawer__dialog .cart-items__unit-price-wrapper {
    display: none;
  }

  .cart-drawer__dialog .cart-items__remove {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .cart-drawer__dialog .cart-items__remove svg {
    width: 20px;
    height: 20px;
  }

  /* Grid row-gap owns the vertical rhythm — drop the shared 2px stacking margin. */
  .cart-drawer__dialog .cart-items__details > * + * {
    margin-block-start: 0;
  }

  /* Product title: Mimco's large, light heading style (title-case). */
  .cart-drawer__dialog .cart-items__title {
    font-size: var(--font-size--xl);
    font-weight: 300;
    line-height: 1.25;
  }

  /* Opt-in custom line-item name typography (theme settings → Cart). Only active when
     the merchant picks the Custom preset, so the default look above is left intact. */
  .cart-drawer__dialog[data-cart-name-preset='custom'] .cart-items__title {
    font-family: var(--cart-name-font-family);
    font-size: var(--cart-name-font-size);
    font-weight: var(--cart-name-font-weight);
    line-height: var(--cart-name-line-height);
    letter-spacing: var(--cart-name-letter-spacing);
    text-transform: var(--cart-name-text-transform);
  }

  /* Variant / Qty / Edit text: full foreground colour, 16px, light. */
  .cart-drawer__dialog .cart-items__details,
  .cart-drawer__dialog .cart-items__drawer-qty,
  .cart-drawer__dialog .cart-items__drawer-edit {
    color: var(--color-foreground);
  }

  .cart-drawer__dialog .cart-items__variants,
  .cart-drawer__dialog .cart-items__variants dt,
  .cart-drawer__dialog .cart-items__variants dd,
  .cart-drawer__dialog .cart-items__properties,
  .cart-drawer__dialog .cart-items__properties dt,
  .cart-drawer__dialog .cart-items__properties dd,
  .cart-drawer__dialog .cart-items__drawer-qty,
  .cart-drawer__dialog .cart-items__drawer-edit {
    font-size: var(--font-size--md);
    font-weight: 300;
    letter-spacing: -0.224px;
  }

  /* Opt-in custom option (variant) typography — mirrors the name rule above. */
  .cart-drawer__dialog[data-cart-option-preset='custom'] :is(.cart-items__variants, .cart-items__variants dt, .cart-items__variants dd, .cart-items__properties, .cart-items__properties dt, .cart-items__properties dd, .cart-items__drawer-qty, .cart-items__drawer-edit) {
    font-family: var(--cart-opt-font-family);
    font-size: var(--cart-opt-font-size);
    font-weight: var(--cart-opt-font-weight);
    line-height: var(--cart-opt-line-height);
    letter-spacing: var(--cart-opt-letter-spacing);
    text-transform: var(--cart-opt-text-transform);
  }

  .cart-drawer__dialog .cart-items__drawer-qty {
    margin: 0;
  }

  .cart-drawer__dialog .cart-items__drawer-edit {
    width: fit-content;
    align-self: center;
    text-decoration: underline;
  }

  /* cart-products.liquid drops the visually-hidden class on the variant name in
     the drawer (like Mimco's "Colour: …"); this just spaces it from the value. */
  .cart-drawer__dialog .cart-items__variant dt {
    margin-inline-end: 0.25em;
  }

  /* Each attribute on its own line, like Mimco (the joining comma is dropped in
     cart-products.liquid for the drawer). */
  .cart-drawer__dialog .cart-items__variant {
    display: block;
  }

  .cart-drawer__dialog .cart__checkout-button {
    font-size: var(--font-size--md);
  }

  /* Footer total row: Mimco keeps it understated — a 16px light label and a
     14px value, not the theme's large bold total. */
  .cart-drawer__dialog .cart-totals__total {
    font-weight: 400;
  }

  .cart-drawer__dialog .cart-totals__total-label {
    font-size: var(--font-size--md);
    font-weight: 300;
  }

  .cart-drawer__dialog .cart-totals__total-value {
    font-size: var(--font-size--sm);
    font-weight: 400;
  }

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

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

  .cart-drawer__dialog .theme-drawer__header {
    position: relative;
    border-bottom: none;
  }

  /* Inset the header divider so it lines up with the item dividers below — a
     border on the padded header itself would span the panel edge-to-edge. */
  .cart-drawer__dialog .theme-drawer__header::after {
    content: '';
    position: absolute;
    inset-inline: var(--theme-drawer-padding);
    bottom: 0;
    border-bottom: var(--style-border-width) solid var(--cart-drawer-border-color);
  }

  .cart-drawer__dialog .theme-drawer__close-button {
    border: none;
    box-shadow: none;
    background-color: transparent;
  }

  .cart-drawer__dialog .theme-drawer__title {
    /* Space between the title and the item count reads like a single word space
       rather than the wide 1rem gap, which looked like trailing space after the
       title. em keeps it proportional to the large title size. */
    gap: 0.35em;
    font-size: var(--font-size--xl);
    font-weight: 300;
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  .cart-drawer__item-count {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    text-transform: lowercase;
    color: inherit;
  }

  .cart-drawer__empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .cart-drawer__empty-icon.cart-drawer__empty-icon,
  .cart-drawer__empty-icon svg {
    width: 42px;
    height: 42px;
  }

  .cart-drawer__empty-message {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
  }

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

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

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

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

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--cart-drawer-border-color);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
    gap: var(--gap-2xl);
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xl);
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:207) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-member-login (INDEX:208) */
/* Shared: body font + live letter-spacing (-0.224px @ 16px ≈ -0.014em). */
    .cart-member {
      font-family: var(--font-body--family);
      letter-spacing: -0.014em;
    }

    /* Block variant — pancake banner (live #e8d8d0, 24/20 padding). */
    .cart-member:not(.cart-member--summary) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--gap-lg) var(--gap-2xl);
      padding: 1.5rem 1.25rem;
      background-color: var(--brand-accent-100, #e8d8d0);
      color: var(--color-foreground);
      font-size: var(--font-size--md);
    }

    .cart-member__text {
      min-width: 0;
    }

    .cart-member__intro {
      margin: 0;
      font-weight: 300;
      line-height: 1.4;
    }

    .cart-member__heading {
      margin: 0;
      font-weight: 500;
      text-transform: uppercase;
      line-height: 1.4;
    }

    .cart-member__actions {
      flex-shrink: 0;
      /* color-custom-popover (kept for the dropdown's colour scheme) sets a scheme
         background; don't let it paint behind the trigger. */
      background: transparent;
    }

    /* Native trigger styled as the live primary "Login" button (#333/#fff, 12/40). */
    .cart-member__cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem 2.5rem;
      background-color: var(--color-primary-button-background);
      color: var(--color-primary-button-text);
      font-size: var(--font-size--md);
      white-space: nowrap;
      cursor: pointer;
    }

    @media screen and (max-width: 749px) {
      .cart-member:not(.cart-member--summary) {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    /* Summary variant — bordered grey prompt with an inline underlined-link trigger
       (live #f5f5f5 bg, #acacac border, centred 16px/300). */
    .cart-member--summary {
      margin-block: var(--margin-lg) var(--margin-xl);
      padding: var(--padding-lg);
      border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-40));
      background-color: rgb(var(--color-foreground-rgb) / 0.03);
      text-align: center;
    }

    .cart-member__prompt {
      margin: 0;
      font-size: var(--font-size--md);
      font-weight: 300;
      line-height: 1.5;
      color: var(--color-foreground);
    }

    /* Inline bold from the inline_richtext prompt fields (e.g. "exclusive
       member offers & rewards") — brand medium weight, not full bold. */
    .cart-member__prompt strong,
    .cart-member__prompt b {
      font-weight: 600;
    }

    /* Inline trigger inside the sentence: the host flows as an inline-block unit and
       its shadow button (::part) is forced inline + unstyled so only the link shows. */
    .cart-member__account--inline {
      display: inline-block;
      vertical-align: top;
    }

    .cart-member--summary shopify-account::part(signed-out-avatar) {
      display: inline;
      min-height: 0;
      height: auto;
      padding: 0;
      background: transparent;
      font: inherit;
      line-height: inherit;
      color: inherit;
    }

    .cart-member__link {
      font-size: var(--font-size--md);
      line-height: inherit;
      color: var(--color-foreground);
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }
/* END_SNIPPET:cart-member-login */

/* START_SNIPPET:cart-offers (INDEX:209) */
.cart-offers {
    display: block;
    width: 100%;
    margin-block-start: var(--margin-xl);
  }

  .cart-offers__summary {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-md);
    padding-block: var(--padding-md);
    cursor: pointer;
    list-style: none;
  }

  .cart-offers__summary::-webkit-details-marker {
    display: none;
  }

  /* +/- toggle: plus when collapsed, minus when expanded (matches live). */
  .cart-offers__toggle {
    flex-shrink: 0;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: var(--brand-text-primary, #161616);
    margin-block-start: var(--margin-3xs);
  }

  .cart-offers details[open] .cart-offers__toggle-plus,
  .cart-offers details:not([open]) .cart-offers__toggle-minus {
    display: none;
  }

  .cart-offers__heading-group {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--gap-3xs, 0.125rem);
    min-width: 0;
  }

  .cart-offers__title {
    font-size: var(--font-size--lg);
    color: var(--brand-text-primary, #161616);
  }

  .cart-offers__count {
    font-size: var(--font-size--md);
    color: var(--brand-text-primary, #161616);
  }

  .cart-offers__saved {
    margin-inline-start: auto;
    font-size: var(--font-size--lg);
    font-weight: 600;
    color: var(--brand-sale-text, #d64040);
    white-space: nowrap;
  }

  /* The details-content padding is animated by accordion-custom (0 when closed);
     these values apply once the panel is open. */
  .cart-offers__content {
    background-color: rgb(var(--color-foreground-rgb) / 0.04);
    padding-inline: var(--padding-xl);
  }

  .cart-offers details[open] .cart-offers__content {
    padding-block: var(--padding-xl);
  }

  .cart-offers__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    margin: 0 0 var(--margin-lg);
    padding: 0;
    list-style: none;
  }

  /* Applied offer: white card with a green outline and a green tick badge
     overlapping the top-right corner (matches the live Mimco offer row). Scoped
     under .cart-offers__list so it overrides the `.cart-discount__pill` styles the
     code cards inherit (background / padding / radius / uppercase). */
  .cart-offers__list .cart-offers__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-md);
    border: 1px solid var(--color-success, #2e9c2e);
    border-radius: 0;
    background-color: var(--color-background);
    padding: var(--padding-lg) var(--padding-xl);
    text-transform: none;
  }

  /* Right column: the saving on the first line (so "Save $X" aligns across every
     card, code or offer), with the Remove link stacked beneath it on code cards. */
  .cart-offers__item-end {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gap-3xs, 0.125rem);
    text-align: end;
  }

  .cart-offers__tick {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background-color: var(--color-success, #2e9c2e);
    color: #fff;
    transform: translate(35%, -35%);
  }

  .cart-offers__tick .icon-checkmark {
    width: 0.85rem;
    height: 0.85rem;
  }

  /* Name + type tag stacked, taking the remaining width. */
  .cart-offers__item-info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--gap-3xs, 0.125rem);
    min-width: 0;
  }

  .cart-offers__name {
    font-size: var(--font-size--md);
    color: var(--brand-text-primary, #161616);
  }

  /* Small, muted tag distinguishing a promo code from an automatic offer. */
  .cart-offers__tag {
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    text-transform: none;
  }

  /* Small underlined "Remove" link under the saving on code cards; automatic
     offers have no code to remove. */
  .cart-offers__item .cart-offers__remove {
    font-size: var(--font-size--sm);
    color: var(--brand-sale-text, #d64040);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .cart-offers__item .cart-offers__remove:hover {
    color: var(--brand-sale, #d64040);
    opacity: 0.8;
  }

  /* The <cart-offers-form> wrapper must not affect the panel layout. */
  .cart-offers__inner {
    display: contents;
  }

  /* Remove-link loading: hide the word (two-class selector so `color: transparent`
     wins over the base `.cart-offers__item .cart-offers__remove` red) and spin a
     small ring in its place. */
  .cart-offers__item .cart-offers__remove--loading {
    position: relative;
    pointer-events: none;
    color: transparent;
    text-decoration: none;
  }

  .cart-offers__remove--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid var(--brand-sale-text, #d64040);
    border-top-color: transparent;
    border-radius: 50%;
    animation: cart-offers-spin 0.6s linear infinite;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .cart-offers__remove--loading::after {
      animation: none;
    }
  }

  /* Two-class selector so the weight wins over the `.cart-secondary-typography`
     class (weight 400) also on the element. */
  .cart-offers__item .cart-offers__save {
    font-size: var(--font-size--md);
    font-weight: 500;
    color: var(--brand-text-primary, #161616);
    white-space: nowrap;
  }

  /* Compact width (not full column) + a shared field height so the input and the
     Apply button line up exactly. */
  .cart-offers__form {
    --offers-field-height: 3rem;

    display: flex;
    gap: var(--gap-sm);
    align-items: stretch;
    max-width: 24rem;
  }

  /* Two-class selector so this wins over the shared `.cart-discount__input`
     (kept on the element for the discount component's error handling), which sets
     height:100% + smaller padding. */
  .cart-offers__form .cart-offers__input {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    height: var(--offers-field-height);
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: 0;
    background-color: var(--color-background);
    color: var(--brand-text-primary, #161616);
    padding-inline: var(--padding-lg);
    padding-block: 0;
    font-size: var(--font-size--md);
  }

  .cart-offers__input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }

  .cart-offers__button {
    flex: 0 0 auto;
    height: var(--offers-field-height);
    padding-block: 0;
    padding-inline: var(--padding-2xl);
  }

  /* Loading state: block further interaction (without `disabled`, which would
     cancel the form submit), hide the label, and spin a ring in the button's
     text colour. */
  .cart-offers__button--loading {
    position: relative;
    pointer-events: none;
    cursor: wait;
  }

  .cart-offers__button--loading .cart-offers__button-label {
    visibility: hidden;
  }

  .cart-offers__button--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cart-offers-spin 0.6s linear infinite;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .cart-offers__button--loading::after {
      animation: none;
    }
  }

  @keyframes cart-offers-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Free-shipping / click & collect bar beneath the panel (matches the live Mimco
     cart): Mimco truck icon + message, on a soft tinted band. */
  .cart-offers__shipping {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* Background, spacing + typography copied from the live Mimco bar
       (pancake #d2b2a2, 20/40 padding, body font 16px/300, -0.014em). */
    padding: 1.25rem 2.5rem;
    background-color: var(--brand-accent-200, #d2b2a2);
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.014em;
  }

  .cart-offers__shipping-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--brand-text-primary, #161616);
  }

  .cart-offers__shipping-icon svg {
    width: 2.625rem;
    height: 2.625rem;
  }

  .cart-offers__shipping-text strong {
    font-weight: 500;
  }
/* END_SNIPPET:cart-offers */

/* START_SNIPPET:cart-payment-icons (INDEX:210) */
.cart-payment-icons {
    width: 100%;
    padding-block-start: var(--cart-payment-icons-padding-top, 12px);
    padding-block-end: var(--cart-payment-icons-padding-bottom, 0px);
  }

  .cart-payment-icons__list {
    display: grid;
    /* Exactly N content-sized columns per row, wrapping to the next row. */
    grid-template-columns: repeat(var(--cart-payment-icons-per-row, 5), auto);
    justify-content: var(--cart-payment-icons-alignment, center);
    align-items: center;
    gap: var(--cart-payment-icons-gap, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cart-payment-icons__item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart-payment-icons__icon {
    display: block;
    width: auto;
    height: var(--cart-payment-icons-size, 24px);
  }
/* END_SNIPPET:cart-payment-icons */

/* START_SNIPPET:cart-products (INDEX:211) */
.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__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart page: two-column layout — price lives at the end of the options row,
     not in a grid column. Media shares a single row with details (rather than
     spanning down to the error) so the details column can stretch to the full
     image height; the error sits full-width beneath both. */
  .cart-items__table-row--page {
    position: relative;
    grid-template-columns: clamp(2.5rem, 15cqi, 5.625rem) minmax(0, 1fr);
    grid-template-areas:
      'media details'
      'error error';
  }

  /* Stretch the details column to the image height and distribute the name,
     style code and options rows across it (space-between). The gap sets a
     minimum spacing so short items without a tall image still look right. */
  .cart-items__table-row--page > .cart-items__details {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--gap-xs);
  }

  .cart-items__table-row--page > .cart-items__details > * {
    margin-block-start: 0;
  }

  .cart-items__table-row--page .cart-items__variants-wrapper:empty {
    display: none;
  }

  /* Line price zone on the cart page — right-aligned, grows to fill the
     remaining row width so it sits at the far right edge like the live site. */
  .cart-items__options-row-price {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--md);
    font-weight: 500;
    color: var(--color-foreground);
    text-align: end;
    white-space: nowrap;
  }

  .cart-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Style code row (cart page only) — light grey, matches live (#ACACAC) */
  .cart-items__style-code {
    font-size: var(--font-size--sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
    letter-spacing: -0.01em;
    margin-block-start: var(--margin-xs);
  }

  /* Line-level offer label(s) shown as a soft red tag pill (e.g. "Buy one, get one
     50% off"), distinct from the red sale price beside it. */
  .cart-items__offers {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-2xs);
    margin: 0;
    padding: 0;
  }

  .cart-items__details .cart-items__offer {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: var(--padding-3xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills, 999px);
    background-color: rgba(214, 64, 64, 0.1);
    color: var(--brand-sale-text, #d64040);
    font-size: var(--font-size--xs);
    line-height: 1.3;
  }

  /* Inline variant + qty + price row on the cart page.
     Mirrors the live Mimco layout: an options group (colour/size/qty spread
     with space-between) on the left, and the line price right-aligned on the
     right. Both zones grow so the group's options push apart to the edges. */
  .cart-items__options-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gap-sm) var(--gap-md);
    margin-block-start: var(--margin-lg);
  }

  .cart-items__options-group {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-sm) var(--gap-md);
  }

  .cart-items__option-col {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    line-height: 1.5;
  }

  /* Labels and values share the same size/colour on the live site — the label
     just reads lighter because of the thin weight. */
  .cart-items__option-label {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    white-space: nowrap;
  }

  .cart-items__option-value {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
  }

  /* The generic `.cart-items__details *` rule (14px) and `.cart-secondary-typography`
     (regular weight) both sit later in this stylesheet, so on equal specificity they
     win — squashing the options row back to 14px/regular. Two-class selectors here
     hold the intended 16px for the variant label/value/selects, and 16px + bold for
     the line price (and the matching subtotal value below the table). */
  .cart-items__options-row .cart-items__option-label,
  .cart-items__options-row .cart-items__option-value,
  .cart-items__options-row .cart-items__option-select,
  .cart-items__options-row .cart-items__qty-select {
    font-size: var(--font-size--md);
    color: var(--brand-text-primary, #161616);
  }

  .cart-items__options-row .cart-items__options-row-price,
  .cart-items__subtotal .cart-items__subtotal-value {
    font-size: var(--font-size--md);
    font-weight: 600;
    color: var(--brand-text-primary, #161616);
  }

  /* The visible price sits in a <text-component> child; `.cart-items__details *`
     (14px) targets that descendant directly and would otherwise shrink it back,
     so size the text-component explicitly. Scoped to <text-component> (not `*`)
     so the struck compare-at price keeps its smaller 14px. */
  .cart-items__options-row .cart-items__options-row-price text-component {
    font-size: var(--font-size--md);
  }

  /* On-sale line price (matches the live Mimco cart): stack the red sale price
     above the struck-through original, right-aligned. Detected with :has — the
     <s> compare-at only renders when the line is marked down — so no Liquid
     modifier class is needed. */
  .cart-items__options-row-price:has(.cart-items__price-compare) {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gap-3xs, 0.125rem);
  }

  .cart-items__options-row-price:has(.cart-items__price-compare) text-component {
    color: var(--brand-sale-text, #d64040);
  }

  .cart-items__price-compare {
    font-weight: 400;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
    text-decoration: line-through;
  }

  /* Product title uses the true Mimco black (#161616) rather than the theme's
     #333 foreground, matching the live line item. Page-scoped so the drawer
     title keeps its own colour. */
  .cart-items__table-row--page .cart-items__title {
    color: var(--brand-text-primary, #161616);
  }

  /* Borderless selects — plain text with a small chevron, matching the live
     site. The wrapper shrink-wraps the select so the chevron sits right after
     the selected value rather than at the (label-width) column edge. */
  .cart-items__select-wrap {
    position: relative;
    display: inline-flex;
    width: max-content;
  }

  /* Chevron drawn via ::after so it inherits currentColor without data-URI limitations */
  .cart-items__select-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.35em;
    width: 0.45em;
    height: 0.45em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  }

  .cart-items__option-select,
  .cart-items__qty-select {
    font-size: var(--font-size--md);
    line-height: 1.5;
    padding-block: 0;
    padding-inline: 0 1.5em;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--color-foreground);
    appearance: none;
    cursor: pointer;
    min-width: 0;
  }

  .cart-items__option-select:focus-visible,
  .cart-items__qty-select:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* Remove button — bottom left (inside details cell) */
  .cart-items__remove--bottom-left {
    height: auto;
    width: auto;
    padding: 0;
    background: transparent;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    box-shadow: none;
    font-size: var(--font-size--xs);
    text-decoration: underline;
    margin-block-start: var(--margin-xs);
  }

  .cart-items__remove--bottom-left .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  /* Remove button — top right of the details cell. Placed in the same grid
     area as the details so it sits at that cell's top-right corner (inside the
     row padding), aligned with the product name rather than the row edge. */
  .cart-items__remove-container {
    grid-area: details;
    justify-self: end;
    align-self: start;
    z-index: 1;
    padding: 0;
  }

  /* Extra specificity so the icon alignment wins over the base
     .cart-items__remove rule (which centres the glyph in a grid). inline-flex
     with flex-start/flex-end reliably pins the icon to the top-right; the
     touch target extends down/left from there. */
  .cart-items__table-row--page .cart-items__remove--top-right {
    display: inline-flex;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    background: transparent;
    color: var(--color-foreground);
    box-shadow: none;
    padding: 0;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: flex-start;
    font-size: var(--font-size--xs);
  }

  /* Nudge the glyph into the exact corner to cancel the icon's viewBox padding
     (the ✕ strokes are inset ~18% inside the 256×256 viewBox). */
  .cart-items__table-row--page .cart-items__remove--top-right .svg-wrapper {
    transform: translate(18%, -18%);
  }

  .cart-items__remove--top-right .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  /* Cart page: when the first line-item has a delivered-by banner above it, the
     banner becomes :first-child inside <tbody>. Move the enclosing top border to
     the banner so the list is still bracketed. */
  .cart-items--dividers .cart-items__delivered-by-row:first-child {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--cart-items-gap);
  }

  /* Cart page: enclose the list — a top border on the first row and a bottom
     border on the last row, matching the between-item divider colour. */
  .cart-items--dividers .cart-items__table-row--page:first-child {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-top: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row--page:last-child {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-bottom: var(--cart-items-gap);
  }

  /* Cart-page subtotal row — sits after the last line item, its label pushed to
     the right so the value aligns with the line prices above. A closing bottom
     divider (when dividers are on) brackets it against the last item's border. */
  .cart-items__subtotal {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--gap-md);
    padding-block: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__subtotal {
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-items__subtotal-label {
    font-size: var(--font-size--md);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__subtotal-value {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    white-space: nowrap;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  /* Remove-in-progress state (mirrors Mimco's live drawer): the whole item —
     including the remove control — is dimmed and lightly blurred, with a centred
     three-dot loader overlaid until the server confirms the removal.
     The loader is the row's ::after (a pseudo of the row, not one of its
     dimmed/blurred children), so it stays crisp on top. Content cells are
     targeted individually because .cart-items__details is display:contents in
     the drawer and can't carry a filter itself. */
  .cart-items__table-row--removing {
    position: relative;
    pointer-events: none;
  }

  .cart-items__table-row--removing .cart-items__media,
  .cart-items__table-row--removing .cart-items__product-info,
  .cart-items__table-row--removing .cart-items__variants-wrapper,
  .cart-items__table-row--removing .cart-items__options-row,
  .cart-items__table-row--removing .cart-items__style-code,
  .cart-items__table-row--removing .cart-items__unit-price-wrapper,
  .cart-items__table-row--removing .cart-items__drawer-qty,
  .cart-items__table-row--removing .cart-items__drawer-edit,
  .cart-items__table-row--removing .cart-items__quantity,
  .cart-items__table-row--removing .cart-items__remove-container,
  .cart-items__table-row--removing .cart-items__options-row-price,
  .cart-items__table-row--removing .cart-items__price {
    opacity: 0.5;
    filter: blur(2px);
  }

  /* Centred three-dot loader (mirrors Mimco's live SVG loader): the dots scale
     between full and 60% size — the middle dot in the opposite phase — for a
     flowing "breathing" effect. Kept as its own cell (outside the dimmed set)
     so it stays crisp above the blurred item. */
  .cart-items__removing-loader {
    display: none;
  }

  .cart-items__table-row--removing .cart-items__removing-loader {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 2;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    color: var(--color-foreground);
    pointer-events: none;
  }

  .cart-items__removing-loader span {
    inline-size: 12px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: currentColor;
    animation: cart-item-remove-dot 0.8s linear infinite;
  }

  .cart-items__removing-loader span:nth-child(2) {
    animation-delay: -0.4s;
  }

  @keyframes cart-item-remove-dot {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }

    50% {
      transform: scale(0.6);
      opacity: 0.5;
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .cart-items__removing-loader span {
      animation: none;
    }
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  /* Overlay badges reuse the PLP 'card' context, whose per-badge `card_font_size`
     is sized for the larger collection card. Cart thumbnails are much smaller, so
     force a compact font on this surface without touching the shared badge styles. */
  .cart-items__media-container .product-overlays__badge {
    font-size: 10px;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Drawer: original layout with separate quantity column */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart page: media matches the live ~90px thumbnail, details stretch to the
       image height — price is inside the options row; error sits full-width below. */
    .cart-items__table-row--page {
      grid-template-columns: 5.625rem 1fr;
      grid-template-areas:
        'media details'
        'error error';
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  /* Per-line "delivered by …" banner — sits above the line item, full width of the
     row. Uses display:block on the row/cell so it isn't affected by the grid layout
     the sibling item rows use. Colspan on the <td> is kept for AT semantics only. */
  .cart-items__delivered-by-row {
    display: block;
    padding-block-start: var(--padding-md);
  }

  /* Tighten the following item row's top padding so the banner sits close to it,
     rather than compounding with the row's own vertical padding. Two-class selector
     on .cart-items__table-row bumps specificity above the drawer's own row rule so
     this wins regardless of stylesheet order. */
  .cart-items__delivered-by-row + .cart-items__table-row.cart-items__table-row {
    padding-block-start: var(--padding-md);
  }

  .cart-items__delivered-by {
    display: block;
    padding-block: var(--padding-2xs);
    padding-inline: var(--padding-sm);
    background-color: var(--delivered-by-bg);
    color: var(--delivered-by-text);
    font-size: var(--font-size--sm);
    font-style: italic;
    line-height: 1.4;
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:212) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  /* Cart page order summary (live Mimco layout): Subtotal + Total rows, each led
     by a top divider. The rows own their dividers/spacing, so neutralise the base
     .cart-totals top border and inter-child gap on the page. */
  .cart-totals.cart-totals--page {
    gap: 0;
    border-block-start: none;
    padding-block-start: 0;
  }

  .cart-totals__summary {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .cart-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-md);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: var(--padding-lg);
  }

  /* When the note/discount actions block is shown it already carries a bottom
     border, so drop the first summary row's own top border to avoid a doubled
     divider between the discount section and the subtotal. */
  .cart-actions + .cart-totals__summary .cart-totals__subtotal {
    border-block-start: none;
  }

  .cart-totals__row-label {
    font-size: var(--font-size--md);
    color: var(--brand-text-primary, #161616);
  }

  .cart-totals__row-value {
    font-size: var(--font-size--md);
    font-weight: 600;
    color: var(--brand-text-primary, #161616);
  }

  /* Discount/promotion lines sit directly under the Subtotal (grouped, no divider
     above); the Total row's own top border becomes the divider below them. Red to
     match the live Mimco order summary. */
  /* Group the subtotal with its discount rows using one even gap: the subtotal's
     bottom pad and each discount row's bottom pad are equal, and discount rows have
     no top pad, so subtotal→discount and discount→discount spacing match. */
  .cart-totals__subtotal:has(+ .cart-totals__discount-row) {
    padding-block-end: var(--padding-sm);
  }

  .cart-totals__discount-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-md);
    padding-block: 0 var(--padding-sm);
  }

  .cart-totals__discount-label,
  .cart-totals__discount-value {
    font-size: var(--font-size--md);
    color: var(--brand-sale-text, #d64040);
  }

  .cart-totals__discount-value {
    font-weight: 600;
    white-space: nowrap;
  }

  /* Code rows carry a small tag icon before the code. Keep the label inline (so the
     row's baseline alignment still lines the value up with the text) and size the
     icon in em, nudged to sit on the text baseline. */
  .cart-totals__discount-tag {
    display: inline-flex;
    width: 1.15em;
    height: 1.15em;
    margin-inline-end: var(--gap-3xs, 0.125rem);
    vertical-align: -0.2em;
  }

  .cart-totals__discount-tag svg {
    width: 100%;
    height: 100%;
  }

  /* "Total" reads bold; the "(before delivery)" note is lighter and smaller. */
  .cart-totals__total-main {
    font-weight: 600;
  }

  .cart-totals__total-note {
    font-size: var(--font-size--sm);
    font-weight: 400;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    margin-inline-start: var(--margin-3xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error,
  .cart-discount__success {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper,
  .cart-discount__success .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__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--md);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:chat-drawer (INDEX:213) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:collection-card (INDEX:215) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__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-title "button" styling (set on the collection-list section). The title pill is a
   * text-block (not an <a>/<button>) inside .collection-card__inner (pointer-events: none), so it
   * can't be hovered directly — the hover is driven by .collection-card:hover via the full-card
   * .collection-card__link overlay.
   *
   * Active state: .collection-card--title-button-{primary,secondary} adopts the theme button palette.
   * Hover state: the section's hover colours override when set (--collection-card-title-hover-*,
   * emitted inline only when the merchant picks one); otherwise the inherited button hover is used.
   */
  .collection-card--title-button .collection-card__content .text-block--background {
    background-color: var(--collection-card-title-button-bg);
    box-shadow: inset 0 0 0 var(--collection-card-title-button-border-width)
      var(--collection-card-title-button-border);
    border-radius: var(--collection-card-title-button-radius);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      background-color var(--hover-transition-duration) var(--hover-transition-timing),
      box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .collection-card--title-button .collection-card__content .text-block--background,
  .collection-card--title-button .collection-card__content .text-block--background > * {
    color: var(--collection-card-title-button-color);
  }

  .collection-card--title-button-primary {
    --collection-card-title-button-bg: var(--color-primary-button-background);
    --collection-card-title-button-color: var(--color-primary-button-text);
    --collection-card-title-button-border: var(--color-primary-button-border);
    --collection-card-title-button-border-width: var(--style-border-width-primary);
    --collection-card-title-button-radius: var(--style-border-radius-buttons-primary);
  }

  .collection-card--title-button-secondary {
    --collection-card-title-button-bg: var(--color-secondary-button-background);
    --collection-card-title-button-color: var(--color-secondary-button-text);
    --collection-card-title-button-border: var(--color-secondary-button-border);
    --collection-card-title-button-border-width: var(--style-border-width-secondary);
    --collection-card-title-button-radius: var(--style-border-radius-buttons-secondary);
  }

  /*
   * Hover colours only (no button style). Each colour is gated by its own modifier class
   * (--title-hover-bg / --title-hover-text) so setting only one never blanks the other
   * (e.g. a text-only hover must not reset the pill's own background to transparent).
   */
  .collection-card--title-hover-bg .collection-card__content .text-block--background,
  .collection-card--title-hover-text .collection-card__content .text-block--background {
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      background-color var(--hover-transition-duration) var(--hover-transition-timing);
  }

  @media (any-pointer: fine) {
    /* Button-style hover: explicit hover colour wins, else the inherited button hover token. */
    .collection-card--title-button-primary:hover {
      --collection-card-title-button-bg: var(
        --collection-card-title-hover-bg,
        var(--color-primary-button-hover-background)
      );
      --collection-card-title-button-color: var(
        --collection-card-title-hover-color,
        var(--color-primary-button-hover-text)
      );
      --collection-card-title-button-border: var(--color-primary-button-hover-border);
    }

    .collection-card--title-button-secondary:hover {
      --collection-card-title-button-bg: var(
        --collection-card-title-hover-bg,
        var(--color-secondary-button-hover-background)
      );
      --collection-card-title-button-color: var(
        --collection-card-title-hover-color,
        var(--color-secondary-button-hover-text)
      );
      --collection-card-title-button-border: var(--color-secondary-button-hover-border);
    }

    .collection-card--title-hover-bg:hover .collection-card__content .text-block--background {
      background-color: var(--collection-card-title-hover-bg);
    }

    .collection-card--title-hover-text:hover .collection-card__content .text-block--background,
    .collection-card--title-hover-text:hover .collection-card__content .text-block--background > * {
      color: var(--collection-card-title-hover-color);
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-category-nav (INDEX:216) */
.collection-category-nav {
    margin-block-end: var(--gap-xl);
    border-block-end: 1px solid var(--color-border);
  }

  /* 2nd-level row: link fills available width, toggle sits on the right, sublist wraps below. */
  .collection-category-nav__item {
    border-block-start: 1px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .collection-category-nav__link {
    flex: 1 1 auto;
    padding-block: var(--padding-md);
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    text-transform: var(--collection-category-nav-link-text-transform, uppercase);
    text-decoration: none;
  }

  .collection-category-nav__link:hover,
  .collection-category-nav__link--active {
    text-decoration: underline;
  }

  .collection-category-nav__toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-sm);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-foreground);
  }

  .collection-category-nav__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* Plus -> minus when the branch is expanded (hide the vertical stroke). */
  .collection-category-nav__toggle[aria-expanded="true"] .horizontal {
    opacity: 0;
  }

  /* 3rd-level sub-list: full width below the row, indented, lighter, no dividers. */
  .collection-category-nav__sublist {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    padding-block: 0 var(--padding-md);
    padding-inline-start: var(--padding-md);
  }

  .collection-category-nav__sublist[hidden] {
    display: none;
  }

  .collection-category-nav__sublink {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-size--sm);
    text-decoration: none;
  }

  .collection-category-nav__sublink:hover,
  .collection-category-nav__sublink--active {
    color: var(--color-foreground);
    text-decoration: underline;
  }

  {%- comment -%}
    The .collection-layout / .collection-sidebar / .collection-main grid rules live in
    base.css so they load even when this snippet renders nothing (no matched menu). Only
    the category nav's own visibility styles remain here.
  {%- endcomment -%}

  /* mobile-accordion = sidebar visible at all sizes (no extra rule needed); mobile-hidden = hidden below 750px */
  .collection-category-nav--mobile-hidden {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .collection-category-nav--mobile-hidden {
      display: block;
    }
  }
/* END_SNIPPET:collection-category-nav */

/* START_SNIPPET:divider (INDEX:225) */
.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:dy-search-box (INDEX:228) */
.dy-search-box-modal__dialog {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background-color: rgb(var(--color-background-rgb, 255 255 255) / var(--opacity-90, 0.9));
    backdrop-filter: blur(6px);
    color: var(--color-foreground);
    overflow: hidden;
  }

  .dy-search-box-modal__dialog::backdrop {
    background-color: transparent;
  }

  .dy-search-box-modal__dialog[open] {
    display: flex;
  }

  @media (prefers-reduced-motion: no-preference) {
    .dy-search-box-modal__dialog[open] {
      animation: dy-search-box-fade-in 200ms var(--ease-out-quad, ease-out) forwards;
    }

    .dy-search-box-modal__dialog.dialog-closing {
      animation: dy-search-box-fade-out 150ms var(--ease-out-quad, ease-out) forwards;
    }

    @keyframes dy-search-box-fade-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes dy-search-box-fade-out {
      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }
    }
  }

  .dy-search-box {
    display: block;
    width: 100%;
  }

  .dy-search-box__form {
    display: block;
  }

  .dy-search-box__bar {
    width: 100%;
    padding: var(--padding-md, 1rem) var(--padding-lg, 1.5rem);
    background-color: var(--color-background);
    box-shadow: 0 4px 12px rgb(var(--color-foreground-rgb, 0 0 0) / var(--opacity-8, 0.08));
  }

  .dy-search-box__bar-inner {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 0.75rem);
    width: 100%;
    margin-inline: auto;
    padding-block-end: var(--padding-2xs, 0.5rem);
    border: var(--border-width-sm, 1px) solid transparent;
    border-block-end-color: var(--color-foreground);

    @media screen and (min-width: 750px) {
      max-width: var(--dy-search-box-bar-width, 48rem);
    }
  }

  .dy-search-box__icon {
    flex-shrink: 0;
    width: var(--icon-size-md, 1.5rem);
    height: var(--icon-size-md, 1.5rem);
    color: var(--color-foreground);
  }

  .dy-search-box__icon > svg {
    width: 100%;
    height: 100%;
  }

  .dy-search-box__bar-inner:focus-within {
    border-block-start: var(--border-width-sm, 1px) dotted var(--color-foreground);
    border-inline: var(--border-width-sm, 1px) dotted var(--color-foreground);
  }

  .dy-search-box__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-foreground);
    font-size: var(--font-size--md, 1rem);
    outline: none;
    text-overflow: ellipsis;
  }

  .dy-search-box__input::placeholder {
    color: rgb(var(--color-foreground-rgb, 0 0 0) / var(--opacity-muted-text, 0.6));
  }

  .dy-search-box__close {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target, 44px);
    height: var(--minimum-touch-target, 44px);
    padding: 0;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .dy-search-box__close .svg-wrapper,
  .dy-search-box__close svg {
    width: var(--icon-size-sm, 1.25rem);
    height: var(--icon-size-sm, 1.25rem);
  }

  .dy-search-box__error {
    margin: 0;
    padding: var(--padding-2xs, 0.5rem) var(--padding-lg, 1.5rem) 0;
    color: var(--color-error);
    font-size: var(--font-size--sm, 1.125rem);

    @media screen and (min-width: 750px) {
      max-width: var(--dy-search-box-bar-width, 48rem);
      margin-inline: auto;
    }
  }

  .dy-search-box__body {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--dy-search-box-bar-height, 4rem));
    overflow-y: auto;
  }

  .dy-search-box__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xs, 0.5rem);
    width: 100%;
    margin-inline: auto;
    padding: var(--padding-lg, 1.5rem);
    list-style: none;

    @media screen and (min-width: 750px) {
      max-width: var(--dy-search-box-bar-width, 48rem);
    }
  }

  .dy-search-box__option {
    display: block;
    width: 100%;
    max-width: min(100%, 60ch);
    padding: var(--padding-sm, 0.75rem) var(--padding-md, 1rem);
    color: var(--color-foreground);
    font-size: var(--font-size--sm, 1.125rem);
    cursor: pointer;
  }

  .dy-search-box__option--active,
  .dy-search-box__option:hover,
  .dy-search-box__option:focus-visible {
    background-color: rgb(var(--color-foreground-rgb, 0 0 0) / var(--opacity-8, 0.08));
    outline: none;
  }

  .dy-search-box__prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs, 0.5rem);
    padding: var(--padding-lg, 1.5rem);
    color: var(--color-foreground);
    text-align: center;
    pointer-events: none;
  }

  .dy-search-box__prompt-sep {
    opacity: var(--opacity-muted-text, 0.6);
  }
/* END_SNIPPET:dy-search-box */

/* START_SNIPPET:dy-search-controls (INDEX:229) */
/* ── Custom properties ──────────────────────────────────────────────────── */
  .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-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  /* ── Mobile controls bar ───────────────────────────────────────────────── */
  .facets-toggle {
    position: relative;
    z-index: var(--layer-raised);
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--gap-sm);
    row-gap: var(--gap-2xs);
    justify-content: space-between;
    align-items: center;
    min-height: var(--minimum-touch-target);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle .facets-mobile-wrapper {
    display: contents;
  }

  .facets-toggle .products-count-wrapper.facets-toggle__count {
    display: flex;
    visibility: visible;
    flex-basis: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: var(--padding-sm);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-inline-start: -3px;
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  /* ── Block wrapper ──────────────────────────────────────────────────────── */
  .facets-block-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  /* ── Horizontal controls bar ────────────────────────────────────────────── */
  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      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.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-block-end: var(--padding-xs);
    }
  }

  /* Collection controls bar */
  .collection-controls-bar {
    @media screen and (min-width: 750px) {
      flex-direction: column;
      align-items: stretch;
      gap: var(--padding-xs);
    }
  }

  .collection-controls-bar__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--facets-form-horizontal-gap);
  }

  .collection-controls-bar .sorting-filter .facets__panel--sorted .facets__status,
  .facets-toggle .sorting-filter .facets__panel--sorted .facets__status {
    /* stylelint-disable-next-line declaration-no-important */
    display: inline-block !important; /* overrides .facets__status display:none when sort panel has active selection */
    font-size: var(--font-paragraph--size);
  }

  .collection-controls-bar .sorting-filter .facets__panel--sorted .facets__label,
  .facets-toggle .sorting-filter .facets__panel--sorted .facets__label {
    display: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .collection-controls-bar__applied {
    display: flex;
    flex-wrap: wrap;
  }

  .collection-controls-bar__applied:not(:has(.facets-remove__pill)) {
    display: none;
  }

  .collection-controls-bar__applied-label {
    align-self: center;
    white-space: nowrap;
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0;
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(.facets-remove__pill) {
    display: flex;
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets-remove__pill-button {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: inherit;
    width: 100%;

    .svg-wrapper {
      --close-icon-opacity: 0.4;
      --icon-stroke-width: 1px;

      color: var(--color-foreground);
    }
  }

  .collection-controls-bar .products-count-wrapper.collection-controls-bar__count {
    @media screen and (min-width: 750px) {
      display: flex;
      justify-content: center;
      width: 100%;
      margin: 0;
      padding-block: var(--padding-sm);
    }
  }

  /* Search context: stack the persistent "results for {terms}" heading above the DY-filled
     count value. Scoped to the --search modifier so the PLP's single count_label line is
     unaffected. The value span stays collapsed until <dy-search> writes DY's total into it. */
  .products-count-wrapper--search {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .products-count-wrapper--search .products-count__value:empty {
    display: none;
  }

  /* ── Vertical sidebar ───────────────────────────────────────────────────── */
  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  /* ── Form wrapper ───────────────────────────────────────────────────────── */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  /* ── 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-family: var(--facets-summary-font-family);
    font-style: var(--facets-summary-font-style);
    font-weight: var(--facets-summary-font-weight);
    font-size: var(--facets-summary-font-size, var(--font-h5--size));
    letter-spacing: var(--facets-summary-letter-spacing, 0em);
    text-transform: var(--facets-summary-text-transform);
    color: var(--facets-summary-color, var(--color-foreground));
    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(--facets-summary-font-size, var(--font-paragraph--size));
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  /* Caret icon (sort bar) */
  .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);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  /* Plus/minus toggle (vertical sidebar) */
  .facets__summary .icon-plus-minus {
    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);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .facets__summary .icon-plus-minus__minus {
    display: none;
  }

  details[open] > summary .icon-plus-minus__plus {
    display: none;
  }

  details[open] > summary .icon-plus-minus__minus {
    display: block;
  }

  /* ── "All" option ──────────────────────────────────────────────────────── */
  .facets__inputs-list-item--all {
    margin-block-end: 16px;
  }

  .facets__inputs-list-item--all:has(.checkbox__input:checked) {
    pointer-events: none;
    opacity: var(--disabled-opacity);
  }

  /* ── Inputs ─────────────────────────────────────────────────────────────── */
  .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__inputs .checkbox__label-text,
  .facets__pill-label,
  .facets__image-label,
  .facets__swatch-label {
    font-family: var(--facets-option-font-family);
    font-style: var(--facets-option-font-style);
    font-weight: var(--facets-option-font-weight);
    font-size: var(--facets-option-font-size);
    letter-spacing: var(--facets-option-letter-spacing, 0em);
    text-transform: var(--facets-option-text-transform);
  }

  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .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);
    }
  }

  /* ── Panel ──────────────────────────────────────────────────────────────── */
  .facets__panel {
    padding: 0 var(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  /* Separator border between .facets__item panels */
  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* ── Label / count ──────────────────────────────────────────────────────── */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .facets__clear-all-link {
    cursor: pointer;
    text-decoration-line: underline;

    &:hover {
      text-decoration-color: currentColor;
    }
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .facets__label {
    color: var(--facets-summary-color, var(--color-foreground));
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .products-count-wrapper {
    display: none;
  }

  .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__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  /* ── Sort dropdown ──────────────────────────────────────────────────────── */
  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    --sorting-option-min-width: 180px;

    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: var(--sorting-option-min-width);
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    /* The radio input is visually hidden (clipped below), so keyboard focus lands on it invisibly.
       Mirror that focus onto the whole option row via :has so sighted keyboard users get a visible
       indicator (WCAG 2.4.7). :focus-visible keeps it keyboard-only — a mouse click won't ring it. */
    &:has(.sorting-filter__input:focus-visible) {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      outline: 2px solid var(--color-foreground);
      outline-offset: -2px;
    }
  }

  .sorting-filter__input {
    /* Visually hidden but still reachable by ATs and keyboard — preserves checked state. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: var(--sorting-selected-weight, 500);
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  /* ── Drawer structure ───────────────────────────────────────────────────── */
  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper {
    overflow: visible;
  }

  /* ── Drawer actions bar ─────────────────────────────────────────────────── */
  .facets__drawer-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
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-block-start: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

    @media screen and (min-width: 990px) {
      display: none;
    }
  }

  /* ── Filter count bubble ────────────────────────────────────────────────── */
  .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);
  }

  .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;
  }

  @media screen and (max-width: 749px) {
    .section.product-grid-container .main-collection-grid {
      padding-inline: var(--margin-lg);
    }
  }

  /* ── Price range slider ─────────────────────────────────────────────────── */
  .price-range-slider {
    --slider-thumb-size: 18px;
    --slider-track-height: 1px;

    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    padding-block: var(--padding-xs) var(--padding-sm);
  }

  .price-range-slider__labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .price-range-slider__track-wrapper {
    position: relative;
    height: var(--slider-thumb-size);
    display: flex;
    align-items: center;
    margin-inline: calc(var(--slider-thumb-size) / 2);
  }

  .price-range-slider__track,
  .price-range-slider__fill {
    position: absolute;
    height: var(--slider-track-height);
    border-radius: 9999px;
    pointer-events: none;
  }

  .price-range-slider__track {
    inset-inline: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .price-range-slider__fill {
    left: 0;
    width: 0;
    background-color: var(--color-foreground);
  }

  .price-range-slider__thumb {
    position: absolute;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border-radius: 50%;
    background-color: var(--color-foreground);
    cursor: grab;
    touch-action: none;
    transform: translateX(-50%);
    transition: transform var(--animation-speed) var(--animation-easing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    &:hover {
      transform: translateX(-50%) scale(1.15);
    }

    &:active {
      cursor: grabbing;
      transform: translateX(-50%) scale(0.95);
    }

    &:focus-visible {
      outline: 2px solid var(--color-foreground);
      outline-offset: 3px;
    }
  }

  /* .main-collection-grid__empty sets display:flex which overrides the UA [hidden] rule. */
  [data-dy-no-results][hidden] {
    display: none;
  }
/* END_SNIPPET:dy-search-controls */

/* START_SNIPPET:editorial-blog-grid (INDEX:231) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:232) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:233) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:234) */
/* Facets - Remove buttons */

  /* Reset native <button> styles so the pill retains its existing layout.
     The outer .pills__pill already provides padding, background, and cursor. */
  .facets-remove__pill-button {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: inherit;
    width: 100%;

    .svg-wrapper {
      --close-icon-opacity: 0.4;
      --icon-stroke-width: 1px;

      color: var(--color-foreground);
    }
  }

  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:239) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:241) */
.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-inline-end: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-inline-start: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-inline-start: 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) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--desktop) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--mobile) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--desktop) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-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) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .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-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:focus-visible ~ .column-picker {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:242) */
.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:243) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  /* "Sign in" / "Join now" are a desktop-only addition (990px+, matching the theme's
     desktop breakpoint) — below that, the account button reverts to icon-only. */
  .account-button__desktop-only {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .account-button {
      margin-inline-end: var(--gap-2xl);
    }

    /* The icon and "Sign in" are slotted into shopify-account's shadow DOM, whose
       own part sets a smaller default gap between them — override it here. */
    .account-button shopify-account::part(signed-out-avatar) {
      gap: var(--gap-xl);
    }

    /* Match the same gap before the custom element upgrades — until then, the
       slotted icon/text sit directly inside shopify-account with no shadow DOM
       (and no ::part styling), so without this the gap would snap in on upgrade
       and cause a layout shift. */
    .account-button shopify-account:not(:defined) {
      gap: var(--gap-xl);
    }

    .account-button__desktop-only {
      display: inline;
    }

    /* Sit the person glyph on the same line as "Sign in / Join now". flex-end or
       baseline on ::part(signed-out-avatar) can't do this: it moves the slotted
       "Sign in" inside the shadow button's 44px box while "Join now" stays centred
       by .account-button outside the shadow boundary, so the two texts diverge.
       Only the icon may move. -4px puts the glyph's ink bottom just above the text
       box bottom (on the baseline), matching the live header's items-end layout. */
    .account-button__icon {
      transform: translateY(-4px);
    }
  }

  .account-button__icon {
    /* 24px to match the cart glyph and the live header icon size (the shared
       --icon-size-md is smaller). Scoped to the account icon so other header
       icons keep the global size. */
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .account-button__icon,
  .account-button__text,
  .account-button__join-now,
  .account-button__separator {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  .account-button__join-now {
    text-decoration: none;
  }

  .account-button__separator {
    opacity: 0.6;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      /* Fallbacks matter here: "Sign in" is slotted into shopify-account's shadow DOM
         and inherits its own (smaller, Arial-fallback) font when this custom property
         is unset, while "Join now" sits in the light DOM and inherits the page's — an
         explicit fallback keeps both the same regardless of which DOM they inherit from. */
      font-size: var(--header-actions-font-size, 1rem);
      font-family: var(--header-actions-font-family, var(--font-body--family));
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  /* Render the cart glyph at 24px to match the live header icon size (the shared
     .svg-wrapper default is smaller). Scoped to the cart icon so other header
     icons keep the global size. */
  .header-actions__cart-icon .svg-wrapper,
  .header-actions__cart-icon .svg-wrapper > svg {
    width: 24px;
    height: 24px;
  }

  /* Sit the cart glyph on the same line as the account icon and "Sign in / Join
     now" (see .account-button__icon) — both icons are 24px, so they share the same
     -4px offset. On the whole element so the count bubble travels with the glyph;
     excludes text display mode, where desktop shows a text label instead of the icon. */
  @media screen and (min-width: 990px) {
    .header-actions__cart-icon:not(.header-actions__cart-icon--text) {
      transform: translateY(-4px);
    }
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  /* Mimco style: the badge sits inside the icon's open belly instead of cutting a
     corner hole, so no mask is needed and the number just takes the icon's own color. */
  .header-actions__cart-icon.header-actions__cart-icon--has-cart.header-actions__cart-icon--style-mimco svg {
    mask: none;
  }

  .header-actions__cart-icon.header-actions__cart-icon--style-mimco .cart-bubble {
    /* Centre the count in the bag's belly to match Mimco's live header — 54% lands
       the glyph's optical centre at ~58% of the icon height (below the handle). */
    top: 54%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    --cart-bubble-text: currentColor;
  }

  .header-actions__cart-icon--style-mimco .cart-bubble__background {
    display: none;
  }

  /* Mimco's live count sits larger inside the bag than the default 10px badge. */
  .header-actions__cart-icon--style-mimco .cart-bubble__text {
    font-size: var(--font-size--sm);
  }

  /* Country Road style: the count sits as plain inline text beside the icon rather
     than an overlapping badge, so no mask/circle is needed either. */
  .header-actions__cart-icon.header-actions__cart-icon--style-country_road {
    display: inline-flex;
    align-items: center;
    gap: 1px;
  }

  .header-actions__cart-icon.header-actions__cart-icon--style-country_road .cart-bubble {
    position: static;
    width: auto;
    aspect-ratio: auto;
    --cart-padding: 0;
    --cart-bubble-text: currentColor;
  }

  .header-actions__cart-icon--style-country_road .cart-bubble__background {
    display: none;
  }

  .header-actions__cart-icon--style-country_road .cart-bubble__text {
    font-size: var(--font-size--xs);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart.header-actions__cart-icon--style-country_road svg {
    mask: none;
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:244) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:header-mega-menu (INDEX:245) */
/* Desktop-only — the mobile mega menu drawer takes over below 750px. Unlike the old
     standalone section, this nav sits inline in the header row, so it carries no band
     background/border of its own (the header provides those). */
  .mega-menu {
    display: none;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .mega-menu {
      display: block;
    }
  }

  .mega-menu__container {
    display: flex;
    align-items: center;
    justify-content: var(--mm-nav-align, flex-start);
    gap: var(--padding-2xl);
    width: 100%;
    height: var(--mm-nav-height);
    box-sizing: border-box;
  }

  /* Let the bar span the full row when the mega menu sits on the bottom row (its own
     row, below the logo/actions). This is what gives "space between" room to spread the
     triggers edge to edge; on the bottom row it can claim all three grid tracks without
     colliding with anything on the top row. */
  .header__row--bottom .header__column:has(.mega-menu) {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  /* Full-width dropdown portal. Reparented panels live here; it is absolutely positioned
     against #header-component (which establishes a containing block via contain: layout)
     so panels sit flush below the header and span its full width. */
  .mega-menu__dropdown-portal {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    pointer-events: none;
    z-index: var(--layer-header-menu);
  }

  .mega-menu-backdrop {
    position: fixed;
    inset-block-start: var(--menu-backdrop-top, 0);
    inset-inline: 0;
    inset-block-end: 0;
    background: transparent;
    z-index: calc(var(--layer-header-menu) - 1);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--animation-speed) ease,
      visibility var(--animation-speed) ease;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .mega-menu-backdrop {
      transition-duration: 0.01ms;
    }
  }

  .mega-menu-backdrop[data-backdrop-blur="true"] {
    backdrop-filter: blur(var(--mm-backdrop-blur, 12px));
    -webkit-backdrop-filter: blur(var(--mm-backdrop-blur, 12px));
  }

  .mega-menu-backdrop--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* ---- Nav item hover/active indicator ---- */
  /* Stretch item wrappers to fill the full nav-bar height so the bottom border aligns
     with the bar's bottom edge rather than the button's midpoint. A ::after pseudo-element
     carries the visible line; opacity drives the transition (transform + opacity only). */
  .mega-menu[data-nav-indicator="underline"] .mega-menu-item,
  .mega-menu[data-nav-indicator="underline"] .mega-menu-link {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    box-sizing: border-box;
  }

  .mega-menu[data-nav-indicator="underline"] .mega-menu-item::after,
  .mega-menu[data-nav-indicator="underline"] .mega-menu-link::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: var(--mm-indicator-thickness, 2px);
    background: var(--mm-indicator-color, var(--color-foreground-heading));
    opacity: 0;
    transition: opacity var(--animation-speed) ease;
  }

  .mega-menu[data-nav-indicator="underline"] .mega-menu-item:hover::after,
  .mega-menu[data-nav-indicator="underline"] .mega-menu-link:hover::after,
  .mega-menu[data-nav-indicator="underline"] .mega-menu-item:has(.mega-menu__btn:focus-visible)::after,
  .mega-menu[data-nav-indicator="underline"] .mega-menu-link:has(.mega-menu__btn:focus-visible)::after,
  .mega-menu[data-nav-indicator="underline"] .mega-menu-item--active::after {
    opacity: 1;
  }

  .mega-menu[data-nav-hover-bold="true"] .mega-menu__btn:hover .mega-menu__btn-text,
  .mega-menu[data-nav-hover-bold="true"] .mega-menu__btn:focus-visible .mega-menu__btn-text,
  .mega-menu[data-nav-hover-bold="true"] .mega-menu-item--active .mega-menu__btn-text {
    font-weight: 700;
  }

  /* Pre-reserve the bold width so adjacent nav items don't shift (prevents CLS).
     data-text duplicates the label text; the ::after renders it bold but invisible,
     making the span as wide as its boldest state at all times. */
  .mega-menu[data-nav-hover-bold="true"] .mega-menu__btn-text {
    display: grid;
  }

  .mega-menu[data-nav-hover-bold="true"] .mega-menu__btn-text::after {
    content: attr(data-text);
    font-weight: 700;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .mega-menu[data-nav-indicator="underline"] .mega-menu-item::after,
    .mega-menu[data-nav-indicator="underline"] .mega-menu-link::after {
      transition-duration: 0.01ms;
    }
  }
/* END_SNIPPET:header-mega-menu */

/* START_SNIPPET:jumbo-text (INDEX:251) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:254) */
/* "All" option — separate from the filter values with a gap */
  .facets__inputs-list-item--all {
    margin-block-end: 16px;
  }

  /* When "All" is selected (no other options active), prevent interaction and dim */
  .facets__inputs-list-item--all:has(.checkbox__input:checked) {
    pointer-events: none;
    opacity: var(--disabled-opacity);
  }

  .facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .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:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:255) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item-disabled {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:lookbook-explore-links (INDEX:256) */
.lookbook-explore-links {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-block: 2.5rem;
  }

  .lookbook-explore-links__header {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }

  .lookbook-explore-links__heading {
    /* h2 for correct heading hierarchy after the page h1; sized to match its original h6 look */
    font: inherit;
    margin: 0;
    text-transform: uppercase;
  }

  .lookbook-explore-links__cta {
    text-transform: uppercase;
    text-decoration: underline;
  }

  .lookbook-explore-links__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .lookbook-explore-links__link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .lookbook-explore-links__image {
    width: 100%;
    height: auto;
    display: block;
  }

  .lookbook-explore-links__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 1rem;
    text-align: left;
    letter-spacing: 0.05em;
  }

  .lookbook-explore-links__link:has(.lookbook-explore-links__image) .lookbook-explore-links__label {
    color: var(--color-white);
    text-shadow: 0 0 20px rgb(0 0 0 / 0.5);
  }

  @media screen and (min-width: 750px) {
    .lookbook-explore-links__list {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* END_SNIPPET:lookbook-explore-links */

/* START_SNIPPET:lookbook-look (INDEX:257) */
.lookbook-look {
    display: flex;
    flex-direction: column;
  }

  .lookbook-look__images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lookbook-look__image {
    width: 100%;
    height: auto;
    display: block;
  }

  .lookbook-look__caption-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-inline: 24px;
    margin-block: 40px;
    height: 100%;
    justify-content: space-between;
  }

  .lookbook-look__title {
    display: block;
    font-family: var(--font-body--family);
    font-size: 1rem;
    text-transform: uppercase;
  }

  .lookbook-look__cta {
    width: 100%;
    max-height: 44px;
    font-family: var(--font-body--family);
    font-size: 12px;
    text-transform: uppercase;
  }

  .lookbook-look__products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media screen and (min-width: 750px) {
    .lookbook-look--full .lookbook-look__images {
      grid-template-columns: 1fr 1fr;
    }

    .lookbook-look--full .lookbook-look__image {
      aspect-ratio: 1440 / 1700;
      height: 100%;
      object-fit: cover;
    }

    .lookbook-look__caption-wrapper {
      padding-inline: 80px;
    }

    .lookbook-look__products {
      grid-template-columns: repeat(4, 1fr);
    }

    .lookbook-look--full .lookbook-look__caption-wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 120px;
      justify-content: space-between;
    }

    .lookbook-look--full .lookbook-look__caption {
      grid-column: 1;
      grid-row: 1;
    }

    .lookbook-look--full .lookbook-look__cta {
      grid-column: 1;
      grid-row: 2;
      align-self: end;
    }

    .lookbook-look--full .lookbook-look__products {
      grid-column: 2;
      grid-row: 1 / 3;
    }
  }
/* END_SNIPPET:lookbook-look */

/* START_SNIPPET:lookbook-product-swatch (INDEX:258) */
.lookbook-product-swatch {
    display: block;
  }

  .lookbook-product-swatch__image {
    width: 100%;
    height: auto;
    display: block;
  }
/* END_SNIPPET:lookbook-product-swatch */

/* START_SNIPPET:market-badge (INDEX:259) */
/* Zero-size anchor: establishes a local positioning context for the badge
     without taking up space or becoming a real flex/grid item alongside
     whatever this snippet is rendered next to (e.g. content_for 'blocks'). */
  .market-badge-anchor {
    position: relative;
    width: 0;
    height: 0;
  }

  .market-badge {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-start: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-background);
    color: var(--color-foreground);
    font-size: var(--font-size--3xs);
    font-family: var(--font-body--family);
    line-height: 1.4;
    white-space: nowrap;
    z-index: 1;
  }
/* END_SNIPPET:market-badge */

/* START_SNIPPET:media (INDEX:261) */
.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__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .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:mega-menu-panel (INDEX:263) */
/* ---- Trigger button (shared by item + link blocks) ---- */
  .mega-menu__btn {
    display: flex;
    align-items: center;
    gap: var(--padding-2xs);
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--animation-speed) ease;
  }

  .mega-menu__btn:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  .mega-menu__btn-text {
    font-family: var(--mm-btn-font-family, var(--font-body--family));
    font-size: var(--mm-btn-font-size, var(--menu-font-sm--size));
    font-weight: var(--mm-btn-font-weight, 600);
    line-height: var(--menu-font-sm--line-height);
    text-transform: var(--mm-btn-text-transform, none);
    color: var(--mm-btn-color, var(--color-foreground-heading));
    white-space: nowrap;
  }

  .mega-menu__btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    color: var(--color-foreground-heading);
    transition: transform var(--animation-speed) ease;
  }

  .mega-menu-item--active .mega-menu__btn-icon {
    transform: rotate(180deg);
  }

  /* ---- Dropdown panel ---- */
  .mega-menu__dropdown {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    width: 100%;
    background: var(--color-background);
    box-shadow: var(--shadow-mega-menu, 0 8px 32px rgb(var(--color-foreground-rgb) / 0.12));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transform-origin: top center;
    transition:
      opacity var(--animation-speed) ease,
      transform var(--animation-speed) ease,
      visibility var(--animation-speed) ease;
  }

  .mega-menu__dropdown--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .mega-menu__dropdown[hidden] {
    display: none;
  }

  /* Horizontal alignment comes from the wrapping .section grid (central column),
     so the panel only owns its vertical padding and internal layout. */
  .mega-menu__panel {
    display: flex;
    justify-content: center;
    gap: var(--padding-3xl);
    padding-block: var(--padding-2xl);
    box-sizing: border-box;
  }

  /* Content alignment: default is 'space_between' (grid-stretch so .mega-menu__columns
     flex-grows and pushes rail/promos to the panel edges). 'center' shrinks the
     panel to its intrinsic content width and centres it inside the page-width
     column — width: fit-content is explicit; margin-inline: auto handles centring. */
  .mega-menu__dropdown-portal[data-panel-content-align="center"] .mega-menu__panel {
    width: fit-content;
    margin-inline: auto;
  }

  /* The dropdown background spans the viewport; the .section grid inside stays
     transparent so only the panel's central-column content is constrained. */
  .mega-menu__dropdown .section {
    background: transparent;
  }

  /* Quick-links rail styles live in the Quick Links Rail / Rail Link blocks. */

  /* ---- Heading columns ---- */
  /* Grow to fill the panel width; centre the heading groups within that filled
     area so content radiates from the middle but still reaches the container edges. */
  .mega-menu__columns {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--padding-2xl) var(--padding-5xl);
    min-width: 0;
  }

  .mega-menu__group {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
    flex-shrink: 0;
  }

  .mega-menu__group-heading {
    margin: 0;
    padding-block-end: var(--padding-md);
    border-block-end: var(--style-border-width, 1px) solid rgb(var(--color-border-rgb) / var(--opacity-10));
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: var(--menu-font-md--line-height);
    color: var(--color-foreground-heading);
  }

  .mega-menu__group-heading a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--animation-speed) ease;
  }

  .mega-menu__group-heading a:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  .mega-menu__group-heading a:hover {
    opacity: 0.7;
  }

  /* No link list follows a childless heading, so drop the divider that visually separates heading from list. */
  .mega-menu__group--childless .mega-menu__group-heading {
    padding-block-end: 0;
    border-block-end: 0;
  }

  /* Long link lists wrap into balanced columns under one full-width heading.
     The wrap point = (links per column) x (item height), filling column-major.
     --mm-per-column is set inline per group; --mm-item-height matches one link's
     line-height + vertical padding so exactly N items fill a column. */
  .mega-menu__link-list {
    /* --mm-item-height = line-height (~27px at 16px font) + padding-block * 2 (4px each) = 35px + 1px buffer = 36px */
    --mm-item-height: 36px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    column-gap: var(--padding-5xl);
    /* +2px prevents rounding from clipping the last item in a column */
    max-height: calc(var(--mm-per-column, 5) * var(--mm-item-height) + 2px);
  }

  .mega-menu__link {
    display: block;
    padding-block: var(--padding-2xs);
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: 400;
    line-height: var(--menu-font-md--line-height);
    color: var(--color-foreground, var(--color-foreground-muted));
    text-decoration: none;
    white-space: nowrap;
  }

  .mega-menu__link:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  .mega-menu__link:hover {
    text-decoration: underline;
  }

  /* ---- Promo grid wrapper ---- */
  /* Narrow desktop (750px-1279px): promos hidden when alongside columns/rail.
     Wide desktop (min-width: 1280px): promos shown at a fixed grid width. */
  .mega-menu__promos {
    order: 3;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(var(--mm-promos-per-row, 1), minmax(0, 1fr));
    gap: var(--padding-lg);
    /* Panel is a flex container with default align-items: stretch, so the promos
       wrapper stretches to match the tallest sibling (heading columns). Without
       this, grid's default align-content: stretch distributes the leftover
       vertical space across promo rows, producing visible empty gutters below
       each image when there are fewer promos than headings are tall. */
    align-content: start;
  }

  /* Narrow: hide promo grid when it shares the panel with columns or a rail. */
  .mega-menu__panel:has(.mega-menu__columns, .mega-menu__quick-links) .mega-menu__promos {
    display: none;
  }

  /* Narrow: promo-only panel — no minimum height; grid fills available width. */
  .mega-menu__panel:not(:has(.mega-menu__columns, .mega-menu__quick-links)) {
    min-height: 0;
  }

  .mega-menu__panel:not(:has(.mega-menu__columns, .mega-menu__quick-links)) .mega-menu__promos {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Individual promo: spans N grid columns via --mm-promo-span set inline per block. */
  .mega-menu__promo {
    grid-column: span var(--mm-promo-span, 1);
  }

  @media screen and (min-width: 1280px) {
    /* Wide desktop: panels have a minimum height; promos are shown alongside columns. */
    .mega-menu__panel {
      min-height: var(--mm-panel-min-height, 320px);
    }

    .mega-menu__panel:has(.mega-menu__columns, .mega-menu__quick-links) .mega-menu__promos {
      display: grid;
      width: calc(var(--mm-promos-per-row, 1) * var(--mm-promo-width, 210px) + (var(--mm-promos-per-row, 1) - 1) * var(--padding-lg));
    }

    /* Promo-only panel: restore fixed-width grid sizing. */
    .mega-menu__panel:not(:has(.mega-menu__columns, .mega-menu__quick-links)) .mega-menu__promos {
      flex: 0 0 auto;
      width: calc(var(--mm-promos-per-row, 1) * var(--mm-promo-width, 210px) + (var(--mm-promos-per-row, 1) - 1) * var(--padding-lg));
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .mega-menu__btn,
    .mega-menu__btn-icon,
    .mega-menu__group-heading a {
      transition-duration: 0.01ms;
    }

    .mega-menu__dropdown {
      transition-duration: 0.01ms;
      transform: translateY(0);
    }
  }

  /* ---- Masonry layout (opt-in via section setting: mega_menu_layout=masonry) ----
     Heading groups pack vertically into N balanced columns instead of laying out one
     heading per column. The [data-mega-menu-layout] attribute lives on the portal
     (see sections/header.liquid) so reparented panels inherit it. Additive — the
     default 'flow' layout above is unchanged. */
  [data-mega-menu-layout="masonry"] .mega-menu__columns {
    display: block;
    /* columns: <count> <min-width> — the browser uses whichever produces fewer columns,
       so the count acts as a cap and columns automatically reduce when panel width is
       constrained (e.g. when a promo grid or quick-links rail shares the panel). */
    columns: var(--mm-masonry-columns, 5) var(--mm-masonry-column-min-width, 180px);
    column-gap: var(--padding-5xl);
    gap: initial;
  }

  [data-mega-menu-layout="masonry"] .mega-menu__group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
    margin-block-end: var(--padding-2xl);
  }

  [data-mega-menu-layout="masonry"] .mega-menu__group:last-child {
    margin-block-end: 0;
  }

  /* Inside masonry groups, link lists are a single vertical stack — the outer
     multi-column layout handles the packing, so the inner flex-wrap fake-columns
     from the flow layout would fight it. */
  [data-mega-menu-layout="masonry"] .mega-menu__link-list {
    max-height: none;
    column-gap: 0;
    flex-wrap: nowrap;
  }

  /* Masonry columns have a fixed effective width, so long link labels that would
     otherwise overflow (base .mega-menu__link is white-space: nowrap for the flow
     layout where groups flex-grow to fit) must wrap onto the next line. Flow
     layout keeps the nowrap behaviour. */
  [data-mega-menu-layout="masonry"] .mega-menu__link {
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Masonry for the promo grid — same technique, scoped to promo-only panels.
     When the panel also has heading columns or a quick-links rail, promos fall
     through to the base CSS-grid layout so `promos_per_row` renders as declared
     (multi-column balances by height and would otherwise silently ignore the
     configured column count). */
  [data-mega-menu-layout="masonry"] .mega-menu__panel:not(:has(.mega-menu__columns, .mega-menu__quick-links)) .mega-menu__promos {
    display: block;
    columns: var(--mm-promos-per-row, 1);
    column-gap: var(--padding-lg);
    gap: initial;
  }

  [data-mega-menu-layout="masonry"] .mega-menu__panel:not(:has(.mega-menu__columns, .mega-menu__quick-links)) .mega-menu__promo {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
    margin-block-end: var(--padding-lg);
    grid-column: unset;
  }

  [data-mega-menu-layout="masonry"] .mega-menu__panel:not(:has(.mega-menu__columns, .mega-menu__quick-links)) .mega-menu__promo:last-child {
    margin-block-end: 0;
  }

  /* Opt-out for the heading→link-list underline. Attribute lives on the portal
     (see sections/header.liquid) so reparented panels inherit it. Additive:
     default state (attribute absent or "true") is unchanged from the base rule. */
  [data-heading-divider="false"] .mega-menu__group-heading {
    padding-block-end: 0;
    border-block-end: 0;
  }

  /* Additive panel typography. Higher-specificity ancestor selector (.mega-menu__dropdown-portal)
     lets these rules override the base .mega-menu__group-heading / .mega-menu__link rules only
     for reparented panels. Fallbacks reproduce the base rule values verbatim, so brands that
     leave the settings at defaults see zero visual change. */
  .mega-menu__dropdown-portal .mega-menu__group-heading {
    font-family: var(--mm-heading-font-family, var(--font-body--family));
    font-size: var(--mm-heading-font-size, var(--font-size--md));
    font-weight: var(--mm-heading-font-weight, 600);
    text-transform: var(--mm-heading-text-transform, none);
    color: var(--mm-heading-color, var(--color-foreground-heading));
  }

  .mega-menu__dropdown-portal .mega-menu__link {
    font-family: var(--mm-link-font-family, var(--font-body--family));
    font-size: var(--mm-link-font-size, var(--font-size--md));
    font-weight: var(--mm-link-font-weight, 400);
    text-transform: var(--mm-link-text-transform, none);
    color: var(--mm-link-color, var(--color-foreground, var(--color-foreground-muted)));
  }
/* END_SNIPPET:mega-menu-panel */

/* START_SNIPPET:mobile-mega-menu-drawer-footer (INDEX:267) */
/* Separate from the promo tiles stacked directly above it in a sub-panel
     (mobile-mega-menu.js inserts .mobile-mega-menu__promos as the preceding
     sibling). No-op at the drawer root, which has no promos. */
  .mobile-mega-menu__promos + [data-mm-drawer-footer] {
    padding-block-start: var(--padding-xl);
  }

  .mobile-mega-menu__account {
    display: flex;
    align-items: center;
    gap: var(--padding-sm);
    padding-block: var(--padding-xl);
    margin-inline: calc(-1 * var(--padding-lg));
    padding-inline: var(--padding-lg) ;
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
  }

  .mobile-mega-menu__account-icon {
    flex-shrink: 0;
    color: var(--color-foreground-heading);
  }

  .mobile-mega-menu__account-trigger {
    cursor: pointer;
  }

  /* Unstyle the native <shopify-account> shadow button so only the label shows. */
  .mobile-mega-menu__account-trigger::part(signed-out-avatar) {
    display: inline;
    min-height: 0;
    height: auto;
    padding: 0;
    background: transparent;
    font: inherit;
    line-height: inherit;
    color: inherit;
  }

  .mobile-mega-menu__account-label {
    font-family: var(--font-body--family);
    font-size: var(--font-size--md, 1.125rem);
    font-weight: 400;
    color: var(--color-foreground-heading);
    text-decoration: none;
  }

  /* Full-bleed grey group — cancels the drawer's inline padding so this section
     runs edge-to-edge, then reapplies it internally for the link text. */
  .mobile-mega-menu__about-group {
    margin-inline: calc(-1 * var(--padding-lg));
    padding-inline: var(--padding-lg);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .mobile-mega-menu__about-link {
    display: block;
    padding-block: var(--padding-md);
    font-family: var(--font-body--family);
    font-size: var(--font-size--md, 1.125rem);
    font-weight: 400;
    color: var(--color-foreground-heading);
    text-decoration: none;
  }

  .mobile-mega-menu__help-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--padding-md);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body--family);
    font-size: var(--font-size--md, 1.125rem);
    font-weight: 400;
    color: var(--color-foreground-heading);
  }

  .mobile-mega-menu__help-summary::-webkit-details-marker {
    display: none;
  }

  /* Override base.css's global `summary:hover` dimming — keep full heading colour. */
  .mobile-mega-menu__help-summary:hover {
    color: var(--color-foreground-heading);
  }

  .mobile-mega-menu__help-summary .menu__heading__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-inline-end: calc(-1 * var(--padding-2xs));
  }

  .mobile-mega-menu__help-summary .menu__heading__toggle svg {
    --icon-stroke-width: 1px;
    width: 28px;
    height: 28px;
  }

  .mobile-mega-menu__help-accordion .mobile-mega-menu__about-link {
    padding-block: var(--padding-sm);
    padding-inline-start: 3.25rem;
  }

  .mobile-mega-menu__utilities {
    padding-block: var(--padding-3xl);
  }

  .mobile-mega-menu__localization {
    padding-block-end: var(--padding-lg);
    color: var(--color-foreground);
  }

  .mobile-mega-menu__localization-button {
    display: flex;
    align-items: center;
    gap: var(--gap-xs, 0.3rem);
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    text-decoration: none;
  }

  .mobile-mega-menu__localization-button .icon-flag {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
  }

  .mobile-mega-menu__localization-dropdown {
    position: relative;
  }

  .mobile-mega-menu__localization .localization-wrapper {
    position: absolute;
    top: 100%;
    margin-block-start: 0.5rem;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    border-radius: var(--border-radius-popover, 8px);
    box-shadow: var(--shadow-popover);
    z-index: var(--layer-raised);
  }

  .mobile-mega-menu__copyright {
    padding-block: var(--padding-lg);
    color: var(--color-foreground);
  }

  .mobile-mega-menu__copyright-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-block-start: var(--padding-sm);
    font-size: var(--font-size--sm, 0.875rem);
  }

  .mobile-mega-menu__copyright-link {
    display: inline-flex;
  }

  .mobile-mega-menu__copyright-link:not(:last-child)::after {
    content: "-";
    margin-inline: var(--gap-xs, 8px);
    opacity: 0.6;
  }

  .mobile-mega-menu__copyright-links a {
    color: var(--color-foreground);
    text-decoration: none;
  }

  .mobile-mega-menu__copyright-links a:hover {
    text-decoration: underline;
  }
/* END_SNIPPET:mobile-mega-menu-drawer-footer */

/* START_SNIPPET:mobile-mega-menu-trigger (INDEX:268) */
/* Visible on mobile; hidden at the tablet breakpoint where the desktop mega menu appears. */
  .mobile-mega-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mm-trigger-size, 40px);
    height: var(--mm-trigger-size, 40px);
    padding: var(--padding-2xs);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-foreground-heading);
  }

  .mobile-mega-menu-trigger:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary);
    outline-offset: var(--focus-outline-offset);
  }

  @media screen and (min-width: 750px) {
    .mobile-mega-menu-trigger {
      display: none;
    }
  }
/* END_SNIPPET:mobile-mega-menu-trigger */

/* START_SNIPPET:overlay (INDEX:270) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:271) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:272) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:276) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:277) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    color: var(--color-foreground-muted);
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }

  .facets__status .hide-when-empty {
    color: var(--color-foreground);
  }

  /* Range slider */
  .price-range-slider {
    --slider-thumb-size: 18px;
    --slider-track-height: 1px;

    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    padding-block: var(--padding-xs) var(--padding-sm);
  }

  .price-range-slider__labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .price-range-slider__track-wrapper {
    position: relative;
    height: var(--slider-thumb-size);
    display: flex;
    align-items: center;
    /* Inset the track by half a thumb so the thumbs at 0%/100% sit fully inside the
       container (their centres land on the inset edges) instead of overflowing it. The
       labels span the full width, so thumb edges still align with the price labels. */
    margin-inline: calc(var(--slider-thumb-size) / 2);
  }

  .price-range-slider__track,
  .price-range-slider__fill {
    position: absolute;
    height: var(--slider-track-height);
    border-radius: 9999px;
    pointer-events: none;
  }

  .price-range-slider__track {
    inset-inline: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .price-range-slider__fill {
    left: 0;
    width: 0;
    background-color: var(--color-foreground);
  }

  .price-range-slider__thumb {
    position: absolute;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    border-radius: 50%;
    background-color: var(--color-foreground);
    cursor: grab;
    touch-action: none;
    transform: translateX(-50%);
    transition: transform var(--animation-speed) var(--animation-easing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    &:hover {
      transform: translateX(-50%) scale(1.15);
    }

    &:active {
      cursor: grabbing;
      transform: translateX(-50%) scale(0.95);
    }

    &:focus-visible {
      outline: 2px solid var(--color-foreground);
      outline-offset: 3px;
    }
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badge-pills-styles (INDEX:279) */
.product-badge-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
  }

  .product-badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-sm) var(--padding-lg);
    border: none;
    border-radius: 999px;
    background: rgb(var(--color-foreground-rgb) / 0.06);
    color: var(--color-foreground);
    font: inherit;
    line-height: 1.3;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
  }

  .product-badge-pill:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: 2px;
  }

  .product-badge-pill__modal.dialog-modal {
    inset: 0;
    margin: auto;
    width: min(720px, 92vw);
    max-width: min(720px, 92vw);
    height: fit-content;
    max-height: 90dvh;
    padding: var(--padding-2xl) var(--padding-xl);
    overflow: auto;
    border-radius: 0;
    color: var(--color-foreground);
    background: var(--color-background);
  }

  /* The base .dialog-modal slide-in keyframe pins margin-top:0 (top-anchored).
     Use a fade-only animation so `margin: auto` can centre the modal. */
  .product-badge-pill__modal.dialog-modal[open] {
    animation: badgePillFadeIn var(--animation-speed) var(--animation-easing) forwards;
  }

  .product-badge-pill__modal.dialog-modal.dialog-closing {
    animation: badgePillFadeOut var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes badgePillFadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes badgePillFadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-badge-pill__modal.dialog-modal[open],
    .product-badge-pill__modal.dialog-modal.dialog-closing {
      animation-duration: 0.01ms;
    }
  }

  .product-badge-pill__close {
    position: absolute;
    inset-block-start: var(--padding-lg);
    inset-inline-end: var(--padding-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .product-badge-pill__close svg {
    width: 100%;
    height: 100%;
  }

  .product-badge-pill__heading {
    margin: 0 0 var(--margin-lg);
    padding-inline: var(--padding-xl);
    font-size: var(--font-size--lg);
    text-align: center;
  }

  .product-badge-pill__body {
    line-height: 1.5;
  }

  .product-badge-pill__body > :first-child {
    margin-block-start: 0;
  }

  .product-badge-pill__body > :last-child {
    margin-block-end: 0;
  }
/* END_SNIPPET:product-badge-pills-styles */

/* START_SNIPPET:product-badges-styles (INDEX:280) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:283) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:284) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --product-grid-col-gap: var(--product-grid-col-gap-mobile);
    --mobile-columns: 2; /* legacy variable — layout is now driven by product-grid-view attribute */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
      --product-grid-col-gap: var(--product-grid-col-gap-desktop);
    }
  }

  /* Card spacing for the products-per-row views (formerly carried by the
     [product-grid-view='default'] rule in base.css). */
  .product-grid[product-grid-view='auto'],
  .product-grid[product-grid-view='1'],
  .product-grid[product-grid-view='2'],
  .product-grid[product-grid-view='3'] {
    --padding-block-start: var(--padding-2xl);
    --padding-block-end: var(--padding-2xl);
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid[product-grid-view='auto'] .product-grid__item,
  .product-grid[product-grid-view='1'] .product-grid__item,
  .product-grid[product-grid-view='2'] .product-grid__item,
  .product-grid[product-grid-view='3'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding-block: var(--padding-block-start) var(--padding-block-end);
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:285) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:286) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: pointer;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: pointer;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:287) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']):not(:focus-visible) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    --zoom-shadow: 0 1px 4px rgb(0 0 0 / 0.15);

    color: var(--color-foreground);
    z-index: var(--layer-raised);
    background: var(--color-background);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--zoom-shadow);
  }

  .dialog-zoomed-gallery__close-button svg {
    width: 22px;
    height: 22px;
  }

  /* Remove active thumbnail border in full zoom dialog; preserve keyboard focus ring */
  .dialog-zoomed-gallery .dialog-thumbnails-list__thumbnail:is([aria-selected='true']):not(:focus-visible) {
    border: none;
    outline: none;
  }

  .dialog-zoomed-gallery .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail[aria-selected='true'])::after {
    content: none;
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  /* ---- Half-screen zoom dialog ------------------------------------------ */

  /* Mobile: full-screen */
  .zoom-half-dialog {
    --zoom-half-thumb-size: 88px;
    --zoom-overlay-bg: rgb(0 0 0 / 0.5);
    --zoom-shadow: 0 1px 4px rgb(0 0 0 / 0.15);
    --zoom-half-scale: 2;

    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    background: var(--color-background);
  }

  .zoom-half-dialog:not([open]) {
    display: none;
  }

  .zoom-half-dialog::backdrop {
    background: var(--zoom-overlay-bg);
  }

  .zoom-half-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
  }

  /* Mobile-first: circle button with shadow */
  .zoom-half-panel__close {
    position: absolute;
    top: var(--padding-sm);
    right: var(--padding-sm);
    z-index: var(--layer-raised);
    color: var(--color-foreground);
    background: var(--color-background);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--zoom-shadow);
  }

  .zoom-half-panel__close:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .zoom-half-panel__close svg {
    width: 22px;
    height: 22px;
  }

  /* Main image area — sized by image content on mobile */
  .zoom-half-panel__media {
    position: relative;
    overflow: hidden;
  }

  .zoom-half-panel__media .product-media-container {
    width: 100%;
    height: auto;
    aspect-ratio: unset;
  }

  .zoom-half-panel__media .product-media-container[hidden] {
    display: none;
  }

  .zoom-half-panel__media .product-media-container.is-entering {
    animation: zoom-half-img-in var(--animation-speed) var(--animation-easing) forwards;
  }

  .zoom-half-panel__media .product-media-container.is-leaving {
    animation: zoom-half-img-out var(--animation-speed) var(--animation-easing) forwards;
  }

  /* During slide animation on mobile, fix height and stack containers */
  .zoom-half-panel__media.is-animating {
    height: var(--zoom-anim-height);
  }

  .zoom-half-panel__media.is-animating .product-media-container {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: unset;
  }

  .zoom-half-panel__media .product-media,
  .zoom-half-panel__media .product-media picture {
    height: auto;
    aspect-ratio: unset;
  }

  .zoom-half-panel__media .product-media__image {
    width: 100%;
    height: auto;
  }

  /* Thumbnail strip — horizontal on mobile */
  .zoom-half-panel__thumb-track {
    padding: var(--padding-sm);
    display: flex;
    justify-content: center;
  }

  .zoom-half-panel__thumbs {
    max-width: 100%;
    flex-direction: row;
    gap: var(--gap-sm);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-block: var(--padding-xs);
  }

  .zoom-half-panel__thumbs::-webkit-scrollbar {
    display: none;
  }

  .zoom-half-panel__thumbs .dialog-thumbnails-list__thumbnail {
    --thumbnail-width: var(--zoom-half-thumb-size);
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .zoom-half-panel__thumbs .dialog-thumbnails-list__thumbnail:hover {
    opacity: 1;
  }

  /* Mobile-first: underline on active thumbnail; preserve keyboard focus ring */
  .zoom-half-panel__thumbs .dialog-thumbnails-list__thumbnail:is([aria-selected='true']):not(:focus-visible) {
    opacity: 1;
    border: none;
    outline: none;
    border-bottom: 2px solid var(--color-foreground);
    padding-bottom: 2px;
  }

  .zoom-half-panel__thumbs .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
    opacity: 1;
  }

  .zoom-half-panel__thumbs.dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail[aria-selected])::after {
    content: none;
  }

  /* Desktop: left-half sliding panel */
  @media screen and (min-width: 750px) {
    .zoom-half-dialog {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      margin: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
      display: flex;
      flex-direction: row;
      align-items: stretch;
    }

    .zoom-half-dialog::backdrop {
      background: transparent;
    }

    /* Custom backdrop covers the right half — delayed to start after panel slides in */
    .zoom-half-backdrop {
      flex: 1;
      background: var(--zoom-overlay-bg);
      animation: zoom-half-backdrop-in var(--animation-speed) var(--animation-easing) var(--spring-d300-b0-duration) both;
      cursor: pointer;
    }

    .dialog--closing .zoom-half-backdrop {
      animation: zoom-half-backdrop-out var(--animation-speed) var(--animation-easing) forwards;
    }

    /* Panel occupies the left 50% and slides in */
    .zoom-half-panel {
      width: 50%;
      height: 100%;
      flex-direction: row;
      background: var(--color-background);
      animation: zoom-half-slide-in var(--spring-d300-b0-duration) var(--spring-d300-b0-easing) forwards;
      overflow: hidden;
    }

    .dialog--closing .zoom-half-panel {
      animation: zoom-half-slide-out var(--animation-speed) var(--animation-easing) forwards;
    }

    /* Desktop: undo mobile circle, reposition */
    .zoom-half-panel__close {
      position: absolute;
      top: var(--padding-md);
      right: var(--padding-md);
      background: none;
      border-radius: 0;
      min-width: var(--minimum-touch-target);
      min-height: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
    }

    .zoom-half-panel__close svg {
      width: 40px;
      height: 40px;
    }

    /* Desktop: no underline on active thumbnail */
    .zoom-half-panel__thumbs .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      border-bottom: none;
      padding-bottom: 0;
    }

    /* Image fills the panel minus the thumbnail strip */
    .zoom-half-panel__media {
      flex: 1;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: stretch;
      position: relative;
    }

    .zoom-half-panel__media .product-media-container {
      aspect-ratio: unset;
      max-height: none;
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .zoom-half-panel__media .product-media-container--image .product-media,
    .zoom-half-panel__media .product-media-container--image .product-media picture {
      aspect-ratio: auto;
      height: 100%;
      overflow: hidden;
    }

    .zoom-half-panel__media .product-media-container--image .product-media__image {
      height: 100%;
      width: auto;
    }

    /* Hover zoom on desktop */
    .zoom-half-panel__media {
      cursor: zoom-in;
    }

    .zoom-half-panel__media .product-media__image {
      transform-origin: var(--hover-zoom-x, 50%) var(--hover-zoom-y, 50%);
      transition: transform var(--animation-speed) var(--animation-easing);
    }

    .zoom-half-panel__media.is-hover-zoomed .product-media__image {
      transform: scale(var(--zoom-half-scale));
      will-change: transform;
    }

    /* Thumbnail strip — vertical on desktop, right edge of panel */
    .zoom-half-panel__thumb-track {
      flex: 0 0 calc(var(--zoom-half-thumb-size) + 2 * var(--padding-xl));
      height: 100%;
      padding: var(--padding-xl);
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
    }

    .zoom-half-panel__thumbs {
      flex-direction: column;
      gap: var(--gap-sm);
      overflow-y: auto;
      overflow-x: hidden;
      flex: 1;
    }
  }

  @keyframes zoom-half-slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  @keyframes zoom-half-slide-out {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
  }

  @keyframes zoom-half-img-in {
    from { transform: translateX(calc(100% * var(--zoom-slide-dir, 1))); }
    to { transform: translateX(0); }
  }

  @keyframes zoom-half-img-out {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% * var(--zoom-slide-dir, 1))); }
  }

  @keyframes zoom-half-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes zoom-half-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .zoom-half-panel,
    .zoom-half-backdrop {
      animation-duration: 0.01ms;
      animation-delay: 0s;
    }

    .zoom-half-panel__media .product-media__image,
    .zoom-half-panel__thumbs .dialog-thumbnails-list__thumbnail {
      transition-duration: 0.01ms;
    }
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:288) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:product-overlay-badges-styles (INDEX:290) */
.product-overlays {
    z-index: var(--layer-flat);
    display: flex;
    pointer-events: none;
  }

  .product-overlays__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* --ov-fg / --ov-bg come straight from the merchant's metaobject colour fields, so text/
       background contrast is content governance, not enforceable here — contrast guidance lives
       in the metaobject field help-text and the merchant guide. */
    color: var(--ov-fg, var(--color-background));
    background: var(--ov-bg, var(--color-foreground));
    font-size: var(--ov-fs, var(--font-size--xs));
    font-weight: var(--ov-fw, 500);
    letter-spacing: var(--ov-ls, normal);
    line-height: 1.2;
    padding-block: var(--ov-pt, var(--padding-xs)) var(--ov-pb, var(--padding-xs));
  }

  /* PLP card — full-width strip stacked at the bottom of the image */
  .product-overlays--card {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    flex-direction: column;
  }

  .product-overlays--card .product-overlays__badge {
    padding-inline: var(--padding-sm);
  }

  /* PDP — square badges pinned to the top-left corner of the primary media */
  .product-media-container:has(> .product-overlays--pdp) {
    position: relative;
  }

  .product-overlays--pdp {
    position: absolute;
    top: var(--padding-sm);
    left: var(--padding-sm);
    align-items: flex-start;
    gap: var(--padding-xs);
  }

  .product-overlays--pdp-horizontal {
    flex-direction: row;
  }

  .product-overlays--pdp-vertical {
    flex-direction: column;
  }

  .product-overlays__badge--square {
    flex: 0 0 auto;
    width: var(--ov-size, 100px);
    height: var(--ov-size, 100px);
    padding-inline: var(--padding-sm);
    /* Fixed-size square: `overflow: hidden` clips overly long labels by design. The merchant
       guide instructs short labels (SALE/NEW) for this surface; long promos belong on the strip. */
    overflow: hidden;
  }
/* END_SNIPPET:product-overlay-badges-styles */

/* START_SNIPPET:quantity-selector (INDEX:293) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:294) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  /* The mobile title link is wrapped in an <h2> (see quick-add.js) so the dialog has an
     accessible heading; the heading itself should stay visually invisible since the
     link above already carries the intended size/weight. */
  .quick-add-modal__content .product-header .quick-add-modal__title {
    margin: 0;
    font: inherit;
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:296) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    background-color: var(--quick-add-background, var(--color-background));
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--quick-add-background, var(--color-background));
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:300) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-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-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:301) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:302) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* 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 */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:search-modal (INDEX:305) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:306) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  /* Fake-input search trigger: icon-only on mobile, underline input look on desktop */
  .search-action--input {
    --search-placeholder-width: 18rem;
  }

  .search-action--input .header-actions__action {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .search-action__placeholder {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .search-action--input .header-actions__action {
      gap: var(--gap-xs);
    }

    .search-action__placeholder {
      display: block;
      inline-size: var(--search-placeholder-width);
      max-inline-size: 100%;
      border-block-end: var(--search-border-width, 1px) solid var(--color-foreground);
      color: var(--color-foreground-subdued, var(--color-foreground));
      font-size: var(--font-size--md);
      line-height: normal;
      text-align: start;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:307) */
.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)
    )
    #MainContent
    > .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:size-guide-content (INDEX:308) */
/* Fills the available row width so the trigger lands on the right when it's the block's
     only content — needed for the standalone "No Size" block, which has no parent flex row
     of its own to position it. The single-value and buttons/swatches option rows in
     variant-main-picker.liquid already right-align this via their own parent flex rules
     (base.css), so this is a harmless no-op there — as a flex item itself it stays
     content-sized, and flex-end only affects its own single child. Excludes
     .size-guide--empty, the theme-editor-only "hidden" notice (blocks/size-guide.liquid),
     which shares the .size-guide class but should stay a normal full-width, left-aligned box. */
  .size-guide:not(.size-guide--empty) {
    display: flex;
    justify-content: flex-end;
  }

  .size-guide__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    font-size: inherit;
    cursor: pointer;
    padding-block-end: var(--padding-xs);
  }

  .size-guide__icon {
    width: 16px;
    height: auto;
    transform: rotate(45deg);
  }

  .size-guide__content {
    padding-inline: var(--padding-xl);
    padding-block-end: var(--padding-xl);
    overflow-y: auto;
    /* Explicit, not left to default: a wide table (see .size-guide__table-wrapper)
       scrolls itself horizontally — the drawer as a whole never should. Without this,
       overflow-y: auto alone computes overflow-x to auto too (the "one non-visible axis
       forces the other" CSS rule), letting any wide descendant drag the whole drawer
       into a horizontal scrollbar instead of just the table that actually needs it. */
    overflow-x: hidden;
  }

  /* Sits on the same line as .size-guide__section-heading — see that rule's row layout.
     Heading first, toggle last with margin-inline-start: auto pushes it to the far
     right of the row (rather than relying on justify-content: space-between, which
     would also spread a heading-only or toggle-only row apart). Extra margin-block-end
     (vs. margin-block-start) puts more breathing room between the toggle and the table
     below than between the heading/toggle row and whatever precedes it. */
  .size-guide__section-header {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-block: var(--margin-lg) var(--margin-xl);
  }

  /* Pill/segmented control — two radio options styled as a single sliding track,
     rather than plain radio buttons, to match the density expected next to a
     table heading rather than a full-width form control. margin-inline-start: auto
     pushes it to the far right of .size-guide__section-header regardless of whether
     a heading is also present (space-between would only work when both are). */
  .size-guide__unit-toggle {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    height: 28px;
    box-sizing: border-box;
    gap: 0;
    margin-block: 0;
    margin-inline-start: auto;
    padding: 2px;
    border: 0;
    border-radius: var(--style-border-radius-pills);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .size-guide__unit-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding-3xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    font-size: var(--font-size--sm);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  @media (prefers-reduced-motion: reduce) {
    .size-guide__unit-option {
      transition-duration: 0.01ms;
    }
  }

  .size-guide__unit-option input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .size-guide__unit-option:has(input:checked) {
    background: var(--color-foreground);
    color: var(--color-background);
  }

  .size-guide__unit-option:has(input:focus-visible) {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* Scopes horizontal scrolling to just the table (a table with many columns, e.g. an
     international size conversion table, can be wider than the drawer) instead of the
     whole drawer — see .size-guide__content's own overflow-x: hidden above. Column
     tooltips (size-guide-tooltip.liquid) still escape cleanly above this wrapper despite
     its overflow-x: auto, since their popover is `position: fixed` with coordinates
     computed by assets/size-guide.js rather than plain CSS insets. */
  .size-guide__table-wrapper {
    overflow-x: auto;
  }

  .size-guide__table {
    width: 100%;
    border-collapse: collapse;
  }

  .size-guide__table th,
  .size-guide__table td {
    height: 44px;
    box-sizing: border-box;
    padding: var(--padding-2xs) var(--padding-xs);
    text-align: center;
    border-block-end: var(--style-border-width) solid var(--color-border);
    white-space: nowrap;
  }

  .size-guide__table thead th {
    background: var(--color-foreground);
    color: var(--color-background);
    font-weight: var(--font-weight-bold, 700);
  }

  /* Space between each size-guide table/section in a multi-table drawer. */
  .size-guide__section-table {
    margin-block-end: var(--margin-3xl);
  }

  .size-guide__fit-notes {
    margin-block-end: var(--margin-3xl);
  }

  .size-guide__section-body {
    margin-block-end: var(--margin-lg);
  }

  .size-guide__section-footnote {
    margin-block-start: var(--margin-lg);
  }

  .size-guide__intro-note {
    margin-block-end: var(--margin-lg);
  }

  .size-guide__intro-note p {
    margin-block: 0 var(--margin-sm);
  }

  .size-guide__intro-note p:last-child {
    margin-block-end: 0;
  }

  .size-guide__footer-note {
    margin-block-start: var(--margin-3xl);
    padding-block-start: var(--padding-xl);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  .size-guide__footer-note p {
    margin-block: 0 var(--margin-sm);
  }

  .size-guide__footer-note p:last-child {
    margin-block-end: 0;
  }

  /* Matches .size-guide__section-heading's own treatment, so a merchant-authored
     heading in the footer note (e.g. "Still not sure about your perfect size &
     fit?") reads at the same size/weight as a section heading like "ONE SIZE
     (OS)" rather than the rich text's own default heading style. */
  .size-guide__footer-note :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 var(--margin-sm);
    font-size: var(--font-size--md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
  }

  .size-guide__table th[scope='row'] {
    position: sticky;
    inset-inline-start: 0;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: normal;
  }

  /* Sized down from the default h3/h4 scale and uppercased, since it now shares a row
     with the compact unit-toggle pill rather than standing alone as a large heading. */
  .size-guide__section-heading {
    margin: 0;
    font-size: var(--font-size--md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
  }

  /* Uppercased to match .size-guide__section-heading's own treatment above, rather
     than a literal uppercase string in the locale file. */
  .size-guide__section-subheading {
    margin-block: var(--margin-lg) var(--margin-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
  }

  /* Text and media side by side, media at a fixed 1/3 width, rather than stacked. */
  .size-guide__how-to-measure {
    display: flex;
    gap: var(--gap-md);
    align-items: flex-start;
  }

  .size-guide__rich-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .size-guide__media-group {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .size-guide__media {
    display: block;
    width: 100%;
    height: auto;
    margin-block-end: var(--margin-md);
  }

  .size-guide__media:last-child {
    margin-block-end: 0;
  }

  /* Bottom sheet on mobile instead of Horizon's default right-side drawer.
     Breakpoint matches theme-drawer.js's own squeeze/modal switch (990px) so
     it doesn't introduce a second, inconsistent breakpoint into the theme. */
  @media screen and (max-width: 989px) {
    .size-guide__dialog {
      inset: auto 0 0 0;
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 85vh;
      border-radius: var(--style-border-radius-lg) var(--style-border-radius-lg) 0 0;
      border-left: none;
    }
  }
/* END_SNIPPET:size-guide-content */

/* START_SNIPPET:size-guide-table (INDEX:311) */
.size-guide__table-heading {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-3xs);
  }
/* END_SNIPPET:size-guide-table */

/* START_SNIPPET:size-guide-tooltip (INDEX:312) */
.size-guide__tooltip {
    display: inline-flex;
  }

  /* `.size-guide__tooltip` compound selector (rather than `.size-guide__tooltip-trigger`
     alone) outranks .button-unstyled's own `color: var(--color-foreground)` regardless
     of stylesheet load order — needed so the icon inherits the header row's white
     text color instead of always rendering in the theme's foreground colour. */
  .size-guide__tooltip .size-guide__tooltip-trigger {
    display: inline-flex;
    padding: var(--padding-3xs);
    color: inherit;
    cursor: pointer;
  }

  .size-guide__tooltip-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
  }

  .size-guide__tooltip-icon svg {
    width: 100%;
    height: 100%;
  }

  /* `top`/`left` are set inline by assets/size-guide.js on pointerenter/focusin — see
     the doc comment above for why this can't be plain `position: absolute` + CSS insets. */
  .size-guide__tooltip-popover {
    position: fixed;
    z-index: var(--layer-raised, 10);
    width: max-content;
    max-width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);
  }

  @media (prefers-reduced-motion: reduce) {
    .size-guide__tooltip-popover {
      transition-duration: 0.01ms;
    }
  }

  /* Shown on hover or keyboard focus of the trigger; hidden again the moment the
     pointer/focus leaves — the "auto-close on unhover" behaviour, in place of a close
     button. assets/size-guide.js blurs the trigger on Escape so keyboard users get the
     same dismissal without a dedicated button. */
  .size-guide__tooltip:hover .size-guide__tooltip-popover,
  .size-guide__tooltip:focus-within .size-guide__tooltip-popover {
    opacity: 1;
    visibility: visible;
  }

  /* Matches the PDP's other dark popover tooltips: black background, white text. */
  .size-guide__tooltip-inner {
    position: relative;
    display: block;
    padding: var(--padding-sm) var(--padding-md);
    background: var(--color-foreground);
    color: var(--color-white);
    text-wrap: auto;
  }

  /* Half-arrow, pointing down at the trigger below. Horizontal position defaults to
     centre, but assets/size-guide.js overrides `--_arrow-left` inline when it has
     clamped the popover away from centre, so the arrow still points at the icon. */
  .size-guide__tooltip-inner::after {
    content: '';
    position: absolute;
    inset-block-end: -4px;
    inset-inline-start: var(--_arrow-left, 50%);
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: var(--color-foreground);
  }

  .size-guide__tooltip-content {
    display: block;
    font-size: var(--font-size--sm);
    font-weight: normal;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
    text-align: start;
  }
/* END_SNIPPET:size-guide-tooltip */

/* START_SNIPPET:skip-to-content-link (INDEX:314) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:316) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:317) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:318) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

    &:hover {
      color: var(--color-hover);
    }

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:320) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:322) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    --sorting-option-min-width: 180px;

    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: var(--sorting-option-min-width);
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: var(--sorting-selected-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-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;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:store-details (INDEX:326) */
.store-details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .store-details__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .store-details__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: currentColor;
    text-decoration: none;
  }

  .store-details__phone-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .store-details__phone-text {
    text-decoration: underline;
  }

  .store-details__directions {
    width: 100%;
    max-width: 200px;
    height: 45px;
    font-size: 0.9375rem;
  }

  .store-details__hours {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .store-details__hours-heading {
    margin: 0;
    font-size: 1.125rem;
  }

  .store-details__hours-table {
    width: 100%;
    border-collapse: collapse;
  }

  .store-details__hours-table th,
  .store-details__hours-table td {
    padding-block: 0.375rem;
    font-weight: 400;
    text-align: left;
  }

  .store-details__hours-table td {
    text-align: right;
  }
/* END_SNIPPET:store-details */

/* START_SNIPPET:text (INDEX:332) */
: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);
    color: var(--color, var(--color-foreground));
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .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:theme-drawer-styles (INDEX:334) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:349) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Keeps the Size control clear of the sticky header and the sticky add-to-cart bar when
     scrollIntoView() brings it into view after a "please select a size" validation error
     (see product-form.js). The sticky-add-to-cart-height-* properties are 0px while that bar
     is hidden, and only the one matching its current top/bottom position is ever non-zero
     (see assets/sticky-add-to-cart.js). */
  [data-is-size-option='true'] {
    scroll-margin-block: calc(
        var(--header-group-height, 0px) + var(--sticky-add-to-cart-height-top, 0px) + var(--padding-lg)
      )
      calc(var(--sticky-add-to-cart-height-bottom, 0px) + var(--padding-lg));
  }

  /* Dropdown variant option styles */
  .variant-option__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm);
  }

  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .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);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .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;
    background-color: var(--color-variant-background);
    color: inherit;
    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%);
  }

  /* Rectangular swatch styles */
  .variant-option--swatches--rectangular {
    --swatch-underline-height: 2px;
    --swatch-underline-gap: 2px;
  }

  .swatch--rectangular {
    /* 72px matches blocks/variant-picker.liquid "rectangular_swatch_width" default */
    --swatch-width: var(--swatch-rect-width, 72px);
    --swatch-height: calc(var(--swatch-rect-width, 72px) * 5 / 4); /* 4:5 portrait ratio */
    border-radius: 0;
    border: none;
    background-size: cover;
  }

  .variant-picker .variant-option--swatches--rectangular label:has(.swatch) {
    border-radius: 0;
    padding: 0;
    padding-block-end: var(--swatch-underline-gap);
    border: none;
    outline: none;
    position: relative;
    overflow: visible;
  }

  .variant-option--swatches--rectangular .variant-option__button-label--has-swatch::after {
    content: '';
    position: absolute;
    inset-block-end: calc(var(--swatch-underline-gap) / -2);
    inset-inline: 0;
    height: var(--swatch-underline-height);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-20));
  }

  .variant-option--swatches--rectangular .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .variant-option--swatches--rectangular .variant-option__button-label--has-swatch:hover::after {
    background-color: rgb(var(--color-foreground-rgb));
  }

  .variant-option--swatches--rectangular:has(.variant-option__button-label--has-swatch:hover)
    .variant-option__button-label--has-swatch:has(:checked):not(:hover)::after {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-20));
  }

  .variant-option--swatches--rectangular .variant-option__button-label--has-swatch:has(:checked) {
    outline: none;
  }

  .variant-option--swatches--rectangular .variant-option__button-label--has-swatch:has(:checked)::after {
    background-color: rgb(var(--color-foreground-rgb));
  }

  .variant-option--swatches--rectangular
    .variant-option__button-label--has-swatch:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentColor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option--swatches--rectangular
    .variant-option__button-label--has-swatch:has(:focus-visible)::after {
    background-color: rgb(var(--color-foreground-rgb));
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:350) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:351) */
.video-interaction-hint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  /* Reveal on keyboard focus as well as hover so the play/pause control is
     operable and visible for keyboard users (WCAG 2.4.7). */
  .video-interaction-hint:hover,
  .video-interaction-hint:focus-visible,
  .video-interaction-hint:focus-within {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .video-interaction-hint {
      transition: none;
    }
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:352) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */