/** Shopify CDN: Minification failed

Line 939:22 Unexpected "{"
Line 939:31 Expected ":"
Line 944:2 Unexpected "{"
Line 944:3 Expected identifier but found "%"
Line 945:22 Unexpected "{"
Line 945:31 Expected ":"
Line 945:38 Unexpected "{"
Line 946:29 Expected identifier but found whitespace
Line 946:31 Unexpected "{"
Line 946:40 Expected ":"
... and 15 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:brand-logos (INDEX:1) */
.brand-logos__content {
    padding-inline: var(--page-margin, 16px);
    text-align: center;
  }

  .brand-logos__intro {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 24px;
  }

  .brand-logos__eyebrow-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .brand-logos__heading {
    font-size: var(--font-h2--size, 2rem);
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 700);
    color: var(--color-foreground-heading, currentColor);
    text-transform: uppercase;
    letter-spacing: var(--font-heading--letter-spacing, 0.02em);
    line-height: 1.3;
    margin: 0 0 16px;
  }

  .brand-logos__description {
    color: var(--color-foreground, currentColor);
    opacity: 0.75;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 40px;
  }

  .brand-logos__description :last-child {
    margin-bottom: 0;
  }

  /* Fixed column count per breakpoint -- every card is the same width no
     matter how many logos there are or how they're shaped. */
  .brand-logos__grid {
    display: grid;
    grid-template-columns: repeat(var(--brand-logos-columns-mobile, 2), 1fr);
    gap: var(--brand-logos-grid-gap-mobile, 16px);
  }

  .brand-logos__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    background: var(--color-background, #ffffff);
    border: 1.5px solid var(--color-border, #e6d9c8);
    border-radius: 16px;
    padding: 12px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  }

  .brand-logos__item:hover {
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.08);
    transform: translateY(-3px);
    border-color: rgb(var(--color-primary-rgb, 20 32 92) / 0.25);
  }

  .brand-logos__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .brand-logos__image {
    display: block;
    width: 100%;
    height: var(--brand-logos-logo-height-mobile, 56px);
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.25s ease;
  }

  .brand-logos__item:hover .brand-logos__image {
    transform: scale(1.06);
  }

  .brand-logos__count {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-foreground, currentColor);
    opacity: 0.65;
  }

  .brand-logos__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgb(var(--color-primary-rgb, 20 32 92) / 0.08);
    color: var(--color-primary, #14205c);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
  }

  .brand-logos__button:hover {
    background: rgb(var(--color-primary-rgb, 20 32 92) / 0.14);
  }

  .brand-logos__button-icon {
    display: inline-flex;
    width: 13px;
    height: 13px;
    transition: transform 0.2s ease;
  }

  .brand-logos__button-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .brand-logos__button:hover .brand-logos__button-icon {
    transform: translateX(3px);
  }

  @media screen and (min-width: 750px) {
    .brand-logos__intro {
      margin-bottom: 32px;
    }

    .brand-logos__eyebrow-row {
      margin-bottom: 24px;
    }

    .brand-logos__heading {
      margin: 0 0 20px;
    }

    .brand-logos__description {
      margin: 0 0 48px;
      font-size: 1.0625rem;
    }

    .brand-logos__grid {
      grid-template-columns: repeat(var(--brand-logos-columns-tablet, 3), 1fr);
      gap: var(--brand-logos-grid-gap, 24px);
    }

    .brand-logos__item {
      padding: 18px;
    }

    .brand-logos__image {
      height: var(--brand-logos-logo-height, 72px);
    }
  }

  @media screen and (min-width: 990px) {
    .brand-logos__grid {
      grid-template-columns: repeat(var(--brand-logos-columns-desktop, 5), 1fr);
    }
  }
/* END_SECTION:brand-logos */

/* START_SECTION:certificates (INDEX:2) */
.certificates__content {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
  }

  .certificates__eyebrow-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .certificates__heading {
    font-size: var(--font-h2--size, 2rem);
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 700);
    color: var(--color-foreground-heading, currentColor);
    text-transform: uppercase;
    letter-spacing: var(--font-heading--letter-spacing, 0.02em);
    line-height: 1.3;
    margin: 0 0 16px;
  }

  .certificates__description {
    color: var(--color-foreground, currentColor);
    opacity: 0.75;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 40px;
  }

  .certificates__description :last-child {
    margin-bottom: 0;
  }

  /* Fixed 3-column grid -- stays 3-across on mobile and desktop; only gap
     and logo size shrink at the breakpoints below, never the column count. */
  .certificates__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--certificates-grid-gap, 32px);
    align-items: center;
  }

  .certificates__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0; /* allow grid item to shrink below the image's intrinsic width */
  }

  .certificates__image {
    display: block;
    width: 100%;
    height: var(--certificates-logo-height-mobile, 80px);
    max-width: 100%;
    object-fit: contain;
  }

  @media screen and (min-width: 750px) {
    .certificates__eyebrow-row {
      margin-bottom: 24px;
    }

    .certificates__heading {
      margin: 0 0 20px;
    }

    .certificates__description {
      margin: 0 0 48px;
      font-size: 1.0625rem;
    }

    .certificates__image {
      height: var(--certificates-logo-height, 96px);
    }
  }

  @media screen and (max-width: 749px) {
    .certificates__grid {
      gap: var(--certificates-grid-gap-mobile, 6px);
    }
  }
/* END_SECTION:certificates */

/* START_SECTION:certified-approved (INDEX:3) */
.certified-approved__eyebrow-row {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
  }

  .certified-approved__heading {
    text-align: center;
    font-size: var(--font-h2--size, 2rem);
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 700);
    color: var(--color-foreground-heading, currentColor);
    text-transform: uppercase;
    letter-spacing: var(--font-heading--letter-spacing, 0.02em);
    line-height: 1.3;
    margin: 0 0 40px;
  }

  .certified-approved__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 940px;
    margin-inline: auto;
  }

  .certified-approved__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 28px;
    /* Fixed white — not var(--color-background) — so the "elevated" card
       (its whole point, per the card_style label: "white background")
       stays visually distinct from the section's own background instead of
       blending into it whenever the section uses a colored scheme (e.g. the
       maroon "Made in Pakistan" scheme, where --color-background is maroon
       too). Title/subtitle below get the same fixed-color treatment so they
       stay legible against this white card regardless of the section's
       scheme. */
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgb(var(--color-primary-rgb) / 0.08);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .certified-approved__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.1), 0 2px 6px rgb(0 0 0 / 0.06);
  }

  /* "Outline" cards are meant to read as a border-only cutout of the
     section's own background (see the schema label: "border only, no
     shadow") — transparent here, and the title/subtitle rules further down
     switch back to the section's own scheme colors just for this variant,
     since a transparent card shows the section background through it
     rather than the fixed white the "elevated" default sits on. */
  .certified-approved--card-outline .certified-approved__item {
    background: transparent;
    box-shadow: none;
    border: 1.5px solid var(--color-border, #e6d9c8);
  }

  .certified-approved--card-outline .certified-approved__item:hover {
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.06);
  }

  .certified-approved__item-icon-badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--certified-approved-badge-bg, var(--color-primary));
    color: var(--certified-approved-badge-icon, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 22px;
    box-shadow: 0 6px 16px rgb(var(--color-primary-rgb) / 0.25);
    transition: transform 0.25s ease;
  }

  .certified-approved--badge-circle .certified-approved__item-icon-badge {
    border-radius: 50%;
  }

  .certified-approved__item:hover .certified-approved__item-icon-badge {
    transform: scale(1.08);
  }

  .certified-approved__item-icon,
  .certified-approved__item-icon-badge svg {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .certified-approved__item-title {
    margin: 0 0 8px;
    font-family: var(--font-heading--family, inherit);
    font-weight: 700;
    font-size: 1.0625rem;
    /* Fixed dark color, not var(--color-foreground-heading) — the card
       itself is fixed white now (see .certified-approved__item above), so
       text here needs to stay legible on white regardless of the section's
       own scheme (e.g. white-on-maroon would vanish on a white card). The
       outline variant below switches this back to the scheme's own color. */
    color: #1a1a1a;
  }

  .certified-approved__item-subtitle {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #1a1a1a;
    opacity: 0.7;
  }

  .certified-approved--card-outline .certified-approved__item-title {
    color: var(--color-foreground-heading, currentColor);
  }

  .certified-approved--card-outline .certified-approved__item-subtitle {
    color: var(--color-foreground, currentColor);
  }

  @media screen and (max-width: 749px) {
    .certified-approved__eyebrow-row {
      margin-bottom: 24px;
    }

    .certified-approved__heading {
      margin: 0 0 28px;
    }

    .certified-approved__grid {
      grid-template-columns: 1fr;
      gap: 14px;
      max-width: 420px;
    }

    .certified-approved__item {
      flex-direction: row;
      text-align: left;
      padding: 22px;
    }

    .certified-approved__item-icon-badge {
      width: 52px;
      height: 52px;
      margin: 0 18px 0 0;
    }

    .certified-approved__item-icon,
    .certified-approved__item-icon-badge svg {
      width: 24px;
      height: 24px;
    }
  }
/* END_SECTION:certified-approved */

/* 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-gap: var(--gap-2xl);
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

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

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

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

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

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

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

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

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

    .collection-links__image {
      box-sizing: border-box;
      width: 100%;

      img {
        border: 1px solid rgb(var(--color-border-rgb) / var(--opacity-15));
      }
    }

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

/* START_SECTION:cta-banner (INDEX:6) */
.cta-banner-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    background:
      radial-gradient(120% 180% at 8% 15%, color-mix(in srgb, var(--cta-banner-button-bg) 16%, transparent), transparent 55%),
      radial-gradient(90% 140% at 96% 100%, color-mix(in srgb, var(--cta-banner-button-bg) 12%, transparent), transparent 60%),
      linear-gradient(135deg, color-mix(in srgb, var(--cta-banner-bg) 100%, white 6%), var(--cta-banner-bg) 45%, color-mix(in srgb, var(--cta-banner-bg) 100%, black 35%));
  }

  .cta-banner-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      -45deg,
      var(--cta-banner-button-bg) 0,
      var(--cta-banner-button-bg) 1px,
      transparent 1px,
      transparent 48px
    );
    opacity: 0.035;
    mask-image: linear-gradient(-45deg, black, transparent 75%);
    pointer-events: none;
  }

  .cta-banner__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "content button" "countdown countdown";
    column-gap: 24px;
    row-gap: 24px;
    align-items: center;
    max-width: var(--cta-banner-content-max-width, 1100px);
    margin-inline: auto;
    padding-inline: 24px;
  }

  .cta-banner__inner--no-countdown {
    grid-template-areas: "content button";
  }

  .cta-banner__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .cta-banner__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: var(--cta-banner-heading-font-size, 32px);
    line-height: 1.25;
    letter-spacing: var(--letter-spacing--heading-tight, -0.02em);
    color: var(--cta-banner-heading-color);
  }

  .cta-banner__accent {
    display: inline-block;
    color: var(--cta-banner-button-bg);
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: var(--letter-spacing--heading-tight, -0.02em);
    transform: rotate(-2deg);
    margin-inline-start: 0.12em;
  }

  .cta-banner__countdown {
    grid-area: countdown;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 28px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--cta-banner-heading-color) 6%, transparent);
  }

  .cta-banner__countdown-timer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    width: 100%;
  }

  .cta-banner__countdown-label {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    font-family: var(--font-accent--family, var(--font-body--family));
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cta-banner-heading-color) 78%, transparent);
  }

  .cta-banner__countdown-label svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--cta-banner-button-bg);
  }

  .cta-banner__countdown-units {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .cta-banner__countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 64px;
    padding: 10px 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--cta-banner-button-bg) 16%, transparent);
  }

  .cta-banner__countdown-value {
    font-family: var(--font-heading--family);
    font-variant-numeric: tabular-nums;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: var(--cta-banner-button-bg);
  }

  .cta-banner__countdown-unit-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cta-banner-heading-color) 65%, transparent);
  }

  .cta-banner__countdown-sep {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--cta-banner-heading-color) 35%, transparent);
  }

  .cta-banner__countdown-expired {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--cta-banner-heading-color);
  }

  .cta-banner__button {
    grid-area: button;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    background-color: var(--cta-banner-button-bg);
    color: var(--cta-banner-button-color);
    border-radius: var(--cta-banner-button-radius);
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--cta-banner-button-bg) 45%, transparent);
    transition:
      background-color var(--animation-speed, 0.2s) ease,
      transform var(--animation-speed, 0.2s) ease,
      box-shadow var(--animation-speed, 0.2s) ease;
  }

  .cta-banner__button:hover {
    background-color: var(--cta-banner-button-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--cta-banner-button-bg) 55%, transparent);
  }

  .cta-banner__button-arrow {
    font-size: 16px;
    line-height: 1;
  }

  @media screen and (max-width: 749px) {
    .cta-banner__inner {
      grid-template-columns: 1fr;
      grid-template-areas: "content" "countdown" "button";
      justify-items: center;
      text-align: center;
      row-gap: 20px;
    }

    .cta-banner__inner--no-countdown {
      grid-template-areas: "content" "button";
    }

    .cta-banner__content {
      align-items: center;
    }

    .cta-banner__countdown {
      flex-direction: column;
      padding: 16px 18px;
    }

    .cta-banner__countdown-timer {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .cta-banner__countdown-unit {
      min-width: 54px;
    }

    .cta-banner__countdown-value {
      font-size: 26px;
    }

    .cta-banner__heading {
      font-size: var(--cta-banner-heading-font-size-mobile, 24px);
    }
  }
/* END_SECTION:cta-banner */

/* START_SECTION:feature-marquee (INDEX:9) */
.feature-marquee {
    display: flex;
    flex-direction: column;
    row-gap: var(--feature-marquee-row-gap, 20px);
    overflow: hidden;
  }

  .feature-marquee--divider {
    border-block-end: 2px dashed var(--feature-marquee-divider-color, #21100826);
  }

  .feature-marquee__row {
    display: block;
    width: 100%;
    overflow: hidden;
    /* A little vertical breathing room before the clip boundary -- without
       it, the pill border's bottom edge (and the hover scale-up) can get
       shaved off by a pixel or two, most visible on row 2 since its
       scaleX(-1) mirror can shift sub-pixel rounding just enough to clip. */
    padding-block: 4px;
  }

  .feature-marquee__row .marquee__track {
    display: flex;
    width: max-content;
    align-items: center;
    will-change: transform;
    gap: var(--marquee-gap);
  }

  .feature-marquee__row .marquee__group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--marquee-gap);
  }

  /* Deliberately NOT using marquee-component's native `reverse` attribute
     here: its animation always starts both groups at translateX(0%) (the
     start of group 1) and, for reverse, animates toward translateX(+50%) --
     which slides the track *away* from its own content (nothing precedes
     group 1) instead of into the second group like the forward direction
     does. With content this dense that reveals empty space almost
     immediately instead of looping. Mirroring the row with scaleX(-1) and
     counter-mirroring its groups instead makes marquee.js always run its
     (correct) forward animation internally, while this row visually scrolls
     the opposite way -- text stays upright since it's flipped twice. */
  .feature-marquee__row--flip {
    transform: scaleX(-1);
  }

  .feature-marquee__row--flip .marquee__group {
    transform: scaleX(-1);
  }

  .feature-marquee__row .marquee__group * {
    max-width: none;
  }

  .feature-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--font-heading--family, var(--font-body--family));
    font-weight: 800;
    font-size: clamp(1.0625rem, 0.85rem + 1vw, 1.375rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--feature-marquee-text-color, #211008);
    transition: transform 0.25s ease;
  }

  .feature-marquee__item:hover {
    transform: scale(1.06);
  }

  .feature-marquee__item--pill {
    padding: 0.65em 1.2em;
    border-radius: 999px;
    border: 1px solid rgba(33, 16, 8, 0.06);
  }

  .feature-marquee__emoji {
    font-size: 1.55em;
    line-height: 1;
    flex-shrink: 0;
  }

  /* Fallback for prefers-reduced-motion (assets/marquee.js sets this
     attribute itself) -- no animation, just a normal swipeable/scrollable
     row of the real content group. The cloned group is hidden so
     reduced-motion visitors and keyboard/screen-reader users only ever
     encounter it once. */
  .feature-marquee__row marquee-component,
  .feature-marquee__row[reduced-motion] {
    overflow: visible;
  }

  .feature-marquee__row marquee-component[reduced-motion] .marquee__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .feature-marquee__row marquee-component[reduced-motion] .marquee__group[aria-hidden] {
    display: none;
  }
/* END_SECTION:feature-marquee */

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

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

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

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

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

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

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

/* START_SECTION:footer (INDEX:11) */
@media screen and (max-width: 749px) {
    .shopify-section-{{ section.id }} .section {
      --page-margin: 28px;
    }
  }

  {% if section.settings.corner_radius > 0 or section.settings.corner_radius_mobile > 0 %}
    .shopify-section-{{ section.id }} {
      border-top-left-radius: {{ section.settings.corner_radius_mobile }}px;
      border-top-right-radius: {{ section.settings.corner_radius_mobile }}px;
      overflow: hidden;

      @media screen and (min-width: 750px) {
        border-top-left-radius: {{ section.settings.corner_radius }}px;
        border-top-right-radius: {{ section.settings.corner_radius }}px;
      }
    }
  {% endif %}
/* END_SECTION:footer */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:header-marquee (INDEX:13) */
.header-marquee {
    border-block-end: var(--header-marquee-border-width) solid var(--color-border);
  }

  .header-marquee__track {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .header-marquee .marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    gap: var(--marquee-gap);
  }

  .header-marquee .marquee__group {
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .header-marquee .marquee__group :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
    margin: 0;
  }

  .header-marquee .marquee__group * {
    max-width: none;
  }

  .header-marquee .marquee__group > * {
    align-content: center;
  }

  /* Fallback for prefers-reduced-motion (assets/marquee.js sets this
     attribute itself) -- no animation, just a normal swipeable/scrollable
     row of the real content group. The cloned group is hidden so
     reduced-motion visitors and keyboard/screen-reader users only ever
     encounter it once. */
  .header-marquee marquee-component[reduced-motion] {
    overflow: visible;
  }

  .header-marquee marquee-component[reduced-motion] .marquee__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .header-marquee marquee-component[reduced-motion] .marquee__group[aria-hidden] {
    display: none;
  }
/* END_SECTION:header-marquee */

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

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

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

  body {
    --shop-mega-menu-top: var(--header-group-height, var(--header-height, 0px));
  }

  /* Once the header is actively stuck to the viewport top, the topbar above it
     has already scrolled out of flow — offset the mega menu by the header's
     own height only, not the stale topbar+header height captured at load.
     Subtract 1px because the sticky header itself sticks at `top: -1px`
     (see .header-section sticky rule below), so its visible bottom edge sits
     1px above where its full height would otherwise place it. */
  body:has(#header-component[data-sticky-state='active']) {
    --shop-mega-menu-top: calc(var(--header-height, 0px) - 1px);
  }

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

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

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

    position: absolute;
    top: var(--header-top-spacing, 0px);
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      top: var(--header-top-spacing-desktop, 0px);
    }

    /* Once pinned (sticky reveal on scroll-up), sit flush at the true top instead of carrying the
       resting-position gutter. Without this, the gutter pushes the pinned position's
       getBoundingClientRect().top to >= 0, which header.js reads as "back at natural position" and
       immediately un-pins it again — causing a continuous pin/un-pin flicker while scrolling up. */
    &[data-sticky-state='active'] {
      top: 0;
    }

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

    &[transparent='not-sticky'][data-sticky-state='active'],
    /* Only show opaque background when hovering over menu items with children (mega menu)
       Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])),
    /* Tied directly to the Shop mega menu's own open state (assets/shop-mega-menu.js sets
       `data-open`) rather than relying only on the trigger's :hover/aria-expanded above — the
       panel itself is a viewport-fixed element positioned apart from the trigger, so once the
       pointer is over the panel rather than the trigger, this is what keeps the header solid. */
    &:has(shop-mega-menu[data-open='true']) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --header-bg-color: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;

      .header__row {
        /* A longer, cubic-ease-out crossfade reads as a deliberate glide
           instead of a snap — --animation-values-fast/-values (ease-in-out,
           <=125ms) still had a "boom" to it at this size of color change.
           transform is included here too (not just in the unconditional rule
           near the sticky-reveal CSS below) because `transition` is a shorthand
           - a second rule of equal specificity declaring only `transition:
           transform` would replace this whole list rather than add to it. */
        transition: color 0.26s var(--ease-out-cubic), border-color 0.26s var(--ease-out-cubic),
          background-color 0.26s var(--ease-out-cubic), transform 0.32s var(--ease-out-cubic);
      }
    }

    .header__row {
      /* Slower still for "out" — fading back to transparent should feel
         unhurried. transform included for the same shorthand-precedence
         reason as above. */
      transition: color 0.38s var(--ease-out-cubic), border-color 0.38s var(--ease-out-cubic),
        background-color 0.38s var(--ease-out-cubic), transform 0.32s var(--ease-out-cubic);
    }
  }

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

  .header--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover) .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
  }

  .header-section {
    position: relative;

    /* Keeps the header painted above the section immediately below it, so
       .header--shadow's box-shadow (which bleeds past the header's own
       border-box) isn't covered by that section's background when the two
       sit flush with no gap (e.g. a full-bleed homepage hero). */
    z-index: var(--layer-sticky);
  }

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

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

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

  .header[data-sticky-state] {
    /* Cubic ease-out + a longer duration than the shared --animation-speed
       token (which other, unrelated theme elements also key off — left
       untouched) so the reveal/hide reads as a settle rather than a snap. */
    transition: opacity 0.32s var(--ease-out-cubic);
    opacity: 1;
  }

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

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

  /* Pairs the opacity fade above with a settle motion on reveal/hide, timed
     to match it exactly (same 0.32s/ease-out-cubic). Scoped to .header__row
     (a child of the element header.js measures via getBoundingClientRect()
     for its scroll-direction math) rather than the sticky-positioned .header
     itself, so this transform can't perturb that state machine.

     This unconditional, low-specificity rule only actually matters on pages
     without [transparent] (inner pages) - the .header[transparent] .header__row
     rules above already carry their own matching `transform` transition at
     higher specificity, since `transition` is a shorthand and a
     same-specificity rule here would replace their color/border/background
     list rather than add to it. */
  .header__row {
    transition: transform 0.32s var(--ease-out-cubic);
  }

  .header[data-sticky-state='idle'] .header__row,
  .header[data-sticky-state='active'][data-animating] .header__row {
    transform: translateY(-14px);
  }

  .header__row {
    position: relative;
  }

  /* Scoped with #header-component so this wins the cascade tie against the global
     `.color-scheme-X { background-color: var(--color-background); }` rule in
     snippets/color-schemes.liquid, which also matches .header__row (it carries a
     color-scheme-X class) at equal specificity and loads after this stylesheet. */
  #header-component .header__row {
    /* will default to bg from its color scheme unless --header-bg-color is transparent */
    background-color: var(--header-bg-color, var(--color-background));
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Set header paddings based on height setting */
  .header {
    /* header-component has no built-in display, so an undefined custom
       element defaults to `display: inline`. Its children (.header__row)
       are all block-level, which triggers the CSS "block-in-inline"
       fragmentation: the inline box gets split into empty anonymous boxes
       around the block content, so decorations applied directly to it
       (e.g. box-shadow below) paint on nothing and never appear. Forcing
       block layout here fixes that for the regular, non-transparent header;
       the transparent variant already gets blockified via position: absolute. */
    display: block;
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
  }

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

  /* Light, soft drop shadow beneath the header, separating it from the page content below.
     Excluded when the header is transparent (e.g. homepage) since it sits over hero content
     with no opaque background of its own — a shadow there would just look like a stray line. */
  .header--shadow:not([transparent]) {
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.06);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

    min-height: 600px;
  }

  .hero-video__container {
    position: relative;
    overflow: hidden;
    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-video__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

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

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

  .hero-video__media-wrapper {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
  }

  .hero-video--no-blocks-auto-height {
    :is(.hero-video__video, .hero-video__poster, .hero-video__image) {
      width: 100%;
      aspect-ratio: auto;
    }

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

  .hero-video__video,
  .hero-video__poster,
  .hero-video__image {
    grid-area: 1 / 1 / 2 / 2;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  .hero-video__poster {
    position: absolute;
    inset: 0;
  }

  /* Mobile video override: only hides the desktop video when a dedicated mobile video is set. */
  .hero-video__video--mobile-only {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .hero-video__video--mobile-only {
      display: block;
    }

    .hero-video__video--desktop-only {
      display: none;
    }
  }

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

  .hero-video__media-wrapper,
  .hero-video__content-wrapper {
    pointer-events: none;

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

  .hero-video__content-wrapper--design-mode * {
    pointer-events: auto;
  }
/* END_SECTION:hero-video */

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

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

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
    padding: var(--hero-inset-mobile, 0px);

    @media screen and (min-width: 750px) {
      padding: var(--hero-inset, 0px);
    }
  }

  .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: calc(var(--hero-min-height) - var(--hero-height-offset) - (var(--hero-inset-mobile, 0px) * 2));
    border-radius: var(--hero-radius-mobile, 0px);
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      min-height: calc(var(--hero-min-height) - var(--hero-height-offset) - (var(--hero-inset, 0px) * 2));
      border-radius: var(--hero-radius, 0px);
      align-items: var(--vertical-alignment);
    }
  }

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

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

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

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

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

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

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

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

  /* Responsive image styles */
  .hero__image--desktop {
    display: none;
  }

  .hero__image--mobile {
    display: block;
  }

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

    .hero__image--mobile {
      display: none;
    }
  }

  .hero__video-poster {
    position: absolute;
  }

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:instagram-media-feed (INDEX:17) */
.instagram-feed-section__inner {
    position: relative;
  }

  .instagram-feed-section__inner--centered {
    margin-inline: auto;
    /* Must match the .section grid's own central column width (page-content-width),
       not --page-width (which also bakes in the two side margins) — otherwise
       "Content width: Page" ends up wider than an actual "Width: Page" section. */
    max-width: var(--page-content-width, 1400px);
  }

  .instagram-feed-section__inner--shadow {
    box-shadow: var(--shadow-card, 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06));
  }

  .instagram-feed-section__inner--hover-shadow {
    transition: box-shadow var(--animation-speed, 200ms) var(--animation-easing, ease);
  }

  .instagram-feed-section__inner--hover-shadow:hover {
    box-shadow: var(--shadow-card-hover, 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05));
  }

  .instagram-feed-header {
    display: flex;
    flex-direction: column;
    margin-block-end: var(--margin-lg, 24px);
  }

  .instagram-feed-section__inner--left .instagram-feed-header {
    align-items: flex-start;
    text-align: left;
  }

  .instagram-feed-section__inner--center .instagram-feed-header {
    align-items: center;
    text-align: center;
  }

  .instagram-feed-section__inner--right .instagram-feed-header {
    align-items: flex-end;
    text-align: right;
  }

  .instagram-feed-header .eyebrow {
    margin-block-end: 12px;
  }

  .instagram-feed-header__heading {
    margin-block-start: 0;
  }

  .instagram-feed-header__username {
    display: inline-block;
    text-decoration: none;
    transition: color var(--animation-speed, 200ms) var(--animation-easing, ease);
  }

  .instagram-feed-header__username:hover,
  .instagram-feed-header__username:focus-visible {
    color: var(--instagram-username-hover-color, inherit);
  }

  /* Carousel sizing -- continuous marquee (see assets/marquee.js). The track
     holds two identical card groups back-to-back; animating it from
     translateX(0%) to translateX(-50%) moves it by exactly one group's
     width, so the second, aria-hidden group seamlessly continues the
     first. Same seamless-marquee technique as sections/testimonial-slider.liquid. */
  .instagram-feed-carousel-wrap {
    width: 100%;
    /* Card widths below are expressed in cqw (relative to this element's own
       rendered width), not %, because the immediate ancestor of each card
       (.instagram-feed-carousel__group) is itself sized to fit its own
       children (shrink-to-fit, needed so the track can hold two full-width
       groups side by side for the seamless loop) -- a % width would be
       resolving against that shrink-to-fit box, which is a circular
       dependency browsers resolve by falling back to the content's natural
       (auto) size, defeating the whole column-count formula. Establishing
       this element as the query container sidesteps that: cqw always
       resolves against it directly, however many shrink-to-fit boxes sit in
       between. */
    container-type: inline-size;
  }

  .instagram-feed-carousel {
    /* Custom elements default to display: inline, which both ignores
       overflow (so the second, aria-hidden card group would never actually
       get clipped) and won't reliably fill the wrap's width -- block fixes
       both. Explicit transparent background so nothing but the section's
       own background ever shows behind the cards. */
    display: block;
    overflow: hidden;
    background: transparent;
  }

  .instagram-feed-carousel__track {
    display: flex;
    width: max-content;
    will-change: transform;
    background: transparent;
    /* Same gap as within each group (below) -- without this, the two
       groups butt directly against each other with no gap at the seam
       where the second (cloned) group picks up from the first. */
    gap: var(--resource-list-column-gap-desktop, 16px);
  }

  .instagram-feed-carousel__group {
    display: flex;
    gap: var(--resource-list-column-gap-desktop, 16px);
    background: transparent;
    /* Posts can have very different native aspect ratios (image_ratio:
       adapt) combined with object-fit: contain -- the default flex
       align-items: stretch would force every card to the row's tallest
       height, leaving letterboxed gaps around shorter/wider images that
       expose whatever's behind. flex-start lets each card keep its own
       aspect-ratio-driven height instead. */
    align-items: flex-start;
  }

  .instagram-feed-carousel__card {
    flex: 0 0 auto;
    width: calc(
      (100cqw - (var(--resource-list-column-gap-desktop, 16px) * (var(--column-count-mobile, 1.5) - 1))) /
        var(--column-count-mobile, 1.5)
    );
    background: transparent;
  }

  @media screen and (min-width: 750px) {
    .instagram-feed-carousel__card {
      width: calc(
        (100cqw - (var(--resource-list-column-gap-desktop, 16px) * (var(--column-count-tablet, 3) - 1))) /
          var(--column-count-tablet, 3)
      );
    }
  }

  @media screen and (min-width: 990px) {
    .instagram-feed-carousel__card {
      width: calc(
        (100cqw - (var(--resource-list-column-gap-desktop, 16px) * (var(--column-count, 5) - 1))) /
          var(--column-count, 5)
      );
    }
  }

  /* Fallback for prefers-reduced-motion and for "Animate continuously"
     turned off in section settings (assets/marquee.js sets this attribute
     itself in both cases) -- no animation, just a normal swipeable/
     scrollable row of the real card group. The cloned group is hidden so
     reduced-motion visitors and keyboard/screen-reader users only ever
     encounter each post once. */
  .instagram-feed-carousel[reduced-motion] {
    overflow: visible;
  }

  .instagram-feed-carousel[reduced-motion] .instagram-feed-carousel__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .instagram-feed-carousel[reduced-motion] .instagram-feed-carousel__group[aria-hidden] {
    display: none;
  }

  .instagram-feed-carousel[reduced-motion] .instagram-feed-carousel__card {
    scroll-snap-align: start;
  }

  /* Grid layout (non-carousel) */
  .instagram-feed-grid {
    display: grid;
    grid-template-columns: repeat(var(--instagram-feed-columns-mobile, 2), 1fr);
    gap: var(--instagram-feed-gap, 16px);
  }

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

  @media screen and (min-width: 990px) {
    .instagram-feed-grid {
      grid-template-columns: repeat(var(--instagram-feed-columns, 5), 1fr);
    }
  }
/* END_SECTION:instagram-media-feed */

/* START_SECTION:main-blog-post (INDEX:19) */
.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:20) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

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

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

    grid-column: span 2;

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

      grid-column: span 6;
    }
  }

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

    grid-column: span 3;

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

      grid-column: span 6;
    }
  }

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

    grid-column: span 6;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    gap: var(--marquee-gap);
  }

  .marquee__group {
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

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

  .marquee__group * {
    max-width: none;
  }

  .marquee__group > * {
    align-content: center;
  }

  /* Fallback for prefers-reduced-motion (assets/marquee.js sets this
     attribute itself) -- no animation, just a normal swipeable/scrollable
     row of the real content group. The cloned group is hidden so
     reduced-motion visitors and keyboard/screen-reader users only ever
     encounter it once. */
  marquee-component[reduced-motion] {
    overflow: visible;
  }

  marquee-component[reduced-motion] .marquee__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  marquee-component[reduced-motion] .marquee__group[aria-hidden] {
    display: none;
  }
/* END_SECTION:marquee */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    a {
      display: flex;
    }

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

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

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

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

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

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

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

    &::backdrop {
      display: none;
    }
  }

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

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

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

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

  .password-dialog__close-button {
    cursor: pointer;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  slideshow-slide .resource-card {
    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] {
    animation-delay: 0ms !important;
  }

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

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

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

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

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

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

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

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

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

/* START_SECTION:product-card-slider (INDEX:30) */
.product-card-slider__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-block-end: 32px;
  }

  .product-card-slider__header[data-align='left'] {
    align-items: flex-start;
    text-align: left;
  }

  .product-card-slider__header[data-align='center'] {
    align-items: center;
    text-align: center;
  }

  .product-card-slider__header[data-align='right'] {
    align-items: flex-end;
    text-align: right;
  }

  .product-card-slider__heading {
    margin: 0;
    text-wrap: balance;
  }

  .product-card-slider__description {
    margin: 0;
  }

  .product-card-slider-carousel-wrap {
    width: 100%;
  }

  /*
    .resource-list__carousel .resource-list__slide (base.css) sets --slide-width
    itself, inside a @container query, at specificity 0-2-0. Matching that same
    two-class shape plus our own carousel class (0-3-0) is what lets this win
    without !important, so autoplay/drag/scroll-snap etc. from that same
    framework rule keep working untouched — only the width formula changes.
  */
  .product-card-slider-carousel.resource-list__carousel .resource-list__slide {
    --slide-width: var(--product-card-slider-card-width-mobile, 68vw);
  }

  @media screen and (min-width: 750px) {
    .product-card-slider-carousel.resource-list__carousel .resource-list__slide {
      --slide-width: var(--product-card-slider-card-width, 300px);
    }
  }

  .product-card-slider__view-all-wrap {
    display: flex;
    margin-block-start: 28px;
  }

  .product-card-slider__view-all-wrap--left { justify-content: flex-start; }
  .product-card-slider__view-all-wrap--center { justify-content: center; }
  .product-card-slider__view-all-wrap--right { justify-content: flex-end; }

  .product-card-slider__view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--minimum-touch-target, 44px);
    padding-block: 12px;
    padding-inline: 28px;
    text-decoration: none;
  }

  /* arrow_position: 'button' — arrows flank the Shop All link in one row */
  .product-card-slider__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-block-start: 28px;
    padding-inline: var(--util-page-margin-offset);
  }

  .product-card-slider__footer[data-align='left'] { justify-content: flex-start; }
  .product-card-slider__footer[data-align='right'] { justify-content: flex-end; }

  /*
    Restore the same touch-target size/padding/icon color the arrows get
    when nested under <slideshow-arrows> (base.css's
    "slideshow-arrows .slideshow-control" rule) — these buttons render
    outside that wrapper, so they'd otherwise shrink to fit the bare icon.
  */
  .product-card-slider__footer .slideshow-control {
    flex: 0 0 auto;
    opacity: 1;
    min-height: var(--minimum-touch-target, 44px);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  /*
    base.css's ".resource-list__carousel .slideshow-control--next" rule
    (written for the image-overlay arrow layout) sets margin-inline-start:
    auto, which — once these buttons are real flex siblings of the Shop All
    link instead of an absolutely-positioned overlay — shoves "next" to the
    far edge of the carousel instead of letting justify-content: center
    keep the group together. Neutralize it here (higher specificity via 3
    scoped classes so it wins regardless of stylesheet load order).
  */
  .product-card-slider-section .product-card-slider__footer .slideshow-control--next {
    margin-inline-start: 0;
  }

  /* Smaller footer row (Shop All button + arrows) on mobile */
  @media screen and (max-width: 749px) {
    .product-card-slider__view-all {
      min-height: 38px;
      padding-block: 8px;
      padding-inline: 18px;
    }

    .product-card-slider__footer .slideshow-control {
      min-height: 34px;
      padding: 0 6px;
    }
  }
/* END_SECTION:product-card-slider */

/* START_SECTION:product-collection-tabs (INDEX:31) */
.product-collection-tabs__component,
  .product-collection-tabs__tabs {
    display: block;
  }

  /* Pill nav */
  .product-collection-tabs__nav {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    padding-block-end: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .product-collection-tabs__nav::-webkit-scrollbar {
    display: none;
  }

  .product-collection-tabs__nav[data-align='center'] {
    justify-content: center;
  }

  .product-collection-tabs__nav[data-align='left'] {
    justify-content: flex-start;
  }

  .product-collection-tabs__pill {
    flex: 0 0 auto;
    appearance: none;
    cursor: pointer;
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: rgb(var(--color-foreground-rgb));
    background-color: transparent;
    border: 1px solid var(--product-collection-tabs-accent);
    border-radius: 999px;
    padding: 0.75em 1.5em;
    transition:
      background-color 180ms ease,
      color 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease;
  }

  .product-collection-tabs__pill:hover {
    background-color: color-mix(in srgb, var(--product-collection-tabs-accent) 10%, transparent);
    border-color: var(--product-collection-tabs-accent);
  }

  .product-collection-tabs__pill.tabs__trigger--active {
    background-color: var(--product-collection-tabs-accent);
    border-color: var(--product-collection-tabs-accent);
    color: var(--color-primary-button-text);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--product-collection-tabs-accent) 30%, transparent);
  }

  .product-collection-tabs__pill:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  @media screen and (max-width: 749px) {
    .product-collection-tabs__nav {
      flex-wrap: wrap;
      overflow-x: visible;
      gap: 0.75rem;
      margin-block-start: 0.5rem;
      margin-block-end: 2rem;
      padding-block-end: 0.5rem;
    }

    .product-collection-tabs__pill {
      font-size: 0.8125rem;
      padding: 0.6em 1.15em;
    }

    .product-collection-tabs__panels {
      margin-block-start: 0.5rem;
    }
  }

  /* Panels: fade + auto-height are opt-in hooks read by assets/tabs.js
     (data-tab-transition="fade" / data-tab-auto-height on <tabs-component>
     above) — this is the CSS half of that contract. */
  .product-collection-tabs__panels {
    position: relative;
    transition: opacity 180ms ease;
  }

  .product-collection-tabs__panels.tabs-component__panels--switching {
    opacity: 0;
  }

  .product-collection-tabs__panel {
    display: none;
  }

  .product-collection-tabs__panel:first-child {
    display: block;
  }

  tabs-component[data-hydrated] .product-collection-tabs__panel {
    display: none;
  }

  tabs-component[data-hydrated] .product-collection-tabs__panel[data-active='true'] {
    display: block;
  }

  /* Product grid */
  .product-collection-tabs__grid {
    display: grid;
    grid-template-columns: repeat(var(--product-collection-tabs-columns-mobile, 2), 1fr);
    gap: var(--gap, 20px);
    list-style: none;
    margin: 0;
    padding: 0;
  }

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

  .product-collection-tabs__cta {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }

  /* arrow_position: 'button' — arrows flank the View All link in one row */
  .product-collection-tabs__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    padding-inline: var(--util-page-margin-offset);
  }

  /*
    Restore the touch-target size/padding/icon color the arrows get when
    nested under <slideshow-arrows> (base.css's
    "slideshow-arrows .slideshow-control" rule) — these buttons render
    outside that wrapper, so they'd otherwise shrink to fit the bare icon.
  */
  .product-collection-tabs__footer .slideshow-control {
    flex: 0 0 auto;
    opacity: 1;
    min-height: var(--minimum-touch-target, 44px);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  /*
    base.css's ".resource-list__carousel .slideshow-control--next" rule
    (written for the image-overlay arrow layout) sets margin-inline-start:
    auto, which would shove "next" to the far edge of the carousel instead
    of letting justify-content: center keep the group together with the
    View All link. Neutralize it here (higher specificity via 3 scoped
    classes so it wins regardless of stylesheet load order).
  */
  .product-collection-tabs .product-collection-tabs__footer .slideshow-control--next {
    margin-inline-start: 0;
  }

  /*
    Set (via inline style, above) only when this tab's panel doesn't have
    enough products to overflow the visible "slides to show" count at this
    breakpoint — with nothing to scroll, center the cards instead of
    leaving them packed toward the start edge. Mobile and desktop are
    evaluated independently (columns_mobile is always <= columns_desktop,
    so a tab can still need to scroll on mobile after it stops needing to
    on desktop), hence two separate custom properties/rules instead of one.
  */
  .product-collection-tabs__slider slideshow-slides {
    justify-content: var(--product-collection-tabs-slider-justify-mobile, flex-start);
  }

  @media screen and (min-width: 750px) {
    .product-collection-tabs__slider slideshow-slides {
      justify-content: var(--product-collection-tabs-slider-justify-desktop, flex-start);
    }

    /*
      Arrows are always rendered when mobile needs them (see
      show_arrows_mobile in the Liquid above), since desktop-only need is
      always a subset of that. Hide them again above the mobile breakpoint
      specifically when desktop itself doesn't need them, without touching
      their mobile visibility.
    */
    .product-collection-tabs__slider[data-desktop-arrows='false'] slideshow-arrows,
    .product-collection-tabs__slider[data-desktop-arrows='false'] .product-collection-tabs__footer .slideshow-control {
      display: none;
    }
  }

  /* Smaller footer row (View All button + arrows) on mobile */
  @media screen and (max-width: 749px) {
    .product-collection-tabs__view-all {
      min-height: 38px;
      padding-block: 8px;
      padding-inline: 18px;
    }

    .product-collection-tabs__footer .slideshow-control {
      min-height: 34px;
      padding: 0 6px;
    }

    .product-collection-tabs__cta,
    .product-collection-tabs__footer {
      margin-block-start: 2rem;
    }
  }

  .product-collection-tabs__empty {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    text-align: center;
    padding-block: 2rem;
    margin: 0;
  }
/* END_SECTION:product-collection-tabs */

/* START_SECTION:product-guarantee (INDEX:32) */
.product-guarantee-section {
    width: 100%;
    background-color: var(--product-guarantee-bg);
  }

  .product-guarantee__inner {
    max-width: var(--product-guarantee-content-max-width, 640px);
    margin-inline: auto;
    padding-inline: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--product-guarantee-gap, 20px);
  }

  .product-guarantee__stars .rating .stars {
    height: 1.25rem;
  }

  .product-guarantee__heading {
    margin: 0;
    font-family: var(--product-guarantee-heading-font, inherit);
    font-weight: var(--product-guarantee-heading-weight, 700);
    font-size: var(--product-guarantee-heading-size-mobile, 26px);
    line-height: 1.3;
    text-transform: var(--product-guarantee-heading-case, none);
    color: var(--product-guarantee-heading-color, #ffffff);
  }

  .product-guarantee__text {
    margin: 0;
    color: var(--product-guarantee-text-color, rgba(255, 255, 255, 0.85));
    font-size: var(--product-guarantee-text-size, 16px);
    line-height: 1.65;
  }

  .product-guarantee__text p {
    margin: 0;
  }

  .product-guarantee__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--product-guarantee-badge-bg);
    color: var(--product-guarantee-badge-color, #ffffff);
    border-radius: var(--product-guarantee-badge-radius, 999px);
    padding: var(--product-guarantee-badge-padding-v, 12px) var(--product-guarantee-badge-padding-h, 24px);
    margin-block-start: var(--product-guarantee-badge-top-spacing, 16px);
  }

  .product-guarantee__badge-stars .rating .stars {
    height: 0.875rem;
  }

  .product-guarantee__badge-stars .rating-wrapper {
    gap: var(--gap-3xs, 2px);
  }

  .product-guarantee__badge-text {
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
  }

  @media screen and (min-width: 750px) {
    .product-guarantee__heading {
      font-size: var(--product-guarantee-heading-size, 34px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-guarantee__badge {
      padding: calc(var(--product-guarantee-badge-padding-v, 12px) * 0.85) calc(var(--product-guarantee-badge-padding-h, 24px) * 0.75);
    }

    .product-guarantee__badge-text {
      white-space: normal;
      text-align: left;
    }
  }
/* END_SECTION:product-guarantee */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:product-recommendations (INDEX:35) */
.product-recommendations__skeleton-item {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
  }

  .product-recommendations__skeleton-image,
  .product-recommendations__skeleton-line {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .product-recommendations__skeleton-image {
    aspect-ratio: 3 / 4;
  }

  .product-recommendations__skeleton-line {
    height: 0.75em;
  }

  .product-recommendations__skeleton-line--title {
    width: 70%;
  }

  .product-recommendations__skeleton-line--price {
    width: 35%;
  }

  .product-recommendations__skeleton-image::after,
  .product-recommendations__skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgb(var(--color-foreground-rgb) / 0.12) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: product-recommendations-shimmer 1.5s infinite linear;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-recommendations__skeleton-image::after,
    .product-recommendations__skeleton-line::after {
      animation: none;
    }
  }

  @keyframes product-recommendations-shimmer {
    from {
      background-position: 150% 0;
    }
    to {
      background-position: -50% 0;
    }
  }

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

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

  @media screen and (min-width: 990px) {
    product-recommendations .resource-list__carousel slideshow-arrows {
      padding-inline: 64px;
    }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:product-video (INDEX:36) */
product-video-component {
    display: block;
    width: 100%;
  }

  .product-video__header {
    text-align: center;
    margin-block-end: 32px;
  }

  .product-video__heading {
    font-size: var(--font-h2--size, 2rem);
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 600);
    color: var(--color-foreground-heading, currentColor);
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: var(--font-heading--letter-spacing, -0.02em);
  }

  .product-video__subheading {
    font-size: var(--font-body--size, 1rem);
    color: var(--color-foreground, currentColor);
    opacity: 0.7;
    margin: 0;
    max-width: 560px;
    margin-inline: auto;
    line-height: 1.6;
  }

  .product-video__card {
    position: relative;
    width: 100%;
    max-width: var(--product-video-max-width, 100%);
    margin-inline: auto;
    border-radius: var(--product-video-border-radius, 16px);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04);
    cursor: pointer;
    isolation: isolate;
  }

  .product-video__card::before {
    content: '';
    display: block;
    padding-top: calc(100% / var(--product-video-aspect-ratio, 1.7778));
  }

  .product-video__card--shadow {
    box-shadow: 0 4px 20px rgb(var(--color-shadow-rgb, 0 0 0) / 0.08);
  }

  .product-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .product-video__poster,
  .product-video__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .product-video__poster {
    z-index: 1;
    transition: opacity 0.5s ease;
  }

  [data-video-loaded='true'] .product-video__poster {
    opacity: 0;
    pointer-events: none;
  }

  .product-video__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }

  .product-video__overlay > * {
    pointer-events: auto;
  }

  .product-video__control-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.2s ease, opacity 0.3s ease;
    padding: 0;
  }

  .product-video__control-btn:hover {
    background: rgba(0, 0, 0, 0.45);
    transform: scale(1.08);
  }

  .product-video__control-btn:active {
    transform: scale(0.95);
  }

  .product-video__control-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  .product-video__mute-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 5;
  }

  .product-video__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.25s ease, transform 0.2s ease;
  }

  .product-video__card:hover .product-video__play-btn,
  .product-video__card:focus-within .product-video__play-btn {
    opacity: 1;
  }

  .product-video__card[data-playing='false'] .product-video__play-btn {
    opacity: 1;
  }

  .product-video__play-btn:hover {
    background: rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%) scale(1.08);
  }

  .product-video__play-btn:active {
    transform: translate(-50%, -50%) scale(0.92);
  }

  .product-video .hidden {
    display: none !important;
  }
/* END_SECTION:product-video */

/* START_SECTION:testimonial-slider (INDEX:42) */
/* Give the optional "Section heading" static block breathing room above
     the carousel — same rule sections/testimonials.liquid uses for its own
     .section-heading block. */
  .testimonial-slider-section > .section-heading {
    margin-block-end: 32px;
  }

  .testimonial-slider-carousel-wrap {
    width: 100%;
  }

  /*
    Continuous marquee: the track holds two identical card groups
    back-to-back (assets/marquee.js animates it from translateX(0%) to
    translateX(-50%) — exactly one group's width — so the second,
    aria-hidden group seamlessly continues the first). The outer element
    clips that travel; only its own width matters for layout, the track
    itself is free to overflow via width: max-content.
  */
  .testimonial-marquee {
    /* Custom elements default to display: inline, which both ignores
       overflow (so the second, aria-hidden card group would never actually
       get clipped) and won't reliably fill the wrap's width -- block fixes
       both. Explicit transparent background so nothing but the section's
       own background ever shows behind the cards. */
    display: block;
    overflow: hidden;
    background: transparent;
  }

  .testimonial-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    background: transparent;
    /* Same gap as within each group (below) -- without this, the two
       groups butt directly against each other with no gap at the seam
       where the second (cloned) group picks up from the first. */
    gap: var(--resource-list-column-gap-desktop, 20px);
  }

  .testimonial-marquee__group {
    display: flex;
    /* Each card keeps its own natural height by default; the
       --equal-height wrap class below switches this to stretch so every
       card in the row instead matches the tallest one. */
    align-items: flex-start;
    gap: var(--resource-list-column-gap-desktop, 20px);
    background: transparent;
  }

  .testimonial-slider-carousel-wrap--equal-height .testimonial-marquee__group {
    align-items: stretch;
  }

  .testimonial-marquee__card {
    flex: 0 0 auto;
    width: var(--testimonial-slider-card-width-mobile, 82vw);
  }

  @media screen and (min-width: 750px) {
    .testimonial-marquee__card {
      width: var(--testimonial-slider-card-width, 320px);
    }
  }

  /*
    Fallback for prefers-reduced-motion and for "Animate continuously"
    turned off in section settings (assets/marquee.js sets this attribute
    itself in both cases) — no animation, just a normal swipeable/scrollable
    row of the real card group. The cloned group is hidden so reduced-motion
    visitors and keyboard/screen-reader users only ever encounter each
    testimonial once.
  */
  .testimonial-marquee[reduced-motion] {
    overflow: visible;
  }

  .testimonial-marquee[reduced-motion] .testimonial-marquee__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .testimonial-marquee[reduced-motion] .testimonial-marquee__group[aria-hidden] {
    display: none;
  }

  .testimonial-marquee[reduced-motion] .testimonial-marquee__card {
    scroll-snap-align: start;
  }

  .testimonial-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md, 16px);
    margin-block-start: 32px;
  }

  /*
    Resets for the generic .button/.button-unstyled classes the
    slideshow-arrow snippet's <button> also carries — none of this is a
    specificity tie (each of these is only set by a single, single-purpose
    base.css rule), so plain overrides are enough here; only color/
    background/size (which DO tie against .slideshow-control--shape-circle)
    need !important, in the style block above.

    Modern look: a floating circular button — soft ambient shadow instead of
    a hard edge/border, a gentle lift + brighter shadow on hover, and a
    quick press-down on :active for tactile feedback — instead of the flat,
    borderless square this started as.
  */
  .testimonial-slider__controls .slideshow-control {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    /* .button sets an inset box-shadow as its border — override rather than
       reset to none, so this same property can carry the new drop shadow. */
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.16), 0 1px 3px rgb(0 0 0 / 0.1);
    /* .resource-list__carousel .slideshow-control--next sets
       margin-inline-start: auto (meant for arrows that float at either end
       of a media strip) — inside our own centered controls row that
       shoves the "next" button all the way to the far edge, away from the
       "previous" button and the view-all link sitting between them. */
    margin-inline: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  }

  .testimonial-slider__controls .slideshow-control:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 10px 22px rgb(0 0 0 / 0.22), 0 2px 6px rgb(0 0 0 / 0.14);
  }

  .testimonial-slider__controls .slideshow-control:active {
    transform: translateY(-1px) scale(0.96);
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.18);
  }

  .testimonial-slider__controls .slideshow-control[disabled] {
    box-shadow: none;
  }

  .testimonial-slider__controls .slideshow-control .svg-wrapper {
    width: 36%;
    height: 36%;
  }

  .testimonial-slider__view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--minimum-touch-target, 44px);
    padding-block: 12px;
    padding-inline: 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
  }

  .testimonial-slider__view-all:hover {
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
    transform: translateY(-1px);
  }
/* END_SECTION:testimonial-slider */

/* START_SECTION:testimonials (INDEX:43) */
.testimonials-section__inner {
    position: relative;
  }

  .testimonials-section__inner--centered {
    margin-inline: auto;
    /* Must match the .section grid's own central column width (page-content-width),
       not --page-width (which also bakes in the two side margins) — otherwise
       "Content width: Page" ends up wider than an actual "Width: Page" section. */
    max-width: var(--page-content-width, 1400px);
  }

  .testimonials-section__inner--shadow {
    box-shadow: var(--shadow-card, 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06));
  }

  .testimonials-section__inner--hover-shadow {
    transition: box-shadow var(--animation-speed, 200ms) var(--animation-easing, ease);
  }

  .testimonials-section__inner--hover-shadow:hover {
    box-shadow: var(--shadow-card-hover, 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05));
  }

  /* Give the optional "Section heading" block breathing room above the rating
     summary/reviews, matching the gap the built-in rating summary already uses. */
  .testimonials-section__inner > .section-heading {
    margin-block-end: var(--margin-lg, 24px);
  }

  .testimonials-rating-summary {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    margin-block-end: var(--margin-lg, 24px);
  }

  .testimonials-rating-summary--center {
    align-items: center;
    text-align: center;
  }

  .testimonials-rating-summary--right {
    align-items: flex-end;
    text-align: right;
  }

  .testimonials-carousel-wrap {
    width: 100%;
  }

  /*
    Explicit, non-container-query-dependent slide width. Higher specificity than the
    shared .resource-list__carousel .resource-list__slide rule so it always wins,
    regardless of container-query support/measurement inside the theme editor iframe.
  */
  .testimonials-carousel-wrap .testimonials-carousel.resource-list__carousel .resource-list__slide {
    width: var(--mobile-card-size, 85cqw);
    max-width: 90vw;
  }

  @media screen and (min-width: 750px) {
    .testimonials-carousel-wrap .testimonials-carousel.resource-list__carousel .resource-list__slide {
      width: calc(
        (100% - (var(--resource-list-column-gap-desktop, 16px) * (var(--column-count, 3) - 1))) /
          var(--column-count, 3)
      );
      max-width: none;
    }
  }

  .testimonials-carousel-wrap--equal-height .testimonials-carousel slideshow-slides {
    align-items: stretch;
  }

  .testimonials-carousel-wrap--equal-height .resource-list__slide {
    height: auto;
  }

  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(var(--testimonials-columns-mobile, 1), 1fr);
    gap: var(--testimonials-gap, 16px);
  }

  .testimonials-grid--equal-height > * {
    height: 100%;
  }

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

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

  .testimonials-helper-text {
    margin-block-start: var(--margin-lg, 24px);
    margin-block-end: 0;
  }
/* END_SECTION:testimonials */

/* START_SECTION:trust-bar (INDEX:44) */
.trust-bar-section {
    width: 100%;
    background-color: var(--trust-bar-bg);
  }

  .trust-bar__inner {
    display: flex;
    justify-content: center;
    padding-inline: 16px;
  }

  .trust-bar__inner .rating-wrapper {
    width: auto;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .trust-bar__inner .rating .stars {
    height: calc(var(--trust-bar-star-size) * 0.75);
  }

  .trust-bar-section .trust-bar__inner .rating-count {
    color: var(--trust-bar-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .trust-bar__inner--uppercase .rating-count {
    text-transform: uppercase;
  }

  @media screen and (min-width: 750px) {
    .trust-bar__inner .rating .stars {
      height: var(--trust-bar-star-size);
    }

    .trust-bar-section .trust-bar__inner .rating-count {
      font-size: 0.9375rem;
    }
  }
/* END_SECTION:trust-bar */

/* START_SECTION:video-reels (INDEX:45) */
/* ========================================================
     VIDEO REELS CAROUSEL
     ======================================================== */

  video-reels-component {
    display: block;
    width: 100%;
    outline: none;
  }

  /* Header */
  .video-reels__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    margin-block-end: 32px;
  }

  .video-reels__heading {
    font-size: var(--font-h2--size, 2rem);
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 600);
    color: var(--color-foreground-heading, currentColor);
    margin: 0;
    line-height: 1.2;
    letter-spacing: var(--font-heading--letter-spacing, -0.02em);
  }

  .video-reels__subheading {
    font-size: var(--font-body--size, 1rem);
    color: var(--color-foreground, currentColor);
    opacity: 0.7;
    margin: 0;
    max-width: 560px;
    margin-inline: auto;
    line-height: 1.6;
  }

  /* Carousel wrapper for arrows + track */
  .video-reels__carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Scrollable track */
  .video-reels__track {
    display: flex;
    position: relative;
    gap: var(--reels-gap, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 4px;
    padding-inline: 2px;
    width: 100%;
  }

  .video-reels__track::-webkit-scrollbar {
    display: none;
  }

  /* Card */
  .video-reels__card {
    flex: 0 0 calc((100% - (var(--reels-mobile-per-view, 1) - 1) * var(--reels-gap, 16px)) / var(--reels-mobile-per-view, 1));
    scroll-snap-align: start;
    position: relative;
    border-radius: var(--reels-border-radius, 16px);
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    isolation: isolate;
  }

  .video-reels__card::before {
    content: '';
    display: block;
    padding-top: calc(100% / var(--reels-aspect-ratio, 0.5625));
  }

  @media (hover: hover) {
    .video-reels__card:hover {
      transform: translateY(-4px) scale(1.01);
    }

    .video-reels__card--shadow:hover {
      box-shadow: 0 16px 48px rgb(var(--color-shadow-rgb, 0 0 0) / 0.18);
    }
  }

  .video-reels__card--shadow {
    box-shadow: 0 4px 20px rgb(var(--color-shadow-rgb, 0 0 0) / 0.08);
  }

  @media screen and (min-width: 750px) {
    .video-reels__card {
      flex: 0 0 calc((100% - (var(--reels-tablet-per-view, 3) - 1) * var(--reels-gap, 16px)) / var(--reels-tablet-per-view, 3));
    }
  }

  @media screen and (min-width: 990px) {
    .video-reels__card {
      flex: 0 0 calc((100% - (var(--reels-desktop-per-view, 4) - 1) * var(--reels-gap, 16px)) / var(--reels-desktop-per-view, 4));
    }
  }

  /* Video container */
  .video-reels__video-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .video-reels__poster,
  .video-reels__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .video-reels__iframe {
    border: 0;
  }

  .video-reels__poster {
    z-index: 1;
    transition: opacity 0.5s ease;
  }

  [data-video-loaded="true"] .video-reels__poster {
    opacity: 0;
    pointer-events: none;
  }

  .video-reels__poster-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.04);
    color: var(--color-foreground, currentColor);
  }

  /* Overlay */
  .video-reels__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }

  .video-reels__overlay > * {
    pointer-events: auto;
  }

  /* Control buttons (glassmorphic) */
  .video-reels__control-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.2s ease, opacity 0.3s ease;
    padding: 0;
  }

  .video-reels__control-btn:hover {
    background: rgba(0, 0, 0, 0.45);
    transform: scale(1.08);
  }

  .video-reels__control-btn:active {
    transform: scale(0.95);
  }

  .video-reels__control-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* Mute button (top-right) */
  .video-reels__mute-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    z-index: 5;
  }

  /* Play/pause button (center) */
  .video-reels__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.25s ease, transform 0.2s ease;
  }

  .video-reels__card:hover .video-reels__play-btn,
  .video-reels__card:focus-within .video-reels__play-btn {
    opacity: 1;
  }

  .video-reels__card[data-playing="false"] .video-reels__play-btn {
    opacity: 1;
  }

  .video-reels__play-btn:hover {
    background: rgba(0, 0, 0, 0.55);
    transform: translate(-50%, -50%) scale(1.08);
  }

  .video-reels__play-btn:active {
    transform: translate(-50%, -50%) scale(0.92);
  }

  /* Bottom info gradient */
  .video-reels__info {
    margin-top: auto;
    padding: 48px 16px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 60%, transparent 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .video-reels__title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .video-reels__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    width: fit-content;
  }

  .video-reels__cta:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateX(2px);
  }

  /* Navigation arrows */
  .video-reels__arrow {
    flex-shrink: 0;
    appearance: none;
    border: 1px solid var(--color-border, #e5e5e5);
    background: var(--color-background, #fff);
    color: var(--color-foreground, #1a1a1a);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease,
                opacity 0.25s ease, box-shadow 0.25s ease;
    z-index: 4;
    padding: 0;
  }

  .video-reels__arrow:hover:not(:disabled) {
    background: var(--color-foreground, #1a1a1a);
    color: var(--color-background, #fff);
    border-color: var(--color-foreground, #1a1a1a);
    box-shadow: 0 4px 16px rgb(var(--color-shadow-rgb, 0 0 0) / 0.12);
  }

  .video-reels__arrow:active:not(:disabled) {
    transform: scale(0.92);
  }

  .video-reels__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .video-reels__arrow:focus-visible {
    outline: 2px solid var(--color-primary, #14205c);
    outline-offset: 2px;
  }

  /* Hide arrows on mobile, show as overlays on small screens */
  @media screen and (max-width: 749px) {
    .video-reels__arrow {
      display: none;
    }
  }

  /* Pagination dots */
  .video-reels__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-block-start: 24px;
  }

  .video-reels__dot {
    appearance: none;
    border: 0;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.2);
    width: 8px;
    height: 8px;
    border-radius: 100px;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, width 0.3s ease;
  }

  .video-reels__dot--active {
    background: var(--color-foreground, #1a1a1a);
    width: 24px;
  }

  .video-reels__dot:hover:not(.video-reels__dot--active) {
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.45);
  }

  .video-reels__dot:focus-visible {
    outline: 2px solid var(--color-primary, #14205c);
    outline-offset: 2px;
  }

  /* Hidden utility */
  .video-reels .hidden {
    display: none !important;
  }
/* END_SECTION:video-reels */

/* START_SECTION:why-justpadel (INDEX:46) */
.why-justpadel__eyebrow-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }

  .why-justpadel__heading {
    text-align: center;
    font-size: var(--font-h2--size, 2rem);
    font-family: var(--font-heading--family, inherit);
    font-weight: var(--font-heading--weight, 700);
    color: var(--color-foreground-heading, currentColor);
    text-transform: uppercase;
    letter-spacing: var(--font-heading--letter-spacing, 0.02em);
    line-height: 1.3;
    margin: 0 0 40px;
  }

  .why-justpadel__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin-inline: auto;
  }

  .why-justpadel__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 24px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgb(var(--color-primary-rgb) / 0.08);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .why-justpadel__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.1), 0 2px 6px rgb(0 0 0 / 0.06);
  }

  .why-justpadel--card-outline .why-justpadel__item {
    background: transparent;
    box-shadow: none;
    border: 1.5px solid var(--color-border, #e6d9c8);
  }

  .why-justpadel--card-outline .why-justpadel__item:hover {
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.06);
  }

  .why-justpadel__item-icon-badge {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--why-justpadel-badge-bg, var(--color-primary));
    color: var(--why-justpadel-badge-icon, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 22px;
    box-shadow: 0 6px 16px rgb(var(--color-primary-rgb) / 0.25);
    transition: transform 0.25s ease;
  }

  .why-justpadel--badge-rounded .why-justpadel__item-icon-badge {
    border-radius: 18px;
  }

  .why-justpadel__item:hover .why-justpadel__item-icon-badge {
    transform: scale(1.08);
  }

  .why-justpadel__item-icon,
  .why-justpadel__item-icon-badge svg {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .why-justpadel__item-title {
    margin: 0 0 8px;
    font-family: var(--font-heading--family, inherit);
    font-weight: 700;
    font-size: 1.0625rem;
    color: #1a1a1a;
  }

  .why-justpadel__item-subtitle {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #1a1a1a;
    opacity: 0.7;
  }

  .why-justpadel--card-outline .why-justpadel__item-title {
    color: var(--color-foreground-heading, currentColor);
  }

  .why-justpadel--card-outline .why-justpadel__item-subtitle {
    color: var(--color-foreground, currentColor);
  }

  @media screen and (max-width: 989px) {
    .why-justpadel__grid {
      grid-template-columns: repeat(2, 1fr);
      max-width: 640px;
    }
  }

  @media screen and (max-width: 749px) {
    .why-justpadel__eyebrow-row {
      margin-bottom: 24px;
    }

    .why-justpadel__heading {
      margin: 0 0 28px;
    }

    .why-justpadel__grid {
      grid-template-columns: 1fr;
      gap: 14px;
      max-width: 420px;
    }

    .why-justpadel__item {
      flex-direction: row;
      text-align: left;
      padding: 22px;
    }

    .why-justpadel__item-icon-badge {
      width: 52px;
      height: 52px;
      margin: 0 18px 0 0;
    }

    .why-justpadel__item-icon,
    .why-justpadel__item-icon-badge svg {
      width: 24px;
      height: 24px;
    }
  }
/* END_SECTION:why-justpadel */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_BLOCK:_blog-post-image (INDEX:53) */
.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:54) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-size--paragraph);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart__container--extend {
    height: 100%;

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

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

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

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

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

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

  /* ------------------------------------------------------------------
     /cart page — contained, sticky order-summary card.
     The block runs with `extend_summary: false` (templates/cart.json) so
     it is content-height (not stretched to the items column) and does not
     bleed to the viewport edge. `color_scheme: scheme-2` does not resolve
     in this theme, so the card surface is painted explicitly here with the
     brand tint + border + soft shadow. Scoped to `.cart-page`.
     ------------------------------------------------------------------ */
  .cart-page .cart__summary-inner {
    gap: var(--gap-md);
    background: #f1f2f5;
    border: 1px solid var(--color-border);
    border-radius: var(--style-border-radius-lg, 1rem);
  }

  /* The free-shipping bar already carries the hairline above DISCOUNT, so
     drop the accordion wrapper's own top border to avoid a double rule. */
  .cart-page .cart-actions {
    border-top: none;
    margin-block-start: 0;
  }

  @media screen and (min-width: 750px) {
    .cart-page .cart__summary-inner {
      padding: var(--padding-2xl);
      width: 100%;
      box-shadow: 0 14px 34px -22px rgb(var(--color-shadow-rgb, 0 0 0) / 0.32);
      top: calc(var(--header-height, 0px) + var(--padding-lg));
    }
  }

  @media screen and (max-width: 749px) {
    .cart-page .cart__summary-inner {
      padding: var(--padding-xl);
      margin-top: var(--margin-lg);
    }
  }
/* END_BLOCK:_cart-summary */

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

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

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

  .cart-title .cart-bubble__background {
    background-color: var(--cart-accent);
  }

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

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

  .collection-card__image--placeholder {
    width: 100%;
    height: 100%;
  }

  .collection-card__image--gradient {
    background: linear-gradient(var(--gradient-bg-angle, 135deg), var(--gradient-bg-start, #DCE2F5), var(--gradient-bg-end, #FFFFFF));
  }

  .collection-card__image--gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 28% 22%, rgb(255 255 255 / 0.25), transparent 55%);
    pointer-events: none;
  }

  .collection-card__image--gradient .image-block__image {
    /* position: relative (with z-index: auto) puts the <img> in the same
       paint layer as the absolutely-positioned ::before above; since the
       <img> comes after ::before in the DOM, it paints on top. Without this,
       the positioned ::before would paint over the static <img> and hide it. */
    position: relative;
    object-fit: contain;
    padding: 10%;
    box-sizing: border-box;
  }
/* END_BLOCK:_collection-card-image */

/* START_BLOCK:_collection-image (INDEX:60) */
.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:62) */
.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));
    transition: color var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);

    [layout='text'] & {
      @media (hover: hover) {
        opacity: var(--disabled-opacity);
      }

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

    [layout='spotlight'] & {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--4xl);

      position: relative;
      align-items: baseline;
      color: var(--color-foreground-muted);
      font-size: clamp(var(--min-font-size), 2.2vw, var(--max-font-size));
      padding-block: var(--gap-sm);
      padding-inline-start: var(--gap-lg);
      border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.6);

      &::before {
        content: '';
        position: absolute;
        inset-inline-start: 0;
        top: 50%;
        translate: 0 -50%;
        width: 3px;
        height: 0%;
        background: var(--color-primary);
        border-radius: 2px;
        transition: height var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
      }

      &:last-child {
        border-bottom: none;
      }

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

      &:focus-visible {
        color: var(--color-foreground-heading);
      }

      &[aria-current='true'] {
        color: var(--color-foreground-heading);

        &::before {
          height: 60%;
        }

        .text-block,
        .text-block > *:not(.collection-links__count) {
          font-weight: 600;
        }
      }
    }

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

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

      [layout='spotlight'] & {
        --min-font-size: var(--font-size--2xl);
        --max-font-size: var(--font-size--3xl);
        white-space: nowrap;
        scroll-snap-align: start;
        border-bottom: none;
        padding-inline-start: var(--gap-md);

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

  .collection-links__count {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-inline-start: 0.35em;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    font-size: 0.36em;
    font-weight: var(--font-paragraph--weight);
    line-height: 1.5;
    color: var(--color-foreground-muted);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));
  }

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

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

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

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

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

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

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

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

/* START_BLOCK:_flavor-product-card (INDEX:69) */
/* <product-card> itself is now just a transparent, unrounded shell — its
     only job is the top padding that reserves room for the image to
     overflow above .flavor-card__body (the actual visible card surface,
     below). No overflow:hidden here on purpose, so the image is free to
     stick out past the card's own top edge. Kept small on purpose so most
     of the floating photo renders against the card's own colored body
     instead of the transparent zone above it.

     --flavor-outer-gap and --flavor-inner-clearance (used by
     .flavor-card__link below too) are the two pieces of the photo's total
     reserved clearance — also drives .flavor-card__image-frame's height
     below, capping the photo to exactly this much space so it can never
     reach far enough to overlap the title, whatever a given product photo's
     aspect ratio is.

     --flavor-inner-clearance used to be one guessed fixed px value shared by
     every product, which could only ever be right for one photo shape at a
     time — too tight and taller photos got capped small, too generous and
     shorter/wider photos left dead space above the title. Deriving it from
     --flavor-image-ratio (this card's own photo, set inline above from
     card_image.aspect_ratio — width ÷ height) fixes that part per product:
     --slide-width is this card's own rendered width (set by
     sections/product-card-slider.liquid's card_width/card_width_mobile
     settings, consumed by .resource-list__slide in assets/base.css), so
     dividing it by the ratio gives exactly the height that photo's own FILE
     renders at when shown at full card width.

     --flavor-image-fill then compensates for something aspect_ratio can't
     see: card_transparent_image cutouts (or a plain product photo, when a
     product has no cutout set) almost always have some transparent/empty
     margin baked into the file itself around the actual product, so even an
     exact file-ratio box still shows a gap below the visible product before
     the title. This uniformly scales the whole reserved height (and so the
     whole photo, padding included) down by that fraction — 1 disables it
     (exact file ratio, original padding visible); lower shrinks the photo
     but pulls the visible product closer to the title. It's a global
     compensation for typical baked-in padding, not a per-product fix — a
     product whose cutout is already trimmed tight to the product will end
     up smaller than it needs to; the real fix for that one is re-exporting
     its image with the margin trimmed off. clamp()'s floor/ceiling stay as a
     safety net only, for a missing ratio (falls back to a 1:1 square above)
     or an extreme outlier photo, so slides in the same carousel don't go
     wildly uneven. */
  .flavor-card {
    --flavor-outer-gap: 35px;
    --flavor-image-fill: 0.8;
    --flavor-inner-clearance: clamp(90px, calc(var(--slide-width, 300px) / var(--flavor-image-ratio, 1) * var(--flavor-image-fill, 1)), 340px);

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    padding-block-start: var(--flavor-outer-gap);
    text-align: center;
    transition: transform var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out),
      box-shadow var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
  }

  .flavor-card--hover-lift:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount, 6px)));
  }

  .flavor-card--hover-scale:hover {
    transform: scale(var(--hover-scale-amount, 1.03));
  }

  /* Product photo: capped to exactly the reserved clearance height
     (--flavor-outer-gap + --flavor-inner-clearance above), not the card's
     full height. Anchored to the BOTTOM of that box, flush with
     .flavor-card__link's own top edge — i.e. exactly where the title
     starts. Because object-fit:contain never renders content taller than
     its own box, the photo can physically never reach the title regardless
     of its aspect ratio: a tall photo fills the box almost edge to edge and
     pokes up near the card's own top; a shorter/wider one floats lower,
     closer to the title, with empty space above it inside the box. Nothing
     is ever pushed past the card's own top edge (unlike an earlier version
     of this that used a negative object-position/transform nudge — that
     either clipped the photo's own top against its box, or got clipped by
     an ancestor carousel row that has no spare room above a card to safely
     overflow into). Positioned absolute so it takes no space in the flex
     column itself — only .flavor-card__body (the other, non-absolute child)
     does — and pointer-events:none so it never blocks clicks meant for the
     "Add to cart" button sitting underneath it in .flavor-card__body.
     z-index above .flavor-card__body so it visually sits in front of the
     card surface where the two overlap, matching the reference image. */
  .flavor-card__image-frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: calc(var(--flavor-outer-gap) + var(--flavor-inner-clearance));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }

  .flavor-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 0;
    /* Soft but visible lift: wide blur keeps it gentle, opacity raised
       enough to actually read against light card backgrounds — drop-shadow
       (not box-shadow) so it hugs the photo's own transparent silhouette
       instead of drawing a shadow around its rectangular box. */
    filter: drop-shadow(0 10px 20px rgb(0 0 0 / 0.22));
  }

  /* Whole-card zoom on hover — scales <product-card> itself (image + colored
     body + text together, since the image is a sibling of .flavor-card__body
     and only a shared transform on their common parent keeps them moving as
     one piece). Applies unconditionally, independent of the "Hover
     animation" setting above (none/lift/scale) — placed after those rules
     so it wins the cascade even when a modifier class is also present. Own
     local duration/timing (separate from --hover-transition-duration used
     by the lift/scale variants) so this can be tuned without touching them.
     Gated the same way the theme's other hover effects are (assets/base.css)
     so touch devices and reduced-motion users don't get a stuck transform.

     Pure scale, no vertical movement — combining scale with translateY was
     making cards visually collide with/get covered by their neighbors in
     the slider on hover (scaling creates a new stacking context, so a
     moved card can end up painted under a still-static sibling later in
     DOM order). z-index below lifts the hovered card above its neighbors
     so the zoom itself is never clipped or covered either. */
  @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
    .flavor-card:hover {
      z-index: 2;
      transform: scale(var(--flavor-card-zoom-amount, 1.05));
      transition: transform var(--flavor-card-zoom-duration, 0.45s) var(--flavor-card-zoom-timing, ease-out),
        box-shadow var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
    }
  }

  /* The actual visible card: corner radius lives here (not on <product-card>
     itself) so the image above can overflow out of the card cleanly instead
     of being clipped by its rounded corners. This is the flex column's one
     non-absolute child, so it naturally starts right after the card's own
     --flavor-outer-gap top padding. No background-color of its own —
     .flavor-card__art (below)
     is an inset:0 layer that always fully covers this box, so this box's own
     background would never actually be visible; the art layer's color is
     the card's real background. */
  .flavor-card__body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-radius: var(--border-radius, 24px);
    overflow: hidden;
  }

  /* Needs its own position:relative + z-index so it stacks above
     .flavor-card__art (the shape backdrop) below — position:absolute
     siblings otherwise paint above plain in-flow content, not below it.

     Title clearance is kept deliberately SMALLER than --flavor-inner-clearance
     (which still drives .flavor-card__image-frame's height above, full size,
     untouched by this) — --flavor-title-lift pulls the title up into the
     lower portion of that frame instead of clearing all of it. That's safe
     precisely because of the baked-in file padding --flavor-image-fill above
     already told us is there: the photo's own visible pixels stop well
     before the frame's bottom edge, so this gap is mostly transparent
     already — z-index 3 (image) above z-index 1 (this link) means even
     where the boxes now overlap, nothing opaque paints over the title. Only
     risk: a product whose cutout has little/no bottom padding could end up
     with its title genuinely under the visible photo — if that happens for
     a specific product, it's that image that needs re-cropping, not this
     number. */
  .flavor-card__link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    --flavor-title-lift: 0.7;
    padding-block-start: calc(var(--flavor-inner-clearance) * var(--flavor-title-lift, 1));
    color: inherit;
    text-decoration: none;
  }

  /* Decorative art, confined to .flavor-card__body now (clipped by its
     overflow:hidden + border-radius above) — a solid-color rectangle (back
     layer, art_background_color) that fills the whole body, with the shape
     SVG (front layer, svg_color) on top of it, anchored to the body's
     bottom edge so it grows up from the card's own bottom. */
  .flavor-card__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--flavor-card-shape-back);
  }

  .flavor-card__blob {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    display: block;
    line-height: 0;
    color: var(--flavor-card-shape-front);
  }

  .flavor-card__blob svg {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Font/size come from the section's "Card title/description/price" style
     settings (--flavor-title-*, --flavor-desc-*, --flavor-price-* — set once
     on the section wrapper, inherited by every card); color falls back
     through --flavor-card-title-color (this card's own override, if any). */
  .flavor-card__title {
    margin-block-start: var(--margin-md, 20px);
    padding-inline: var(--padding-md, 16px);
    font-family: var(--flavor-title-font, inherit);
    font-size: var(--flavor-title-size, inherit);
    font-weight: var(--flavor-title-weight, 700);
    color: var(--flavor-card-title-color);
  }

  .flavor-card__subtitle {
    margin-block-start: var(--margin-3xs, 4px);
    padding-inline: var(--padding-lg, 20px);
    font-family: var(--flavor-desc-font, inherit);
    font-size: var(--flavor-desc-size, 0.85em);
    color: var(--flavor-desc-color, currentColor);
    opacity: var(--opacity-70, 0.7);
  }

  .flavor-card__price {
    position: relative;
    z-index: 1;
    margin-block-start: var(--margin-xs, 10px);
    font-family: var(--flavor-price-font, inherit);
    font-size: var(--flavor-price-size, inherit);
    color: var(--flavor-card-price-color);
  }

  /* Current (sale) price only — make it stand out from the struck-through
     compare-at price next to it, without touching snippets/price.liquid's
     own default styling used by every other product card in the theme. */
  .flavor-card__price .price {
    font-weight: 700;
    font-size: 1.03em;
  }

  .flavor-card__cta {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-block-start: auto;
    padding: var(--padding-md, 16px) var(--padding-lg, 20px) var(--padding-lg, 20px);
  }

  /* Same shape as _product-card-button.liquid's own CSS: the form wrapper
     is forced to block/100% so its child button can be sized in turn —
     product-form-component/form are inline by default otherwise. */
  .flavor-card__cta product-form-component,
  .flavor-card__cta .shopify-product-form,
  .flavor-card__cta form {
    display: block;
    width: 100%;
  }

  .flavor-card__button {
    width: 100%;
    background-color: var(--flavor-button-bg, var(--color-background));
    color: var(--flavor-button-text, var(--color-foreground));
    /* Overrides .button's own --button-border-color (which otherwise
       resolves to the theme's black --color-primary-button-border) so this
       card's "Add to cart" button gets the section's accent border color
       instead. box-shadow itself is still declared by .button in base.css —
       it just reads whichever rule wins the cascade for this custom
       property, and this rule comes later with equal specificity. */
    --button-border-color: var(--flavor-button-border-color, var(--color-primary));
    border-radius: var(--flavor-button-radius, 999px);
    height: var(--flavor-button-height, auto);
    font-size: var(--flavor-button-font-size, inherit);
  }

  .flavor-card__button:hover {
    background-color: var(--flavor-button-hover-bg, var(--flavor-button-bg, var(--color-background)));
    color: var(--flavor-button-hover-text, var(--flavor-button-text, var(--color-foreground)));
    /* .button:hover (base.css) would otherwise win this custom property back
       to the black hover-border, since its higher-specificity :hover rule
       beats this single-class rule — keep the accent border on hover too. */
    --button-border-color: var(--flavor-button-border-color, var(--color-primary));
  }
/* END_BLOCK:_flavor-product-card */

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

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

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

/* START_BLOCK:_footer-social-icons (INDEX:72) */
.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:73) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  header-menu {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

    display: flex;
  }

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

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

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

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    transition: color var(--animation-speed) var(--animation-easing);
    text-decoration: none;
    display: flex;
    min-height: var(--minimum-touch-target);
    align-items: center;

    &: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-caret {
    margin-inline-start: var(--margin-2xs);
    flex-shrink: 0;
  }

  .menu-list__link .menu-list__link-caret svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

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

  /* Slightly bolder weight for the top-level header menu links */
  .header-menu .menu-list__link {
    font-weight: 500;
  }

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

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

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

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

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

  /* the submenu background element to animate */
  .overflow-menu::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px + var(--border-bottom-width));
    left: 0;
    width: 100%;
    height: var(--submenu-height);
    background-color: var(--color-background);
    box-shadow: var(--shadow-popover);
    clip-path: inset(0.5px 0 -100px 0); /* stylelint-disable-line */
    opacity: var(--submenu-opacity, 1);
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic),
      opacity var(--animation-speed-slow) var(--ease-out-cubic) var(--animation-speed-fast);
    z-index: calc(var(--layer-header-menu) - 1);
  }

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

    background-color: transparent;
  }

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

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

    box-shadow: var(--shadow-drawer);
    visibility: hidden;
    background-color: var(--color-background);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(0 100% var(--submenu-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* 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),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .menu-list__list-item:has([data-animating]) > .menu-list__submenu {
    --submenu-content-opacity: 0;

    visibility: visible;

    &::before {
      height: 0;
    }
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    grid-column: 2;
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
  }

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

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

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

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

  .menu-list__list-item:where([slot='overflow']):has([data-animating]) > .menu-list__link {
    --submenu-content-opacity: 0;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
  }

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

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

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

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

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

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

  .mega-menu__link:has(.mega-menu__link-image) .mega-menu__link-title {
    text-align: center;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border: 1px solid var(--color-border);
    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;
    align-items: center;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;

    .mega-menu__link-title {
      text-align: center;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    width: 200px;
  }

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

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

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

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

/* START_BLOCK:_header-social-icons (INDEX:75) */
.header-social-icons {
    display: none;
    align-items: center;
    flex-shrink: 0;
    gap: var(--gap-xs);
  }

  @media screen and (min-width: 750px) {
    .header-social-icons {
      display: flex;
    }
  }

  .header-social-icons .social-icons__icon-wrapper {
    height: var(--button-size);
  }

  .header-social-icons .social-icons__icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }
/* END_BLOCK:_header-social-icons */

/* START_BLOCK:_image (INDEX:77) */
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:_instagram-media (INDEX:80) */
.instagram-card {
    position: relative;
    display: block;
    overflow: hidden;
    height: 100%;
    background-color: var(--ig-card-bg, transparent);
    text-decoration: none;
    color: inherit;
  }

  .instagram-card--shadow {
    box-shadow: var(--shadow-card, 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06));
  }

  .instagram-card--hover-shadow {
    transition: box-shadow var(--ig-transition, 300ms) var(--animation-easing, ease);
  }

  .instagram-card--hover-shadow:hover,
  .instagram-card--hover-shadow:focus-visible {
    box-shadow: var(--shadow-card-hover, 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05));
  }

  .instagram-card__media {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  .instagram-card__image,
  .instagram-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--ig-object-fit, cover);
    object-position: var(--ig-object-position, center);
    transition: transform var(--ig-transition, 300ms) var(--animation-easing, ease),
      filter var(--ig-transition, 300ms) var(--animation-easing, ease),
      opacity var(--ig-transition, 300ms) var(--animation-easing, ease);
  }

  .instagram-card__placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .instagram-card--zoom:hover .instagram-card__image,
  .instagram-card--zoom:focus-visible .instagram-card__image {
    transform: scale(var(--ig-hover-scale, 1.08));
  }

  .instagram-card:hover .instagram-card__image,
  .instagram-card:focus-visible .instagram-card__image {
    filter: brightness(var(--ig-hover-brightness, 1));
    opacity: var(--ig-hover-opacity, 1);
  }

  .instagram-card__overlay {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: var(--animation-easing, ease);
    pointer-events: none;
  }

  .instagram-card__overlay--zoom {
    transform: scale(0.85);
    transition-property: opacity, transform;
  }

  .instagram-card:hover .instagram-card__overlay,
  .instagram-card:focus-visible .instagram-card__overlay {
    opacity: 1;
  }

  .instagram-card:hover .instagram-card__overlay--zoom,
  .instagram-card:focus-visible .instagram-card__overlay--zoom {
    transform: scale(1);
  }

  .instagram-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--instagram-icon-size, 40px);
    height: var(--instagram-icon-size, 40px);
    padding: var(--instagram-icon-padding, 10px);
    border-radius: var(--instagram-icon-radius, 100px);
    background-color: var(--instagram-icon-bg, rgba(20, 32, 92, 0.35));
    color: var(--instagram-icon-color, #fff);
    box-sizing: content-box;
    transition: transform var(--ig-transition, 300ms) var(--animation-easing, ease),
      background-color var(--ig-transition, 300ms) var(--animation-easing, ease),
      color var(--ig-transition, 300ms) var(--animation-easing, ease);
  }

  .instagram-card__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .instagram-card__icon--shadow {
    box-shadow: var(--shadow-card, 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06));
  }

  .instagram-card:hover .instagram-card__icon,
  .instagram-card:focus-visible .instagram-card__icon {
    background-color: var(--instagram-icon-hover-bg, var(--instagram-icon-bg));
    color: var(--instagram-icon-hover-color, var(--instagram-icon-color));
    transform: scale(var(--instagram-icon-hover-scale, 1.1));
  }

  @media (prefers-reduced-motion: reduce) {
    .instagram-card__image,
    .instagram-card__overlay,
    .instagram-card__icon {
      transition: none;
    }
  }
/* END_BLOCK:_instagram-media */

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

  .marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    gap: var(--marquee-gap);
  }

  .marquee__group {
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

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

  .marquee__group * {
    max-width: none;
  }

  .marquee__group > * {
    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;
  }

  /* Fallback for prefers-reduced-motion (assets/marquee.js sets this
     attribute itself) -- no animation, just a normal swipeable/scrollable
     row of the real content group. The cloned group is hidden so
     reduced-motion visitors and keyboard/screen-reader users only ever
     encounter it once. */
  marquee-component[reduced-motion] {
    overflow: visible;
  }

  marquee-component[reduced-motion] .marquee__track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  marquee-component[reduced-motion] .marquee__group[aria-hidden] {
    display: none;
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-card-button (INDEX:84) */
.product-card-button {
    width: 100%;
  }

  /* Higher specificity than .spacing-style's margin-block reset (base.css),
     and margin-block-start (not margin-top) so it wins the same logical
     property instead of a same-specificity physical/logical tie. Pushes the
     button to the bottom of the card - see _product-card-group.liquid. */
  .product-card .product-card-button {
    margin-block-start: auto;
  }

  .product-card-button product-form-component,
  .product-card-button .shopify-product-form,
  .product-card-button form {
    width: 100%;
    display: block;
  }

  .product-card-button :is(.button, .button-secondary) {
    width: 100%;
    height: var(--product-card-button-height, auto);
  }
/* END_BLOCK:_product-card-button */

/* START_BLOCK:_product-card-group (INDEX:86) */
/* Let this group (rating/title/price/button) fill whatever vertical space
     is left below the image inside the card, so the "Add to cart" button
     (margin-block-start: auto, see _product-card-button.liquid) can sit flush
     against the card's bottom border instead of leaving dead space below it. */
  .product-card .product-card-group.group-block {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
/* END_BLOCK:_product-card-group */

/* START_BLOCK:_product-card-price (INDEX:87) */
.tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_BLOCK:_product-card-price */

/* START_BLOCK:_product-card-title (INDEX:88) */
/* text.liquid's line-clamp only truncates lines beyond the clamp count, it
     doesn't reserve space for lines below it - so shorter product titles
     produce shorter cards, and "Add to cart" buttons don't line up across a
     row. Reserve the full clamped height so every card in a row matches. */
  .product-card .text-block--line-clamp {
    min-height: calc(var(--line-clamp, 1) * var(--font-size, 1em) * var(--line-height, 1.2));
  }
/* END_BLOCK:_product-card-title */

/* START_BLOCK:_product-card-vendor (INDEX:89) */
.product-card-vendor {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_product-card-vendor */

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

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

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

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

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

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

/* START_BLOCK:_product-feature-item (INDEX:92) */
.product-feature-item {
    display: flex;
    align-items: center;
    gap: var(--product-feature-item-gap, 10px);
    padding-block: calc(var(--product-feature-gap, 14px) / 2);
  }

  .product-feature-item:first-child {
    padding-block-start: 0;
  }

  .product-feature-item:last-child {
    padding-block-end: 0;
  }

  .product-feature-list--dividers .product-feature-item:not(:first-child) {
    border-block-start: var(--style-border-width, 1px) solid
      var(--product-feature-divider-color, rgb(var(--color-border-rgb) / var(--opacity-10, 0.1)));
  }

  .product-feature-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--product-feature-icon-bg, #faf5f6);
    color: var(--product-feature-icon-color, #14205c);
  }

  .product-feature-item__icon-svg {
    height: auto;
    fill: currentcolor;
  }

  .product-feature-item__text {
    margin: 0;
    font-size: var(--font-size--md, 1rem);
    line-height: 1.45;
    letter-spacing: 0.01em;
  }

  /* Label reads as the headline of the row, full-strength; the description
     is secondary detail, so it's dialed back (same 0.7-opacity convention
     used for subtitles elsewhere in the theme, e.g. the bundle card and
     flavor add-on cards) instead of matching weight — gives the row a
     clear read order instead of one flat run of same-weight text. */
  .product-feature-item__label {
    font-weight: 600;
    color: var(--color-foreground, inherit);
    margin-inline-end: 0.3em;
  }

  .product-feature-item__description {
    color: var(--color-foreground, inherit);
    opacity: 0.7;
  }
/* END_BLOCK:_product-feature-item */

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

  .dialog--preloading {
    opacity: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .media-gallery--flavor-bg {
    /* Light default (matches .flavor-card's lighter wave shade, not its
       darker back shade), used only when the product has neither a
       card_background_color metafield nor a theme "Flavor card" fallback
       color set — the inline --product-media-flavor-back custom property
       (set above when a color IS configured) always wins over this. */
    --product-media-flavor-back-default: #fce7e6;
  }

  /* Colors only the main image viewport (slideshow-container in carousel
     mode, the grid itself in grid mode) — deliberately NOT the whole
     <media-gallery>, so the bottom thumbnail/dot slideshow-controls row
     (a sibling of slideshow-container, outside it) stays uncolored. */
  .media-gallery--flavor-bg slideshow-container,
  .media-gallery--flavor-bg .media-gallery__grid {
    background-color: var(--product-media-flavor-back, var(--product-media-flavor-back-default));
  }

  /* A cover-fit image (the theme's default) fills its container
     edge-to-edge, so nothing behind it is ever visible. When the flavor
     background is active, letterbox (contain-fit) the image instead so it
     floats inside its box, and make the image/container's own opaque
     backgrounds transparent — otherwise the theme's built-in letterbox
     background (var(--color-background), added so carousel arrows blend
     correctly over transparent images) would paint over the color set
     above. Selectors are scoped under .media-gallery--flavor-bg with an
     extra ancestor class specifically so they out-specificity the block's
     own dynamically-generated .media-fit-{cover|contain} rules above
     regardless of source order. */
  .media-gallery--flavor-bg .product-media-container :is(img, video, iframe, .deferred-media__poster-image) {
    object-fit: contain;
    background-color: transparent;
  }

  .media-gallery--flavor-bg .product-media-container.constrain-height {
    background-color: transparent;
  }

  /* On desktop, "Limit media to screen height" (constrain_to_viewport) sizes
     .product-media-constraint-wrapper's WIDTH from the viewport's available
     HEIGHT (width: min(100%, --constrained-height * aspect_ratio)), so on
     shorter screens the image wrapper ends up narrower than 100% — visible
     as colored bars on the sides once there's a background behind it. Force
     it back to full width when the flavor background is active; the image
     renders taller instead of being width-capped to fit the viewport. */
  .media-gallery--flavor-bg .product-media-constraint-wrapper {
    width: 100%;
    max-width: 100%;
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_search-input (INDEX:97) */
.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:_shop-mega-menu (INDEX:99) */
.shop-mega-menu {
    /* No inset/size of its own — it's purely a positioning root. The backdrop
       and panel below are the actual (fixed-position, viewport-relative)
       visible/hit-testable pieces, each scoped to its own bounds, so this
       host never covers — or intercepts pointer events over — the rest of
       the page (including the header itself) while open. */
    display: contents;
  }

  .shop-mega-menu__backdrop {
    position: fixed;
    top: var(--shop-mega-menu-top);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--layer-header-menu);
    background-color: rgb(0 0 0 / 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* ease-out-cubic instead of the shared --animation-easing (ease-in-out) -
       ease-in-out's fast middle segment read as a "boom" on an element this
       large; cubic ease-out decelerates smoothly all the way to rest. */
    transition: opacity var(--animation-speed-slow, 0.35s) var(--ease-out-cubic);
  }

  .shop-mega-menu__panel-wrap {
    position: fixed;
    top: var(--shop-mega-menu-top);
    left: 0;
    right: 0;
    z-index: var(--layer-header-menu);
    max-height: calc(100dvh - var(--shop-mega-menu-top));
    overflow-y: auto;
    background-color: var(--color-background);
    /* Softer/lighter than the shared --shadow-drawer token (used by cart/menu
       drawers elsewhere) — a wider blur with lower opacity so the shadow this
       full-width panel casts above its own top edge reads as a gentle fade
       rather than a hard line. */
    box-shadow: 0 4px 32px rgb(var(--color-shadow-rgb) / var(--opacity-8));
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(-10px);
    pointer-events: none;
    /* 0.3s ease-out-cubic (a touch longer than the shared --animation-speed-medium
       token, and cubic instead of ease-in-out) - matches the open-state transition
       below so the close reads as the same glide in reverse, not a snap. */
    transition: opacity 0.3s var(--ease-out-cubic), transform 0.3s var(--ease-out-cubic),
      visibility 0s linear 0.3s;
  }

  .shop-mega-menu[data-open='true'] .shop-mega-menu__backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .shop-mega-menu[data-open='true'] .shop-mega-menu__panel-wrap {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.3s var(--ease-out-cubic), transform 0.3s var(--ease-out-cubic);
  }

  .shop-mega-menu__inner {
    /* .section.section--page-width (assets/base.css) handles horizontal
       centering/gutters via the theme's page-width grid; only vertical
       spacing needs to be set here. */
    padding-block: var(--padding-3xl);
  }

  .shop-mega-menu__tab-list {
    /* A CSS Grid version of this was tried (triggers auto-flowing into row
       1, panels pinned to row 2 via `grid-column: 1 / span 999`) to let the
       trigger row scroll horizontally without dragging the panel along —
       but a Grid item's `span` only ever sizes to the *columns it spans*,
       which here were `max-content`-sized to fit the (narrow) trigger
       labels, not the container — so the panel's slider ended up squeezed
       into a few hundred px, overflowing its own cell and dragging the
       *whole* tab-list into an unwanted horizontal scrollbar (arrows in
       turn barely worked, since the slider itself was already fighting an
       outer scroll container). Flex + `order` doesn't have that failure
       mode: the panel's `flex: 1 0 100%` sizes off the *container*, not
       whatever the triggers happen to need. The trade-off is `flex-wrap`
       can't be `nowrap` here either (same reason, from the other earlier
       bug) — mobile's trigger pills (media query below) simply wrap to a
       second line if there are ever enough of them not to fit one, rather
       than scrolling. */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    column-gap: var(--gap-xl);
  }

  /* Each tab block's own wrapper (blocks/_shop-mega-menu-tab.liquid) — kept
     out of layout so its trigger button and panel act as direct children of
     the flex container above (see the `order` rules below). */
  .shop-mega-menu__tab-block {
    display: contents;
  }

  .shop-mega-menu__tab-trigger {
    order: 1;
    appearance: none;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    padding-block: var(--padding-sm);
    font-family: var(--font-heading--family);
    font-size: var(--font-size--body-md);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    border-block-end: 2px solid transparent;
    min-height: var(--minimum-touch-target);
    transition: color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);
  }

  .shop-mega-menu__tab-trigger:hover,
  .shop-mega-menu__tab-trigger.tabs__trigger--active {
    color: var(--color-foreground);
    border-block-end-color: var(--color-foreground);
  }

  .shop-mega-menu__tab-trigger:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  /* Suppresses the keyboard-focus outline above specifically for the
     synthetic click assets/shop-mega-menu.js's hover-switch bridge fires —
     see the comment there for why this is a class instead of a `.blur()`
     call. */
  .shop-mega-menu__tab-trigger--suppress-outline:focus-visible {
    outline: none;
  }

  .shop-mega-menu__panel {
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    display: none;
    /* Divider between the trigger row and the panel content lives here
       (rather than on .tab-list) since triggers and panels are siblings in
       the same flex flow — only the one visible panel renders it. */
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--padding-xl);
    margin-block-start: var(--padding-sm);
  }

  /* Before tabs.js has run at all (no `data-active` attribute exists yet on
     any panel): fall back to showing just the first tab. Deliberately NOT
     gated on <tabs-component>'s own `[data-hydrated]` attribute — that can
     fail to persist depending on the runtime (seen with `shopify theme dev`
     hot-reload), while `data-active` (set directly by tabs.js on every
     panel, on every switch) is reliable, so it alone drives visibility. */
  .shop-mega-menu__tab-block:first-of-type .shop-mega-menu__panel:not([data-active]) {
    display: block;
  }

  .shop-mega-menu__panel[data-active='true'] {
    display: block;
  }

  /* Tab content used to cut instantly on switch (display: none -> block with
     no transition). `animation` (not `transition`) is what can animate an
     element *starting from* display: none - it kicks in from `from` the
     instant `display: block` takes effect, so this needs no JS hook or extra
     wrapper around the panels (which, unlike product-collection-tabs.liquid,
     can't easily get one - see the doc comment near .shop-mega-menu__tab-block
     above on why triggers/panels are interleaved siblings here). */
  @media (prefers-reduced-motion: no-preference) {
    .shop-mega-menu__panel[data-active='true'] {
      /* Cubic ease-out + a longer duration than --animation-speed-medium
         (ease-in-out, 150ms) reads as a smooth glide rather than a snap. */
      animation: shop-mega-menu-panel-in 0.32s var(--ease-out-cubic);
    }
  }

  @keyframes shop-mega-menu-panel-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

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

  /* Hides a slider's own prev/next arrows once its cards no longer overflow
     (nothing left to scroll to) — toggled by assets/shop-mega-menu.js via a
     ResizeObserver, since the theme's own `auto-hide-controls` mechanism
     only ever applies to pagination dots, not arrows. Same condition also
     centers the cards instead of leaving them packed toward the start edge
     — same class, same live ResizeObserver, so this stays correct across
     every breakpoint/panel-resize without any extra JS. */
  .shop-mega-menu__slider--no-overflow slideshow-arrows {
    display: none;
  }

  .shop-mega-menu__slider--no-overflow slideshow-slides {
    justify-content: center;
  }

  .shop-mega-menu__cta {
    display: flex;
    justify-content: center;
    padding-block-start: var(--padding-xl);
  }

  .shop-mega-menu__empty {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .shop-mega-menu__mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--color-background);
    border-block-end: var(--style-border-drawer);
    padding: var(--padding-sm) var(--padding-lg);
  }

  .shop-mega-menu__back-button,
  .shop-mega-menu__close-button {
    display: flex;
    align-items: center;
    gap: var(--padding-2xs);
    min-height: var(--minimum-touch-target);
  }

  .shop-mega-menu__list li:not(:last-child) {
    border-block-end: 1px solid var(--color-border);
  }

  /* Mobile: the dropdown becomes a drawer-width slide-in from the right,
     sitting on top of the already-open hamburger drawer (opened by tapping
     the matching link inside it — see #setupMobileTrigger in
     assets/shop-mega-menu.js). Collected here, after every unconditional
     rule above that shares a selector with these, so the cascade — not just
     the media query — puts these last and they actually win. */
  @media screen and (max-width: 749px) {
    .shop-mega-menu__backdrop {
      /* The drawer's own backdrop already dims the page behind it; a second
         one here would just double up. */
      display: none;
    }

    .shop-mega-menu__panel-wrap,
    .shop-mega-menu[data-open='true'] .shop-mega-menu__panel-wrap {
      /* --layer-temporary (20) is deliberately above --layer-menu-drawer
         (18) so this sits above the drawer it's layered over. */
      top: 0;
      left: 0;
      right: auto;
      width: var(--drawer-width);
      max-width: var(--drawer-max-width);
      height: 100dvh;
      max-height: 100dvh;
      z-index: var(--layer-temporary);
    }

    .shop-mega-menu__panel-wrap {
      transform: translateX(100%);
    }

    .shop-mega-menu[data-open='true'] .shop-mega-menu__panel-wrap {
      transform: translateX(0);
    }

    .shop-mega-menu__inner {
      /* padding-block only — .section--page-width's own grid (assets/base.css)
         already insets this element horizontally via --page-margin; a plain
         `padding` shorthand here doubled that inset on the narrow drawer-width
         mobile panel, showing up as extra left/right whitespace around the
         tab pills and product list. */
      padding-block: var(--padding-lg);
    }

    .shop-mega-menu__tab-list {
      justify-content: flex-start;
      row-gap: var(--padding-2xs);
      column-gap: var(--padding-2xs);
      padding-block: var(--padding-2xs);
    }

    .shop-mega-menu__tab-trigger {
      border-radius: 999px;
      padding-inline: var(--padding-md, 16px);
      background-color: rgb(var(--color-foreground-rgb) / 0.05);
      border-block-end: 0;
      text-transform: none;
      letter-spacing: normal;
    }

    .shop-mega-menu__tab-trigger:hover,
    .shop-mega-menu__tab-trigger.tabs__trigger--active {
      background-color: var(--color-foreground);
      color: var(--color-background);
      border-block-end-color: transparent;
    }

    .shop-mega-menu__panel {
      border-block-start: 0;
      padding-block-start: var(--padding-lg);
      margin-block-start: 0;
    }
  }
/* END_BLOCK:_shop-mega-menu */

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

  .slide__content > * {
    margin: auto;
  }

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

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

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

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

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  .slide__image--desktop {
    display: none;
  }

  .slide__image--mobile {
    display: block;
  }

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

    .slide__image--mobile {
      display: none;
    }
  }
/* END_BLOCK:_slide */

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

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

  .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:_testimonial-card (INDEX:103) */
.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
    background-color: var(--testimonial-card-background, transparent);
  }

  .testimonial-card--shadow {
    box-shadow: var(--shadow-card, 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06));
  }

  .testimonial-card--hover-shadow {
    transition: box-shadow var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
  }

  .testimonial-card--hover-shadow:hover {
    box-shadow: var(--shadow-card-hover, 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05));
  }

  .testimonial-card--hover-lift {
    transition: transform var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
  }

  .testimonial-card--hover-lift:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount, 4px)));
  }

  .testimonial-card--hover-scale {
    transition: transform var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
  }

  .testimonial-card--hover-scale:hover {
    transform: scale(var(--hover-scale-amount, 1.03));
  }

  .testimonial-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
  }

  .testimonial-card__stars {
    flex: 0 1 auto;
    min-width: 0;
  }

  .testimonial-card__verified-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    padding: 0.25rem 0.65rem 0.25rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--testimonial-accent, var(--color-primary));
    background-color: color-mix(in srgb, var(--testimonial-accent, var(--color-primary)) 12%, transparent);
  }

  .testimonial-card__verified-pill .testimonial-card__check-badge {
    width: 0.85rem;
    height: 0.85rem;
    background-color: var(--testimonial-accent, var(--color-primary));
  }

  .testimonial-card__title,
  .testimonial-card__description {
    margin: 0;
  }

  .testimonial-card__title {
    font-weight: 600;
  }

  .testimonial-card__description--clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp);
    overflow: hidden;
  }

  .testimonial-card__description-wrap--expandable:has(.testimonial-card__read-more-toggle:checked) .testimonial-card__description--clamp {
    -webkit-line-clamp: unset;
  }

  .testimonial-card__read-more-label {
    display: inline-block;
    margin-block-start: var(--margin-3xs, 4px);
    cursor: pointer;
  }

  .testimonial-card__description-wrap--expandable:has(.testimonial-card__read-more-toggle:checked) .testimonial-card__read-more-label {
    display: none;
  }

  /*
    No divider line by design — margin-block-start: auto (the card is a flex
    column) pushes the footer to the bottom on its own, so short and long
    reviews still line up when "Equal height cards" is on.
  */
  .testimonial-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-block-start: auto;
    padding-block-start: 1rem;
  }

  .testimonial-card__who {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  .testimonial-card__avatar {
    flex-shrink: 0;
    width: var(--testimonial-avatar-size, 48px);
    height: var(--testimonial-avatar-size, 48px);
    border-radius: var(--border-radius, 999px);
    overflow: hidden;
  }

  .testimonial-card__avatar--shadow {
    box-shadow: var(--shadow-card, 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06));
  }

  .testimonial-card__avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--testimonial-accent, var(--color-primary)), color-mix(in srgb, var(--testimonial-accent, var(--color-primary)) 55%, white));
    color: #ffffff;
    font-weight: 600;
    font-size: calc(var(--testimonial-avatar-size, 48px) * 0.38);
    text-transform: uppercase;
    line-height: 1;
  }

  .testimonial-card__avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .testimonial-card__name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .testimonial-card__check-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    padding: 3px;
    background-color: var(--color-primary);
    color: #ffffff;
    /* icon-checkmark.svg draws its tick with stroke="currentColor" and
       stroke-width="var(--icon-stroke-width)" — that variable is only ever
       set inside a couple of unrelated theme components, so without setting
       it here the stroke has no valid width and never renders, leaving just
       the filled circle. */
    --icon-stroke-width: 2px;
  }

  .testimonial-card__check-badge svg {
    width: 100%;
    height: 100%;
  }

  .testimonial-card__product-tag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-width: 0;
    max-width: 55%;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border-radius: 999px;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5, 0.05));
    color: inherit;
    text-decoration: none;
  }

  .testimonial-card__product-image-wrap {
    flex-shrink: 0;
    width: var(--testimonial-product-image-width, 24px);
    height: var(--testimonial-product-image-height, 24px);
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8, 0.08));
  }

  .testimonial-card__product-image {
    width: 100%;
    height: 100%;
    object-fit: var(--testimonial-product-image-fit, cover);
  }

  .testimonial-card__product-image-wrap--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;

    .svg-wrapper {
      width: 45%;
      height: 45%;
      opacity: var(--opacity-40, 0.4);
    }

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .testimonial-card__product-title {
    font-size: 0.8em;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .testimonial-card__product-tag:hover .testimonial-card__product-title {
    color: var(--hover-color, inherit);
  }
/* END_BLOCK:_testimonial-card */

/* START_BLOCK:_testimonial-slider-image (INDEX:104) */
.testimonial-slider-image {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }

  .testimonial-slider-image__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* END_BLOCK:_testimonial-slider-image */

/* START_BLOCK:_testimonial-slider-review (INDEX:105) */
.testimonial-slider-review {
    position: relative;
    display: flex;
    height: 100%;
  }

  .testimonial-slider-review__tail {
    position: absolute;
    left: 32px;
    top: calc(100% - 12px);
    z-index: 0;
    width: var(--tsr-tail-size, 44px);
    display: block;
    line-height: 0;
    color: var(--tsr-tail-color);
  }

  .testimonial-slider-review__tail svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .testimonial-slider-review__surface {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    /*
      Must fill the outer wrapper's full (possibly equal-height-stretched)
      height, not just shrink to its own content — otherwise the tail below
      (positioned off the wrapper's bottom edge, not the surface's) ends up
      floating in whatever empty space is left under a short review next to
      a taller photo card, instead of sitting under the visible bubble.
      overflow:hidden comes from border-override.liquid whenever
      border_radius > 0 — that's also what clips .testimonial-slider-review__shape
      below to the bubble's own rounded corners.
    */
    height: 100%;
    background-color: var(--tsr-bg);
  }

  /*
    Front layer of the back/front pair — same rule set as .flavor-card__blob
    in _flavor-product-card.liquid, just applied here instead: anchored to
    the surface's own bottom edge, full width, bleeding slightly past the
    edge so it grows up from the card's own bottom rather than floating
    above it. Sits behind the text (z-index 0, versus the content wrapper's
    z-index 1).
  */
  .testimonial-slider-review__shape {
    position: absolute;
    bottom: -20px;
    left: 0;
    z-index: 0;
    width: 100%;
    display: block;
    line-height: 0;
    pointer-events: none;
  }

  .testimonial-slider-review__shape svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .testimonial-slider-review__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .testimonial-slider-review__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
  }

  .testimonial-slider-review__quote {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: var(--opacity-80, 0.8);
  }

  .testimonial-slider-review__quote::before {
    content: '\201C';
  }

  .testimonial-slider-review__quote::after {
    content: '\201D';
  }

  .testimonial-slider-review__quote p {
    display: inline;
    margin: 0;
  }

  .testimonial-slider-review__footer {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-block-start: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background-color: rgb(255 255 255 / 0.6);
    font-size: 0.85rem;
    font-weight: 600;
  }

  /* Unlike the checkmark-in-a-circle badge blocks/_testimonial-card.liquid
     uses, this seal SVG (icon-testimonial-verified-badge.svg) is a
     complete, self-colored badge shape on its own — no separate circle
     background needed, just size and colour it directly. */
  .testimonial-slider-review__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.1rem;
  }

  .testimonial-slider-review__badge svg {
    display: block;
    width: 100%;
    height: auto;
  }
/* END_BLOCK:_testimonial-slider-review */

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    /* --accordion-heading-weight only exists when "Bold headings" is on —
       every other instance of this block (shared stylesheet, every accordion
       site-wide) keeps its normal preset weight untouched. */
    font-weight: var(--accordion-heading-weight, var(--summary-font-weight));
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  /* Accent color is opt-in: gated on the custom property literally being
     present in the inline style (same presence-check idiom as
     --show-fallback-borders above), not just a var() fallback — some
     accordions elsewhere (e.g. the FAQ page) already set non-"none" row
     icons, which default to a plain black fill with no color rule at all,
     so a `fill: var(--accordion-accent-color, currentcolor)` fallback would
     still quietly recolor those. This keeps every other accordion
     byte-for-byte unaffected unless accent_color is actually set. */
  .accordion[style*='--accordion-accent-color'] .details__icon {
    fill: var(--accordion-accent-color);
  }

  .accordion[style*='--accordion-accent-color'] .icon-caret svg {
    color: var(--accordion-accent-color);
  }

  .accordion[style*='--accordion-accent-color'] details[open] > .details__header {
    color: var(--accordion-accent-color);
  }
/* END_BLOCK:accordion */

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

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

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

  /* No longer needs to exclude .quantity-selector — it moved out of this
     button row entirely (blocks/quantity.liquid now renders independently,
     right after the price) when the stepper was relocated + restyled. */
  .product-form-buttons > * {
    flex: 1 1 185px;
    min-width: fit-content;
  }

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

  /* Add to cart + WhatsApp share one row, 50/50, regardless of stacking —
     this wrapper is itself one flex item of .product-form-buttons (so it
     still gets the 51% stacked-row treatment above), while its own children
     split evenly inside it.

     Below 750px there isn't enough width for both labels to fit on one
     line at 50%, so the pair stacks full-width instead of wrapping onto a
     cramped second line. */
  .product-form-buttons__primary-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: calc(var(--gap-sm) / 2);

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

  .product-form-buttons__primary-row > * {
    flex: 1 1 0;
    min-width: 0;
  }

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

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

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

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

/* START_BLOCK:contact-info (INDEX:120) */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs, 8px);
  }

  .contact-info__heading {
    margin: 0;
    font-weight: 600;
  }

  .contact-info__list {
    display: flex;
    flex-direction: column;
    gap: var(--contact-info-gap, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .contact-info__list--row {
    flex-direction: column;

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

  .contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs, 8px);
  }

  .contact-info__list--row .contact-info__item {
    align-items: center;
  }

  .contact-info__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--contact-info-icon-size, 18px);
    height: var(--contact-info-icon-size, 18px);
    color: var(--contact-info-icon-color, currentColor);
    margin-block-start: 0.15em;
  }

  .contact-info__list--row .contact-info__icon {
    margin-block-start: 0;
  }

  .contact-info__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .contact-info__icon:has(path[stroke]) svg {
    fill: none;
  }

  .contact-info__text,
  .contact-info__link {
    color: inherit;
    text-decoration: none;
  }

  .contact-info__link:hover {
    text-decoration: underline;
  }
/* END_BLOCK:contact-info */

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

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

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

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

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

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

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

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

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

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

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

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

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

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

      outline: none;
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    right: 0;

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

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

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

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

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

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

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

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

/* START_BLOCK:faq-search (INDEX:123) */
faq-search-component {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: var(--size-style-width);
    margin-inline: auto;

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

  .faq-search__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);
    border-radius: 999px;
    border: var(--style-border-width-inputs, 1px) solid var(--color-input-border);
    transition: border-color var(--animation-speed) var(--animation-easing),
      box-shadow var(--animation-speed) var(--animation-easing);

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

  .faq-search__input:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

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

  faq-search-component .faq-search__icon,
  faq-search-component .faq-search__reset {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    background: transparent;
  }

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

  faq-search-component .faq-search__icon {
    left: var(--margin-lg);
    color: var(--color-input-text);

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

  faq-search-component .faq-search__reset {
    right: var(--margin-lg);
    color: var(--color-input-text);
    cursor: pointer;
    border-radius: 100%;
    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);
    }
  }

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

  .faq-search__no-results {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    margin-block-start: var(--margin-sm);
    text-align: center;
    opacity: var(--opacity-subdued-text);
  }

  /*
    When a search is active, flatten the FAQ tabs into a single filtered list:
    hide the category pills and force every panel to render (instead of only
    the active one), so matches across all categories are visible at once.
  */
  body[data-faq-searching] .tabs__list {
    display: none;
  }

  body[data-faq-searching] tabs-component[data-hydrated] .tabs__panel {
    display: block !important;
  }

  body[data-faq-searching] accordion-custom[hidden] {
    display: none;
  }
/* END_BLOCK:faq-search */

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

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

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

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

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

  /* .facets-toggle only ever holds mobile-only controls (the "Show filters" drawer
     trigger and, on small screens, the sorting/grid-density fallbacks) — desktop
     already renders sorting/filtering via .facets--horizontal or .facets--vertical.
     Without this rule the (unhidden) toggle bar is left with no explicit grid-column,
     so CSS Grid auto-placement drops it into the same row as the vertical sidebar,
     which then bumps .main-collection-grid down to the next row and leaves a blank
     row-height gap above the product cards. */
  .facets-toggle {
    @media screen and (min-width: 750px) {
      display: none;
    }

    /* On mobile the toggle bar has no grid-column of its own, so it stretches
       edge-to-edge and the "Filter" label ends up flush against the viewport.
       Inset it to line up with the page gutter (consumes the inline-set
       --facets-inner-padding-inline, falling back to the same token). */
    @media screen and (max-width: 749px) {
      padding-inline: var(--facets-inner-padding-inline, var(--padding-lg));
    }
  }

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

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

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

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

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

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

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

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

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
      /* Separates the whole toolbar from the product grid below it. */
      border-block-end: var(--style-border-width) solid var(--color-border);
    }
  }

  /* The controls row above the vertical sidebar reuses .facets--horizontal
     for layout, but shouldn't get the divider meant for the standalone
     horizontal filter bar. */
  .facets-controls-wrapper.facets--horizontal {
    @media screen and (min-width: 750px) {
      border-block-end: none;
    }
  }

  .facets--vertical {
    display: none;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
      /* Bordered pill button — reuses the same tokens .facets__pill-label
         (filter values, below) already uses, so the toolbar's own triggers
         feel consistent with the rest of the filter UI instead of looking
         like plain unstyled text. Covers Availability/Price (this file's
         list-filter.liquid) and Sort (sorting.liquid) alike, since both
         share this exact .facets__summary class. */
      gap: var(--gap-2xs);
      padding-inline: var(--padding-sm);
      border-radius: var(--style-border-radius-md);
      box-shadow: inset 0 0 0 var(--variant-picker-button-border-width)
        rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
      transition: box-shadow var(--animation-speed) var(--animation-easing);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--horizontal .facets__summary:hover,
    .facets--horizontal details[open] > .facets__summary {
      box-shadow: inset 0 0 0 var(--variant-picker-button-border-width)
        rgb(var(--color-foreground-rgb) / 100%);
    }
  }

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

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

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

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content,
  .sorting-filter__options {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

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

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_BLOCK:filters */

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

    @media screen and (min-width: 750px) {
      flex-direction: row;
      justify-content: space-between;
      gap: var(--gap-md);
      align-items: center;
      text-align: left;
    }
  }

  .footer-utilities:has(.footer-utilities__group--right:empty) {
    justify-content: center;
  }

  .footer-utilities:has(.footer-utilities__group--right:empty) .footer-utilities__group--left {
    flex: 0 1 auto;

    @media screen and (min-width: 750px) {
      text-align: center;
    }
  }

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

  .footer-utilities__group {
    width: 100%;
    display: flex;
    flex: 1 1 max-content;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: baseline;
      gap: var(--gap-2xs) var(--gap-xl);
      text-align: left;
    }
  }

  .footer-utilities__group--right {
    @media screen and (min-width: 750px) {
      justify-content: flex-end;
    }
  }

  .footer-utilities__group:empty {
    display: none;
  }
/* END_BLOCK:footer-utilities */

/* START_BLOCK:icon (INDEX:129) */
.icon-block {
    display: flex;
    fill: currentcolor;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:130) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  placeholder-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio);
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

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

/* START_BLOCK:logo (INDEX:132) */
.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;
    text-decoration: none;

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

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

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:133) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

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

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:order-tracking (INDEX:134) */
order-tracking-component {
    display: block;
    width: 100%;
    max-width: var(--size-style-width);
    margin-inline: auto;
  }

  .order-tracking__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  @media screen and (min-width: 750px) {
    .order-tracking__form {
      flex-direction: row;
      align-items: flex-start;
    }
  }

  .order-tracking__field {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    flex: 1;
  }

  .order-tracking__label {
    font-size: 0.875rem;
    color: var(--color-foreground-heading);
  }

  .order-tracking__input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: 999px;
    border: var(--style-border-width-inputs, 1px) solid var(--color-input-border);
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .order-tracking__input:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .order-tracking__input:disabled {
    opacity: 0.6;
  }

  .order-tracking__input[aria-invalid='true'] {
    border-color: var(--color-error);
  }

  .order-tracking__help {
    font-size: 0.8125rem;
    opacity: var(--opacity-subdued-text);
  }

  .order-tracking__help--error {
    color: var(--color-error);
    opacity: 1;
  }

  .order-tracking__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    height: fit-content;

    @media screen and (min-width: 750px) {
      margin-block-start: 1.7rem;
    }
  }

  .order-tracking__spinner {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: order-tracking-spin var(--animation-speed) linear infinite;
  }

  .order-tracking__spinner[hidden] {
    display: none;
  }

  @keyframes order-tracking-spin {
    to {
      transform: rotate(360deg);
    }
  }

  order-tracking-component[aria-busy='true'] .order-tracking__form {
    opacity: 0.7;
  }

  .order-tracking__result,
  .order-tracking__error {
    margin-block-start: var(--margin-xl);
  }

  .order-tracking__result[hidden],
  .order-tracking__error[hidden] {
    display: none;
  }

  .order-tracking__result-summary {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    margin-block-end: var(--margin-lg);
  }

  .order-tracking__result-summary > .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .order-tracking__result-courier {
    font-weight: 600;
    color: var(--color-foreground-heading);
  }

  .order-tracking__result-link {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
    font-size: 0.875rem;
    text-decoration: underline;
  }

  .order-tracking__result-link[hidden] {
    display: none;
  }

  .order-tracking__result-link .svg-wrapper {
    width: var(--icon-size-xs, 0.85em);
    height: var(--icon-size-xs, 0.85em);
  }

  .order-tracking__timeline {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .order-tracking__timeline {
      flex-direction: row;
      align-items: flex-start;
    }
  }

  .order-tracking__timeline-step {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    flex: 1;
    opacity: var(--opacity-subdued-text);

    @media screen and (min-width: 750px) {
      flex-direction: column;
      text-align: center;
      position: relative;
    }
  }

  @media screen and (min-width: 750px) {
    .order-tracking__timeline-step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: calc(var(--icon-size-lg) / 2);
      left: calc(50% + var(--icon-size-lg) / 2 + var(--gap-sm));
      width: calc(100% - var(--icon-size-lg) - var(--gap-sm) * 2);
      height: 1px;
      background-color: currentColor;
      opacity: 0.3;
    }
  }

  .order-tracking__timeline-step[data-status='complete'],
  .order-tracking__timeline-step[data-status='current'] {
    opacity: 1;
  }

  .order-tracking__timeline-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    border-radius: 50%;
    border: var(--style-border-width-inputs, 1px) solid currentColor;
  }

  .order-tracking__timeline-icon svg {
    grid-area: 1 / 1;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .order-tracking__timeline-icon svg:last-child {
    opacity: 0;
  }

  .order-tracking__timeline-step[data-status='complete'] .order-tracking__timeline-icon {
    color: var(--color-foreground-heading);
    background-color: currentColor;
  }

  .order-tracking__timeline-step[data-status='complete'] .order-tracking__timeline-icon svg:first-child {
    opacity: 0;
  }

  .order-tracking__timeline-step[data-status='complete'] .order-tracking__timeline-icon svg:last-child {
    opacity: 1;
    color: var(--color-background, #fff);
  }

  .order-tracking__timeline-step[data-status='current'] .order-tracking__timeline-icon {
    box-shadow: 0 0 0 3px rgb(var(--color-foreground-rgb, 0 0 0) / 0.15);
  }

  .order-tracking__timeline-label {
    font-size: 0.8125rem;
  }

  .order-tracking__reset {
    margin-block-start: var(--margin-lg);
    text-decoration: underline;
  }

  .order-tracking__error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-sm);
  }

  .order-tracking__error:focus-visible {
    outline: none;
  }

  .order-tracking__fallback {
    margin-block-start: var(--margin-md);
    padding-block-start: var(--padding-md);
    border-block-start: 1px solid var(--color-border, currentColor);
    width: 100%;
  }

  .order-tracking__fallback-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    margin-block-start: var(--margin-sm);
  }

  .order-tracking__fallback-link {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .order-tracking__fallback-link .svg-wrapper {
    width: var(--icon-size-sm, 1em);
    height: var(--icon-size-sm, 1em);
  }
/* END_BLOCK:order-tracking */

/* START_BLOCK:page (INDEX:136) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .page-placeholder {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:137) */
.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:138) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

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

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:price (INDEX:139) */
.tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_BLOCK:price */

/* START_BLOCK:product-feature-list (INDEX:141) */
.product-feature-list {
    margin: 0;
    list-style: none;
  }

  .product-feature-list--background {
    /* Padding comes entirely from the block's own padding-* settings below
       (via .spacing-style) — not hardcoded here, so it doesn't fight with
       those for the same box sides. */
    background-color: var(--product-feature-background-color);
    border-radius: var(--product-feature-corner-radius);
  }
/* END_BLOCK:product-feature-list */

/* START_BLOCK:product-inventory (INDEX:142) */
.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:143) */
.product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }

  .product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
  }

  .product-recommendations__skeleton-image,
  .product-recommendations__skeleton-line {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .product-recommendations__skeleton-image {
    aspect-ratio: 3 / 4;
  }

  .product-recommendations__skeleton-line {
    height: 0.75em;
  }

  .product-recommendations__skeleton-line--title {
    width: 70%;
  }

  .product-recommendations__skeleton-line--price {
    width: 35%;
  }

  .product-recommendations__skeleton-image::after,
  .product-recommendations__skeleton-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      rgb(var(--color-foreground-rgb) / 0.12) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: product-recommendations-shimmer 1.5s infinite linear;
  }

  @media (prefers-reduced-motion: reduce) {
    .product-recommendations__skeleton-image::after,
    .product-recommendations__skeleton-line::after {
      animation: none;
    }
  }

  @keyframes product-recommendations-shimmer {
    from {
      background-position: 150% 0;
    }
    to {
      background-position: -50% 0;
    }
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:product-specifications (INDEX:144) */
.racket-specifications--background {
    background-color: var(--racket-spec-background-color);
    border-radius: var(--racket-spec-corner-radius);
  }

  .racket-specifications__heading {
    margin: 0 0 var(--margin-xs, 8px);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-foreground);
    opacity: 0.7;
  }

  .racket-specifications-content {
    padding-block-start: var(--padding-sm, 0.7rem);
  }

  .racket-specifications__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .racket-spec-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 7px;
  }

  .racket-spec-row:first-child {
    padding-block-start: 0;
  }

  .racket-spec-row:last-child {
    padding-block-end: 0;
  }

  .racket-specifications__list--dividers .racket-spec-row:not(:first-child) {
    border-block-start: var(--style-border-width, 1px) solid var(--color-border, #e5e5e5);
  }

  .racket-spec-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--racket-spec-icon-bg, #faf5f6);
    color: var(--racket-spec-icon-color, #14205c);
  }

  .racket-spec-row__icon svg {
    width: 16px;
    height: auto;
    fill: none;
  }

  .racket-spec-row__label {
    flex: 0 0 auto;
    font-size: var(--font-size--md, 1rem);
    line-height: 1.45;
    color: var(--color-foreground, inherit);
    opacity: 0.7;
    white-space: nowrap;
  }

  .racket-spec-row__value {
    flex: 0 1 auto;
    font-weight: 600;
    font-size: var(--font-size--md, 1rem);
    line-height: 1.45;
    color: var(--color-foreground, inherit);
    text-align: left;
  }
/* END_BLOCK:product-specifications */

/* START_BLOCK:product-trust-badge (INDEX:146) */
.trust-badge-wrap {
    display: flex;
  }

  .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--trust-badge-bg);
    border: 2.5px dotted var(--trust-badge-border-color);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    color: var(--trust-badge-text-color);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.1;
  }

  .trust-badge__avatars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .trust-badge__avatar {
    display: block;
    width: var(--trust-badge-avatar-size);
    height: var(--trust-badge-avatar-size);
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--trust-badge-bg);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5, 0.05));
  }

  .trust-badge__avatar:not(:first-child) {
    margin-inline-start: calc(var(--trust-badge-avatar-size) * -0.45);
  }

  .trust-badge__avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .trust-badge__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    padding: 2.5px;
    background-color: var(--trust-badge-checkmark-color);
    color: #ffffff;
    /* icon-checkmark.svg strokes its tick with currentColor + this variable;
       without it the stroke has no width and only the filled circle shows. */
    --icon-stroke-width: 2.2px;
  }

  .trust-badge__check svg {
    width: 100%;
    height: 100%;
  }

  .trust-badge__text {
    white-space: nowrap;
  }

  .trust-badge__text strong {
    font-weight: 700;
  }
/* END_BLOCK:product-trust-badge */

/* START_BLOCK:quantity (INDEX:147) */
/* Sized to its own content, not the full row — it's a flex item sitting
     beside the price block (templates/product.json's price_quantity_row
     group) on desktop, not a standalone full-width row of its own. */
  .product-quantity {
    display: flex;
  }

  /* Overrides base.css's .quantity-selector (plain bordered rectangle,
     assumes a row-flex sibling of the buy buttons) and the theme's own
     `.product-details .quantity-selector` corner-radius rules — nested one
     level deeper than both so it wins on specificity regardless of
     stylesheet load order, the same safe pattern already used for the
     flavor add-on cards' own stepper override. */
  .product-details .product-quantity .quantity-selector {
    flex: none;
    width: fit-content;
    align-self: flex-start;
    height: 40px;
    padding: 0 5px;
    border: none;
    border-radius: 999px;
    background: var(--cart-accent-tint, color-mix(in srgb, #14205c 6%, var(--color-background, white)));
  }

  .product-details .product-quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--cart-accent, #14205c);
    background: var(--color-background, #fff);
    color: var(--cart-accent, #14205c);
  }

  .product-details .product-quantity .quantity-selector :is(.quantity-minus, .quantity-plus) svg {
    width: 12px;
    height: 12px;
  }

  .product-details .product-quantity .quantity-selector :is(.quantity-minus, .quantity-plus):hover {
    background: var(--cart-accent, #14205c);
    color: var(--cart-accent-contrast, #fff);
  }

  .product-details .product-quantity .quantity-selector input[type='number'] {
    width: 1.8em;
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 600;
    background: transparent;
  }
/* END_BLOCK:quantity */

/* START_BLOCK:quicksip-add-ons (INDEX:149) */
.quicksip-addons {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm, 12px);
    width: 100%;
  }

  .quicksip-addons__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: var(--font-size--lg, 1.15rem);
    color: var(--color-foreground, inherit);
  }

  /* A small brand-blue accent mark, tying the heading to the same accent
     color used throughout the rest of the feature (Add + button, badges,
     scrollbar, total bar). */
  .quicksip-addons__heading::before {
    content: '';
    flex: 0 0 auto;
    width: 4px;
    height: 1.1em;
    border-radius: 999px;
    background: #14205c;
  }

  .quicksip-addons__subheading {
    margin: 0;
    font-size: var(--font-size--sm, 0.875rem);
    opacity: 0.65;
  }

  .quicksip-addons__grid {
    display: block;
  }

  .quicksip-addons__list-wrap {
    position: relative;
  }

  .quicksip-addons__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm, 10px);
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;

    /* Thin, custom scrollbar, tinted with the brand blue */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, #14205c 55%, transparent) transparent;
  }

  .quicksip-addons__list::-webkit-scrollbar {
    width: 4px;
  }

  .quicksip-addons__list::-webkit-scrollbar-track {
    background: transparent;
  }

  .quicksip-addons__list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, #14205c 55%, transparent);
    border-radius: 999px;
  }

  /* Pure visual cue — a soft white fade over the last card, hinting there's
     more to scroll. Opacity-toggled (not hidden) by JS so it disappears
     smoothly instead of snapping off once the list is scrolled to the end. */
  .quicksip-addons__fade {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--color-background, #fff) 75%);
    opacity: 1;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .quicksip-addons__fade.is-hidden {
    opacity: 0;
  }

  /* The "Scroll for more" affordance — its own bar after the list, not
     overlapping any card. Only rendered when `addon_count >= 4` (Liquid
     side, see blocks/quicksip-add-ons.liquid) — i.e. 5+ total cards
     counting the pinned current item — so it doesn't show up on a short
     list with nothing to actually scroll to. Once rendered, it's a stable
     affordance (not tied to live scroll position, unlike the fade above),
     rather than a hint that appears/disappears as you scroll. */
  .quicksip-addons__scroll-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-block-start: 8px;
    padding-block: 8px;
    border-radius: var(--style-border-radius, 12px);
    background: color-mix(in srgb, #14205c 6%, var(--color-background, white));
    color: #14205c;
    font-size: var(--font-size--xs, 0.75rem);
    font-weight: 600;
  }

  .quicksip-addons__scroll-cta-icon {
    width: 12px;
    height: 12px;
    color: #14205c;
  }

  @media screen and (max-width: 749px) {
    .quicksip-addons__list {
      max-height: 50vh;
      gap: 8px;
    }

    .quicksip-addons__scroll-cta {
      padding-block: 6px;
    }
  }
/* END_BLOCK:quicksip-add-ons */

/* START_BLOCK:review (INDEX:150) */
.rating-wrapper {
    width: 100%;
    gap: var(--gap-xs);
    flex-wrap: wrap;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--rating-gap, var(--gap-3xs));
  }

  .rating-wrapper .rating-text,
  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:section-heading (INDEX:151) */
.section-heading {
    display: flex;
    flex-direction: column;
    gap: var(--section-heading-gap, 12px);
    width: 100%;
  }

  .section-heading[data-align='left'] {
    align-items: flex-start;
    text-align: left;
  }

  .section-heading[data-align='center'] {
    align-items: center;
    text-align: center;
  }

  .section-heading[data-align='right'] {
    align-items: flex-end;
    text-align: right;
  }

  .section-heading[data-width='narrow'] :is(.section-heading__title, .section-heading__description) {
    max-width: 30ch;
  }

  .section-heading[data-width='normal'] .section-heading__title {
    max-width: 50ch;
  }

  .section-heading[data-width='normal'] .section-heading__description {
    max-width: 50ch;
  }

  .section-heading[data-width='full'] :is(.section-heading__title, .section-heading__description) {
    max-width: none;
  }

  .section-heading[data-align='center'] :is(.section-heading__title, .section-heading__description) {
    margin-inline: auto;
  }

  .section-heading[data-align='right'] :is(.section-heading__title, .section-heading__description) {
    margin-inline-start: auto;
  }

  /* Eyebrow */
  .section-heading__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-accent--family, var(--font-body--family));
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--letter-spacing-md, 0.13em);
    text-transform: uppercase;
    color: var(--color, var(--color-primary));
  }

  .section-heading__eyebrow-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
  }

  .section-heading__eyebrow--pill {
    padding: 0.4em 0.9em;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--color, var(--color-primary)) 12%, transparent);
  }

  /* Title */
  .section-heading__title {
    margin: 0;
    text-wrap: balance;
    color: var(--color, inherit);
  }

  /* Description */
  .section-heading__description {
    margin: 0;
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
    text-wrap: pretty;
  }

  .section-heading__description :is(p, ul, ol) {
    color: inherit;
  }

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

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

  /* Optional accent line under the title */
  .section-heading--accent-line .section-heading__title {
    position: relative;
    padding-block-end: calc(var(--section-heading-gap, 12px) * 0.75);
  }

  .section-heading--accent-line .section-heading__title::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 3rem;
    height: 3px;
    border-radius: 999px;
    background-color: var(--color-primary);
  }

  .section-heading--accent-line[data-align='center'] .section-heading__title::after {
    inset-inline-start: 50%;
    translate: -50% 0;
  }

  .section-heading--accent-line[data-align='right'] .section-heading__title::after {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
/* END_BLOCK:section-heading */

/* START_BLOCK:spacer (INDEX:154) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 750px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:155) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }

  swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }
  }

  swatches-variant-picker-component .variant-option--swatches {
    padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .variant-option--swatches {
    overflow-list::part(list) {
      gap: var(--gap-sm);
    }

    overflow-list[defer]::part(list) {
      flex-wrap: nowrap;
    }
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_BLOCK:swatches */

/* START_BLOCK:tabs (INDEX:156) */
.tabs {
    display: block;
    width: 100%;
  }

  .tabs__inner {
    display: flex;
    flex-direction: column;
    gap: var(--tabs-content-gap, 16px);
  }

  .tabs--vertical .tabs__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .tabs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tabs-trigger-gap, 8px);
  }

  .tabs--align-flex-start .tabs__list {
    justify-content: flex-start;
  }

  .tabs--align-center .tabs__list {
    justify-content: center;
  }

  .tabs--align-flex-end .tabs__list {
    justify-content: flex-end;
  }

  .tabs--align-space-between .tabs__list {
    justify-content: space-between;
  }

  .tabs--align-space-between:not(.tabs--vertical) .tabs__trigger {
    flex: 1 1 0%;
    justify-content: center;
  }

  .tabs--vertical .tabs__list {
    flex-direction: column;
    align-items: stretch;
  }

  /* Each `_tab-item` block renders its trigger button and panel together as
     flat siblings (see the comment above `.tabs__list` in the markup) —
     `order` is what actually separates them visually into "every trigger,
     then the one visible panel" regardless of DOM interleaving. */
  .tabs__item {
    display: contents;
  }

  .tabs__trigger {
    order: 1;
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--tabs-font-family);
    font-style: var(--tabs-font-style);
    font-weight: var(--tabs-font-weight);
    font-size: var(--tabs-font-size);
    line-height: var(--tabs-font-line-height);
    text-transform: var(--tabs-font-case);
    color: var(--tabs-inactive-color, var(--color-foreground));
    opacity: 0.65;
    padding-block: 10px;
    padding-inline: 4px;
    min-height: var(--minimum-touch-target);
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
  }

  .tabs__trigger:hover {
    opacity: 1;
  }

  .tabs__trigger:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .tabs__trigger--active {
    opacity: 1;
    color: var(--tabs-active-color, var(--color-foreground));
  }

  .tabs__trigger-icon {
    /* Belt-and-braces sizing: the SVG/img already carries width/height
       attributes from `icon-or-image`, but relying on those alone lets the
       icon fall back to its default (viewport-scale) intrinsic size if the
       attribute is ever blank or overridden — ballooning the whole pill
       into a giant circle. Pin the box in CSS too, driven by the same
       per-tab icon_width setting via --tabs-trigger-icon-size. */
    flex-shrink: 0;
    width: var(--tabs-trigger-icon-size, 18px);
    height: var(--tabs-trigger-icon-size, 18px);
    /* Some icons (e.g. "question_mark") don't set fill="currentColor" on
       their own <path> elements, so they'd otherwise render pure black
       regardless of the trigger's text color — pin it here instead so the
       icon always matches the label (white on the active accent-filled
       pill, the inactive text color otherwise). */
    fill: currentColor;
  }

  /* Underline style */
  .tabs--underline .tabs__trigger {
    border-block-end: 2px solid transparent;
  }

  .tabs--underline .tabs__trigger--active {
    border-block-end-color: var(--tabs-active-bg, var(--color-foreground));
  }

  .tabs--underline.tabs--vertical .tabs__trigger {
    border-block-end: 0;
    border-inline-start: 2px solid transparent;
    padding-inline-start: 12px;
    justify-content: flex-start;
  }

  .tabs--underline.tabs--vertical .tabs__trigger--active {
    border-inline-start-color: var(--tabs-active-bg, var(--color-foreground));
  }

  /* Boxed style */
  .tabs--boxed .tabs__trigger {
    border-radius: 8px;
    padding-inline: 16px;
    border: 1px solid var(--color-border);
  }

  .tabs--boxed .tabs__trigger--active {
    background: var(--tabs-active-bg, var(--color-foreground));
    color: var(--tabs-active-color, var(--color-background));
    border-color: transparent;
  }

  .tabs--boxed.tabs--vertical .tabs__trigger {
    justify-content: flex-start;
  }

  /* Pills style */
  .tabs--pills .tabs__trigger {
    border-radius: 999px;
    padding-inline: 18px;
    background: rgb(var(--color-foreground-rgb, 0 0 0) / 0.05);
  }

  .tabs--pills .tabs__trigger--active {
    background: var(--tabs-active-bg, var(--color-foreground));
    color: var(--tabs-active-color, var(--color-background));
  }

  .tabs--pills.tabs--vertical .tabs__trigger {
    justify-content: flex-start;
  }

  /* Accent pills style — branded pill nav matching the "Product collection
     tabs" home page section: accent-colored border and a filled active
     state with a soft shadow. Wraps onto multiple lines for long/many
     labels rather than scrolling horizontally — trigger and panel share one
     flex container (see `.tabs__item` above), so a `nowrap` trigger strip
     would leave the panel with no room to drop onto its own line below it. */
  .tabs--accent .tabs__list {
    padding-block-end: 0.25rem;
  }

  .tabs--accent .tabs__trigger {
    flex: 0 0 auto;
    opacity: 1;
    border-radius: 999px;
    border: 1px solid var(--tabs-accent-color, var(--color-primary));
    background: transparent;
    padding-block: 0.75em;
    padding-inline: 1.5em;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: none;
  }

  .tabs--accent .tabs__trigger:hover {
    opacity: 1;
    background-color: color-mix(in srgb, var(--tabs-accent-color, var(--color-primary)) 10%, transparent);
  }

  .tabs--accent .tabs__trigger--active {
    background-color: var(--tabs-accent-color, var(--color-primary));
    border-color: var(--tabs-accent-color, var(--color-primary));
    color: var(--tabs-active-color, var(--color-primary-button-text));
    box-shadow: 0 2px 10px color-mix(in srgb, var(--tabs-accent-color, var(--color-primary)) 30%, transparent);
  }

  .tabs--accent.tabs--vertical .tabs__trigger {
    justify-content: flex-start;
  }

  @media screen and (max-width: 749px) {
    .tabs--accent .tabs__list {
      gap: 0.5rem;
    }

    .tabs--accent .tabs__trigger {
      font-size: 0.8125rem;
      padding: 0.5em 1em;
    }
  }

  /* Divider between tab strip and panel — applied per-trigger (rather than
     to `.tabs__list` as a whole) since the list now also contains the
     panel; a bottom/end border on the list itself would land at the very
     end of the panel instead of under the trigger row. */
  .tabs--divider:not(.tabs--vertical) .tabs__trigger {
    border-block-end: var(--style-border-width, 1px) solid var(--color-border);
    padding-block-end: 10px;
  }

  .tabs--divider.tabs--vertical .tabs__trigger {
    border-inline-end: var(--style-border-width, 1px) solid var(--color-border);
    padding-inline-end: 20px;
  }

  .tabs__panel {
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    /* No-JS fallback: hidden by default, shown only for the first tab. */
    display: none;
  }

  /* A narrower (width: custom) group nested directly in a panel — e.g. the
     FAQ template's accordion wrapper — renders in normal block flow here,
     so a reduced width alone leaves it flush to the start edge; center it
     the same way `margin-inline: auto` centers any block-level box. */
  .tabs__panel .group-block--width-custom {
    margin-inline: auto;
  }

  /* :where() keeps this selector's specificity down to just `.tabs__panel`
     (instead of stacking on top of `:first-of-type` + `.tabs__item`), so it
     stays a no-JS fallback only — once hydrated, the rules below (which
     match on `[data-hydrated]` + `.tabs__panel`) must outrank it and
     actually hide the first tab's panel once it's no longer the active one,
     instead of this fallback winning the specificity tie and leaving it
     permanently visible underneath whichever tab is really active. */
  :where(.tabs__item:first-of-type) .tabs__panel {
    display: block;
  }

  /* Once hydrated, JS takes over visibility via data-active */
  tabs-component[data-hydrated] .tabs__panel {
    display: none;
  }

  tabs-component[data-hydrated] .tabs__panel[data-active='true'] {
    display: block;
  }
/* END_BLOCK:tabs */

/* START_BLOCK:video (INDEX:159) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* START_BLOCK:whatsapp-button (INDEX:160) */
.whatsapp-button-wrap {
    display: flex;
    width: 100%;
  }

  .whatsapp-button {
    width: 100%;
    min-height: var(--height-buy-buttons);
    background: var(--whatsapp-button-bg, #25d366);
    color: var(--whatsapp-button-text, #ffffff);
    border-color: var(--whatsapp-button-bg, #25d366);
  }

  .whatsapp-button:hover {
    background: color-mix(in srgb, var(--whatsapp-button-bg, #25d366) 85%, black);
    border-color: color-mix(in srgb, var(--whatsapp-button-bg, #25d366) 85%, black);
  }

  .whatsapp-button__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .whatsapp-button__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-sm, 20px);
    height: var(--icon-size-sm, 20px);
  }

  .whatsapp-button__icon svg {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:whatsapp-button */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:account-actions (INDEX:161) */
.account-actions {
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: height var(--animation-values);

    &:has([data-active]) .account-actions__main-menu {
      visibility: hidden;
    }
  }

  .account-actions__header {
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .account-actions__title {
    /* Ideally we set the font-size here, but specificity issues make this necessary */
    --font-h5--size: var(--font-size--lg);

    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .account-actions__email {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    max-width: var(--account-actions-max-width);
    word-break: break-all;
  }

  .account-actions__sign-ins {
    padding: var(--padding-xl);
    padding-block-start: 0;
    padding-block-end: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .account-actions__sign-in-text {
    display: inline;
  }

  .account-actions__fallback-text {
    display: none;
  }

  .account-actions__sign-ins:not(:has(shop-login-button)) {
    gap: 0;

    .account-actions__sign-in-text {
      display: none;
    }

    .account-actions__fallback-text {
      display: block;
    }
  }

  /* Makes the shop login button radius match the theme settings */
  .account-actions__shop-login {
    --buttons-radius: var(--style-border-radius-buttons-primary);
  }

  .account-actions__nav {
    padding: var(--padding-xl);
    padding-block-start: 0;
  }

  .account-actions__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;

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

  .account-actions__link {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .account-actions__icon {
    display: flex;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-block: -4px;
  }
/* END_SNIPPET:account-actions */

/* START_SNIPPET:account-button (INDEX:162) */
.account-button {
    color: var(--color-foreground);
    appearance: none;
    border: none;
    background: none;
    height: var(--button-size);
    width: var(--button-size);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .account-button__avatar {
    --account-button-size: 1.625rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--account-button-size);
    height: var(--account-button-size);
    border-radius: var(--style-border-radius-50);
    background-color: var(--color-primary-button-background);
    font-size: var(--font-size--sm);
    font-weight: 500;
    color: var(--color-primary-button-text);
    text-transform: uppercase;
    line-height: 1;
  }

  .account-button__icon {
    color: currentColor;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* The shop avatar doesn't bubble the click event up to our button, so we need to prevent that or the button doesn't work */
  .account-button shop-user-avatar {
    pointer-events: none;
  }
/* END_SNIPPET:account-button */

/* START_SNIPPET:account-drawer (INDEX:163) */
.account-drawer {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .account-drawer__dialog {
    --animation-speed: 0.24s;
    --dialog-drawer-opening-animation: account-drawer-slide-in;
    --dialog-drawer-closing-animation: account-drawer-slide-out;

    height: fit-content;
    margin: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 0;
    padding: 0;
  }

  .account-drawer__close-button {
    z-index: 1;
    inset-block-start: var(--padding-xs);
    inset-inline-end: var(--padding-xs);
    color: var(--color-foreground);
    background-color: transparent;
  }

  .account-drawer__close-button .svg-wrapper {
    display: flex;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
  }

  @keyframes account-drawer-slide-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes account-drawer-slide-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }
/* END_SNIPPET:account-drawer */

/* START_SNIPPET:account-popover (INDEX:164) */
.account-popover {
    --account-popover-min-width: 22rem;
    --account-actions-max-width: 22rem;
  }

  .account-popover__summary {
    padding: 0;

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

  .account-popover__panel {
    --account-popover-opacity: 0;
    --account-popover-y: 20px;
    border-radius: var(--style-border-radius-popover);
    margin: 0;
    top: calc(var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding));
    left: unset;
    right: calc(var(--anchor-right) * 1px);

    width: max-content;
    min-width: var(--account-popover-min-width);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    opacity: var(--account-popover-opacity);
    translate: 0 var(--account-popover-y);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;

    &:popover-open {
      --account-popover-opacity: 1;
      --account-popover-y: 0px;
    }
  }

  @starting-style {
    .account-popover__panel {
      --account-popover-opacity: 0;
      --account-popover-y: 20px;
    }
    .account-popover__panel:popover-open {
      --account-popover-opacity: 0;
      --account-popover-y: 20px;
    }
  }
/* END_SNIPPET:account-popover */

/* START_SNIPPET:add-to-cart-button (INDEX:165) */
add-to-cart-component button {
    position: relative;
    overflow: clip;
  }

  .add-to-cart-text {
    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text {
    animation-name: atc-slide-out;
  }

  .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text--added {
    animation-name: atc-slide-in;
  }

  @keyframes atc-slide-in {
    from {
      opacity: 0;
      transform: translateY(0.5em);
    }

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

  @keyframes atc-slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(-1em);
      opacity: 0;
    }
  }
/* END_SNIPPET:add-to-cart-button */

/* START_SNIPPET:background-video (INDEX:168) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-video */

/* START_SNIPPET:bento-grid (INDEX:169) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific cases === */

    /* Exactly 1 item */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(1)) {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(2)) {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(4)) {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(5)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(7)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(8)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(10)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(11)) {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:170) */
.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:173) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:174) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SNIPPET:cart-discount (INDEX:176) */
.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;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .cart-discount__input:focus,
  .cart-discount__input:focus-visible {
    border-color: var(--cart-accent);
    outline: 1px solid var(--cart-accent);
    outline-offset: -1px;
  }

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

  .cart-discount__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--padding-xs);
    cursor: pointer;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  /* Toggle rendered as a small maroon-outline circle to echo the quantity
     stepper buttons. base.css already rotates `.details[open] .icon-plus`
     into an "x". */
  .cart-discount__summary .icon-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--cart-accent);
    color: var(--cart-accent);
  }

  .cart-discount__summary .icon-plus svg {
    width: 12px;
    height: 12px;
  }

  .cart-discount__summary:hover .icon-plus {
    background: var(--cart-accent);
    color: var(--cart-accent-contrast);
  }

  .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%;
    background-color: var(--cart-accent);
    color: var(--cart-accent-contrast);
    border-color: var(--cart-accent);
  }

  .cart-discount__button:hover {
    background-color: color-mix(in srgb, var(--cart-accent) 85%, #000);
    border-color: color-mix(in srgb, var(--cart-accent) 85%, #000);
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--cart-accent);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--cart-accent-tint);
    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.55;

    color: var(--cart-accent);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

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

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  cart-discount-component {
    display: flex;
  }
/* END_SNIPPET:cart-discount */

/* START_SNIPPET:cart-drawer (INDEX:177) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

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

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

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

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

  .cart-drawer__dialog {
    overflow: hidden;
  }

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

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__summary {
    background-color: var(--color-background);
    position: sticky;
    bottom: 0;
    z-index: 1;
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-free-shipping (INDEX:178) */
.cart-free-shipping {
    display: flex;
    flex-direction: column;
    gap: 9px;
    /* Fallbacks so this works outside .cart-drawer (e.g. the /cart page
       summary), where --cart-drawer-padding* is not defined. */
    padding: var(--cart-drawer-padding, var(--padding-lg) var(--padding-xl));
    padding-block: var(--padding-sm);
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    background-color: var(--color-background);

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

  /* Inside the /cart page order-summary card: run flush to the card
     padding, no own background, and keep a single hairline under the bar
     as the divider before DISCOUNT / totals. */
  .cart__summary-inner .cart-free-shipping {
    width: 100%;
    padding: 0 0 var(--padding-md);
    background: transparent;
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  .cart-free-shipping__msg {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
    margin: 0;
    font-size: var(--cart-font-size--sm);
    line-height: 1.3;
    letter-spacing: 0.005em;
    color: var(--color-foreground);
  }

  .cart-free-shipping__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--cart-accent);
  }

  .cart-free-shipping__icon svg {
    width: 100%;
    height: 100%;
  }

  .cart-free-shipping__text strong {
    font-weight: 700;
    color: var(--cart-accent);
  }

  /* Track is relatively positioned but NOT clipped, so the rider can
     overflow its slim height. The fill clips its own shimmer instead. */
  .cart-free-shipping__track {
    position: relative;
    width: 100%;
    height: 6px;
    margin-block: 3px;
    border-radius: 999px;
    background: var(--cart-accent-tint);
  }

  .cart-free-shipping__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--cfs-pct, 0%);
    min-width: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(
      90deg,
      var(--cart-accent),
      color-mix(in srgb, var(--cart-accent) 55%, #fff)
    );
    transition: width var(--animation-speed-slow) var(--animation-easing);
  }

  .cart-free-shipping__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      transparent 25%,
      rgb(255 255 255 / 0.3) 50%,
      transparent 75%
    );
    transform: translateX(-100%);
    animation: cfsShimmer 2.2s var(--animation-easing) infinite;
  }

  .cart-free-shipping__rider {
    position: absolute;
    top: 50%;
    left: clamp(11px, var(--cfs-pct, 0%), calc(100% - 11px));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-background);
    border: 1.5px solid var(--cart-accent);
    box-shadow: 0 1px 4px rgb(var(--color-shadow-rgb, 0 0 0) / 0.22);
    color: var(--cart-accent);
    transform: translate(-50%, -50%);
    transition: left var(--animation-speed-slow) var(--animation-easing);
  }

  .cart-free-shipping__rider svg {
    width: 12px;
    height: 12px;
  }

  /* Unlocked — message collapses to a celebratory maroon-tint pill. */
  .cart-free-shipping--unlocked .cart-free-shipping__msg {
    position: relative;
    overflow: hidden;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--cart-accent-tint);
    color: var(--cart-accent);
    font-weight: 600;
  }

  .cart-free-shipping--unlocked .cart-free-shipping__text strong {
    font-weight: 700;
  }

  .cart-free-shipping--unlocked .cart-free-shipping__icon {
    color: var(--cart-accent);
    animation: cfsPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .cart-free-shipping--unlocked .cart-free-shipping__msg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      transparent 30%,
      rgb(255 255 255 / 0.5) 50%,
      transparent 70%
    );
    transform: translateX(-120%);
    animation: cfsShine 1.1s var(--animation-easing) 1;
  }

  @keyframes cfsShimmer {
    0% {
      transform: translateX(-100%);
    }

    60%,
    100% {
      transform: translateX(320%);
    }
  }

  @keyframes cfsPop {
    0% {
      transform: scale(0);
    }

    60% {
      transform: scale(1.15);
    }

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

  @keyframes cfsShine {
    0% {
      transform: translateX(-120%);
    }

    100% {
      transform: translateX(220%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-free-shipping__fill::after,
    .cart-free-shipping--unlocked .cart-free-shipping__msg::after {
      display: none;
    }

    .cart-free-shipping--unlocked .cart-free-shipping__icon {
      animation: none;
    }

    .cart-free-shipping__fill,
    .cart-free-shipping__rider {
      transition: none;
    }
  }
/* END_SNIPPET:cart-free-shipping */

/* START_SNIPPET:cart-icon-component (INDEX:179) */
cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }
/* END_SNIPPET:cart-icon-component */

/* START_SNIPPET:cart-products (INDEX:181) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

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

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

  .cart-items__table {
    width: 100%;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 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-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 {
    view-transition-name: none !important;
  }

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__title {
    font-size: var(--cart-font-size--md);
    font-weight: 600;
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
  }

  .cart-items__variant {
    display: inline-block;
  }

  /* Per-item price (final + struck compare-at). `.compare-at-price` is
     already dimmed + struck globally in assets/base.css. */
  .cart-items__unit-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--gap-2xs);
    margin-block-start: var(--margin-2xs);
    font-weight: 600;
    color: var(--color-foreground);
  }

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

  /* Match the product page's quantity stepper (blocks/quantity.liquid):
     a pill shell with a translucent maroon fill and circular
     maroon-outline +/- buttons that invert on hover. Scoped one level
     deeper than assets/base.css's plain-rectangle `.quantity-selector`
     default (and than the cart's own earlier rule) so it wins on
     specificity regardless of stylesheet order. */
  .cart-items__quantity .quantity-selector,
  .cart-drawer .cart-items__quantity .quantity-selector,
  .cart-items__quantity .quantity-selector:hover,
  .cart-drawer .cart-items__quantity .quantity-selector:hover {
    display: inline-flex;
    flex: none;
    width: fit-content;
    align-self: flex-start;
    height: 40px;
    padding: 0 5px;
    border: none;
    border-radius: 999px;
    background: var(--cart-accent-tint);
    font-size: var(--cart-font-size--sm);
  }

  .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--cart-accent);
    background: var(--color-background);
    color: var(--cart-accent);
  }

  .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus) svg {
    width: 12px;
    height: 12px;
  }

  .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus):hover {
    background: var(--cart-accent);
    color: var(--cart-accent-contrast);
  }

  .cart-items__quantity .quantity-selector :is(.quantity-minus, .quantity-plus)[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .cart-items__quantity .quantity-selector input[type='number'] {
    width: 1.8em;
    font-size: var(--cart-font-size--sm);
    font-weight: 600;
    background: transparent;
  }

  .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;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover {
    color: var(--cart-accent);
  }

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

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

  .cart-items__price-unit {
    font-size: var(--cart-font-size--xs);
  }

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

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

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

  .cart-items__empty-button:hover {
    --button-background-color: color-mix(in srgb, var(--cart-accent) 85%, #000);
    --button-color: var(--cart-accent-contrast);
    --button-border-color: color-mix(in srgb, var(--cart-accent) 85%, #000);
  }

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

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

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

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

  @container cart-items (min-width: 720px) {
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

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

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

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

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

    /* Cart PAGE only (`.cart-page__items` wrapper; the drawer has no such
       ancestor). Full-width rows: bigger image, the details block grows,
       and the stepper + line total sit together as a vertically-centred
       cluster on the right — no stepper stranded in a dead `1fr` column. */
    .cart-page__items .cart-items__table-row {
      grid-template-columns: 112px minmax(0, 1fr) auto minmax(5.5rem, auto);
      grid-template-areas:
        'media details quantity price'
        'media details error    error';
      column-gap: clamp(var(--gap-md), 2.5vw, var(--gap-2xl));
      align-items: center;
    }

    .cart-page__items .cart-items__details {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .cart-page__items .cart-items__quantity {
      grid-area: quantity;
      margin: 0;
      align-self: center;
      justify-content: flex-end;
    }

    .cart-page__items .cart-items__price {
      grid-area: price;
      align-self: center;
    }

    .cart-page__items .cart-items__error {
      grid-area: error;
    }
  }

  /* ---- Cart PAGE list polish (applies at every width) ---- */
  .cart-page__items .cart-items {
    width: 100%;
    max-width: none;
  }

  .cart-page__items .cart-items__media-image {
    border-radius: var(--style-border-radius-md, 0.5rem);
  }

  .cart-page__items .cart-items__title {
    line-height: var(--line-height--body-tight, 1.2);
  }

  .cart-page__items .cart-items__unit-price {
    font-size: var(--cart-font-size--sm);
  }

  /* Roomier rows + a full-width divider that follows the row box. */
  .cart-page__items .cart-items--dividers .cart-items__table-row {
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-xl);
    border-bottom-color: rgb(var(--color-foreground-rgb) / 0.1);
  }

  .cart-page__items .cart-items__remove {
    width: 2rem;
    height: 2rem;
  }

  .cart-page__items .cart-items__remove svg {
    width: 1.15rem;
    height: 1.15rem;
  }

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

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

    &:has(.cart__installments) {
      row-gap: var(--gap-xs);
    }
  }

  .cart__original-total-container:empty {
    display: none;
  }

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

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

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

  .cart__original-total-container,
  .cart__original-total-container * {
    font-size: var(--cart-font-size--sm);
  }

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

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

  .cart__total-value {
    font-size: var(--cart-font-size--2xl);
    font-weight: 700;
  }

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

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

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

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

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  /* Maroon checkout button — both the cart drawer and the /cart page.
     Overrides the shared --button-* custom props so hover/focus states
     follow too. `.cart__ctas` only ever renders in a cart context. */
  .cart__ctas .cart__checkout-button {
    --button-background-color: var(--cart-accent);
    --button-color: var(--cart-accent-contrast);
    --button-border-color: var(--cart-accent);
  }

  .cart__ctas .cart__checkout-button:hover {
    --button-background-color: color-mix(in srgb, var(--cart-accent) 85%, #000);
    --button-color: var(--cart-accent-contrast);
    --button-border-color: color-mix(in srgb, var(--cart-accent) 85%, #000);
  }

  /* "View cart" secondary link — drawer only. Maroon outline that fills on
     hover; matches the checkout button's size so the two stack evenly. */
  .cart__ctas .cart__view-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
    text-decoration: none;
    --button-background-color: transparent;
    --button-color: var(--cart-accent);
    --button-border-color: var(--cart-accent);
  }

  .cart__ctas .cart__view-cart-button:hover {
    --button-background-color: var(--cart-accent-tint);
    --button-color: var(--cart-accent);
    --button-border-color: var(--cart-accent);
  }

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

  .cart-note {
    width: 100%;
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--sm);
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--cart-font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-note .svg-wrapper {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
    margin: 0;
  }

  .cart-note .icon-plus {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
  }

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

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

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

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

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

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

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

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

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:182) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    border-block: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    padding-block: var(--padding-sm);
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
  }

  .cart__total-container .cart__savings {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-sm);
    color: var(--cart-accent);
    font-weight: 600;
    font-size: var(--cart-font-size--sm);
  }

  .cart__total-container .cart__savings .cart__savings-value {
    white-space: nowrap;
  }

  .cart__summary-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart__installments {
    color: var(--color-foreground);
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:186) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    /* A real fill (not just the shared page background showing through)
       so the rounded corners + shadow below actually read as a distinct
       card, instead of a barely-visible seam between the product photo's
       own light studio backdrop and the similarly light page background. */
    background: #ffffff;
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.1), 0 2px 6px rgb(0 0 0 / 0.06);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    gap: var(--collection-card-gap);
    display: flex;
    flex-direction: column;
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    z-index: var(--layer-flat);
    pointer-events: none;

    a,
    button {
      /* only allow interactive elements to be clickable separate from .collection-card__link */
      pointer-events: auto;
    }
  }

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

  .collection-card__content {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--collection-card-gap);
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment);
  }

  /* Breathing room below the image for the title (placement: below_image)
     now that the card has its own background — without this the title
     sits flush against the card's bottom edge. Skipped for placement:
     on_image, which already pads itself (see the --image-bg rule above). */
  .collection-card:not(.collection-card--image-bg) .collection-card__content {
    padding: 0 var(--padding-md, 16px) var(--padding-md, 16px);
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }

    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:contact-form (INDEX:188) */
.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);
    /* Keep contact fields visibly rounded regardless of the theme's input radius setting */
    border-radius: max(var(--style-border-radius-inputs), var(--style-border-radius-sm));
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_SNIPPET:contact-form */

/* START_SNIPPET:divider (INDEX:189) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-collection-grid (INDEX:192) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:193) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:eyebrow (INDEX:194) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-accent--family, var(--font-body--family));
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--letter-spacing-md, 0.13em);
    text-transform: uppercase;
    color: var(--color, var(--color-primary));
  }

  .eyebrow__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
  }

  .eyebrow--pill {
    padding: 0.4em 0.9em;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--color, var(--color-primary)) 12%, transparent);
  }
/* END_SNIPPET:eyebrow */

/* START_SNIPPET:facets-actions (INDEX:195) */
/* Facets - Actions */
  .facets__actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    order: 1;
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    background-image: var(--to-top-gradient-background);
    z-index: var(--facets-sticky-z-index);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
  }

  .facets:not(.facets--drawer) .facets__actions {
    @media screen and (min-width: 750px) {
      position: static;
    }
  }

  .facets--vertical .facets__actions {
    padding-inline: 0;
    justify-content: center;
  }

  .facets--horizontal .facets__actions {
    @media screen and (min-width: 750px) {
      order: 0;
      bottom: auto;
      position: static;
      padding: 0;
      z-index: var(--layer-flat);
      flex-shrink: 0;
      align-items: center;
      margin-top: initial;
      background-image: none;
    }
  }

  .facets--horizontal .facets__actions--active::before {
    @media screen and (min-width: 750px) {
      content: '';
      border-inline-start: var(--style-border-width) solid var(--color-border);
      height: var(--font-paragraph--size);
      position: absolute;
    }
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .clear-filter:hover {
    text-decoration: underline;
    background-color: transparent;
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    transition: transform var(--animation-values), opacity var(--animation-values);
    opacity: 0;
    transform: translateY(100%);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__clear-all {
    box-shadow: none;
  }

  .facets--horizontal .facets__clear-all {
    @media screen and (min-width: 750px) {
      --facets-clear-all-min-width: var(--minimum-touch-target);
      --button-color: var(--color-primary);

      text-decoration: underline transparent 0.075em;
      text-underline-offset: 0.125em;
      width: auto;
      transform: none;
      opacity: 1;
      height: var(--minimum-touch-target);
      align-items: center;
      flex-grow: 0;
      transition: text-decoration-color var(--animation-speed) var(--animation-easing);
    }
  }

  .facets--horizontal .facets__clear-all:hover {
    @media screen and (min-width: 750px) {
      --button-color: var(--color-primary-hover);
    }
  }

  @starting-style {
    .facets__clear-all {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .facets__clear-all.active {
    transform: translateY(0);
    opacity: 1;
    display: grid;
  }

  .facets--horizontal .facets__clear-all.active {
    @media screen and (min-width: 750px) {
      padding-block: 0;
      padding-inline: var(--facets-form-horizontal-gap);
      background-color: transparent;
      position: static;
      transform: none;
    }
  }

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

    .facets--horizontal .facets__clear-all.active {
      @media screen and (min-width: 750px) {
        opacity: 1;
        transform: none;
      }
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__see-results {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:facets-actions */

/* START_SNIPPET:filter-remove-buttons (INDEX:196) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

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

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;

    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets__clear-all-link {
    --button-color: var(--color-primary);

    border: none;
    background-color: transparent;
    padding: var(--padding-xs);
    min-width: fit-content;
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    color: var(--button-color);
    text-decoration-color: var(--button-color);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form (INDEX:200) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

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

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

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

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

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

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

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

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

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

  .gift-card-form-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

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

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

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

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

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

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

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

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease;
    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 */

/* START_SNIPPET:grid-density-controls (INDEX:201) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

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

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:202) */
.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:203) */
.cart-drawer {
    --cart-drawer-padding: var(--padding-lg) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--2xl: var(--font-size--2xl);
  }

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

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

  .cart-drawer__inner {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    margin-bottom: var(--gap-xl);
  }

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

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

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

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

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

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

  header-actions {
    display: flex;

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

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

  .header-actions__action {
    --button-color: var(--color-foreground);

    cursor: pointer;
    display: flex;
    justify-content: center;
  }

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

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

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

    position: relative;
  }

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

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

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

  .cart-drawer__heading .cart-bubble__background {
    background-color: var(--cart-accent);
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--cart-accent-contrast);
    font-size: var(--font-size--xs);
  }

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

  .cart-bubble--animating .cart-bubble__text {
    animation: cartBubbleSlideIn var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:204) */
.header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 750px) {
    .header--desktop header-menu + .header__drawer header-drawer {
      display: none;
    }
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;

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

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

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not([open]) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details[open] .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details[open] .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  .menu-drawer:has(details[open]) {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
    will-change: transform;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline-start: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * 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-start: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
    text-align: center;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--color-border);
  }

  /* 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: center;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
    text-align: center;
  }

  .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;
    padding: var(--padding-lg);
    will-change: transform;
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:210) */
.jumbo-text__container {
    width: 100%;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    white-space: pre;
    width: 100%;
    will-change: font-size;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
  }

  jumbo-text[data-cap-text='true'] {
    text-box-edge: cap text;
  }

  .jumbo-text-space {
    display: inline-flex;
    width: 0.5ch;
  }

  :is(.jumbo-text-char, .jumbo-text-line) {
    display: inline-flex;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    [data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'],
    .ready[data-text-effect='reveal'] .jumbo-text-line {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-char {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-char {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'],
    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:213) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-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;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;

    &.variant-option--swatches-disabled,
    &:has(input:disabled) {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;

    .variant-option--swatches-disabled &,
    .variant-option--swatches:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .variant-option--images {
    position: relative;
  }

  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover:not(:has(input:disabled)),
    &:has(input:checked) {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    &:has(input:disabled),
    &:has(input:disabled):hover {
      --image-facet-border-opacity: 0;

      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      img {
        opacity: var(--disabled-opacity);
      }

      input,
      label,
      .facets__image-label {
        cursor: not-allowed;
      }

      .facets__image-wrapper {
        border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
        border-radius: var(--image-facet-border-radius);
      }
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;

    .variant-option--images:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-list--swatches .variant-option__button-label:hover:not(:has(input:disabled)) {
    font-weight: 500;
  }

  .variant-option--images:not(:has(input:disabled)) .facets__image-label:hover {
    font-weight: 500;
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:214) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

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

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

  .drawer-localization__button .icon-flag,
  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
    color: var(--color-foreground);
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }
  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector,
  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .header__column .localization-form__select {
    background-color: var(--header-bg-color);
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:215) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:221) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:predictive-search-products-list (INDEX:223) */
.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.5;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:224) */
.predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-resource-carousel */

/* START_SNIPPET:predictive-search (INDEX:225) */
predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    border-color: var(--color-border) !important;
  }

  .predictive-search-results__inner {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);
    --list-item-padding-block: var(--padding-sm);

    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    background: transparent;
    color: var(--color-foreground);
    opacity: 1;
    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 (max-width: 749px) {
      margin-right: var(--margin-md);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__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);
    }

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:predictive-search */

/* START_SNIPPET:price-filter (INDEX:226) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  /* Price filter - Range slider */
  .price-facet__slider {
    position: relative;
    height: 20px;
    /* No horizontal inset: the track spans the exact same width as the Rs
       inputs below it, so the thumbs' centers line up with those inputs'
       left/right edges instead of sitting inset from them. */
    margin: var(--padding-xs) 0 var(--padding-sm);
    touch-action: none;
  }

  .price-facet__slider-track,
  .price-facet__slider-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    border-radius: 999px;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .price-facet__slider-track {
    left: 0;
    right: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity, 10%));
  }

  .price-facet__slider-fill {
    left: calc(
      (var(--price-range-low) - var(--price-range-min)) / (var(--price-range-max) - var(--price-range-min)) * 100%
    );
    right: calc(
      100% - (var(--price-range-high) - var(--price-range-min)) / (var(--price-range-max) - var(--price-range-min)) *
        100%
    );
    background-color: var(--color-foreground);
  }

  /* Draggable handles: plain divs (not native range inputs) positioned with the
     same left-edge formula as the fill bar above, so they always sit exactly on
     the fill's edges. All dragging is handled in JS via pointer capture — this
     avoids the native-range quirks (click-anywhere-jumps-the-value, ambiguous
     hit-testing when two overlapping inputs are involved, touch/trackpad drags
     being interpreted as page scrolls) that a pair of overlapping
     `input[type=range]` elements run into. */
  .price-facet__slider-handle {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--style-border-width) rgb(var(--color-foreground-rgb) / var(--opacity-30, 30%));
    cursor: grab;
    touch-action: none;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    z-index: 1;
  }

  .price-facet__slider-handle--min {
    left: calc(
      (var(--price-range-low) - var(--price-range-min)) / (var(--price-range-max) - var(--price-range-min)) * 100%
    );
    transform: translate(-50%, -50%);
  }

  .price-facet__slider-handle--max {
    left: calc(
      (var(--price-range-high) - var(--price-range-min)) / (var(--price-range-max) - var(--price-range-min)) * 100%
    );
    transform: translate(-50%, -50%);
  }

  .price-facet__slider-handle--active {
    cursor: grabbing;
    z-index: 2;
  }

  .price-facet__slider-handle:hover,
  .price-facet__slider-handle:focus-visible,
  .price-facet__slider-handle--active {
    box-shadow:
      0 0 0 var(--style-border-width) rgb(var(--color-foreground-rgb) / 100%),
      var(--shadow-popover, 0 1px 4px rgb(0 0 0 / 20%));
  }

  .price-facet__slider-handle:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-wrapper.price-facet__inputs-wrapper {
    flex-wrap: nowrap;
  }

  .price-facet__field {
    width: 50%;
    flex-grow: 0;
  }

  @container (max-width: 199px) {
    .facets__inputs-wrapper.price-facet__inputs-wrapper {
      flex-wrap: wrap;
      width: 100%;
    }

    .price-facet__inputs-wrapper .price-facet__field {
      width: 100%;
    }
  }

  .facets .facets__inputs-wrapper.price-facet__inputs-wrapper {
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  .facets--horizontal .facets__panel-content:has(.price-facet) {
    min-width: 360px;
  }

  .facets--horizontal .facets__inputs-wrapper.price-facet__inputs-wrapper {
    @media screen and (min-width: 750px) {
      padding: calc(var(--padding-md) + var(--style-border-width-inputs));
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .facets--horizontal .price-facet__highest-price {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .field__label.price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:price (INDEX:227) */
.price-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 2px;
    max-width: 100%;
  }
  .price {
    color: var(--price-color, inherit);
    font-weight: var(--sale-price-weight, 400);
    white-space: nowrap;
  }
  .compare-at-price {
    text-decoration: var(--compare-price-decoration, line-through);
    opacity: 0.6;
    margin-left: var(--price-gap, 6px);
    font-weight: 400;
    font-size: var(--compare-price-size, calc(1em - 1px));
    white-space: nowrap;
  }
  .compare-at-price.has-custom-compare-color {
    color: var(--compare-price-color);
    opacity: 1;
  }
  .discount-percent {
    color: var(--discount-color, var(--color-primary));
    font-weight: 600;
    margin-left: calc(var(--price-gap, 6px) + 2px);
    font-size: 12px;
    white-space: nowrap;
  }
  .discount-percent--chip {
    background: color-mix(in srgb, var(--discount-color, var(--color-primary)) 12%, white);
    padding: 2px 7px;
    border-radius: 5px;
  }
/* END_SNIPPET:price */

/* START_SNIPPET:product-card-badges (INDEX:228) */
.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(--badge-text-color, var(--color-foreground));
    background: var(--badge-background-color, 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);
  }

  .product-badges__badge--sale {
    background: var(--badge-background-color, var(--badge-sale-background-color, brown));
    color: var(--badge-text-color, var(--badge-sale-text-color, white));
  }
/* END_SNIPPET:product-card-badges */

/* START_SNIPPET:product-card-flavor (INDEX:229) */
/* <product-card> itself is a transparent, unrounded shell — its only job
     is a proportional top gap that reserves room for the image to overflow
     above .flavor-card__body (the actual visible card surface, below). No
     overflow:hidden here on purpose, so the image is free to stick out past
     the card's own top edge. width:100% (never a fixed px) so this card is
     fully fluid — the hosting grid cell or carousel slide controls the
     actual rendered width.

     container-type:inline-size makes THIS element the containment context
     for cqi units used on its DESCENDANTS — --flavor-outer-gap,
     --flavor-inner-clearance below, and everything derived from them — so
     they all scale with this one card's own rendered width instead of the
     whole grid row/carousel track's width. Per the CSS containment spec, an
     element is never the query container for its OWN property values (cqi
     used directly on this element would resolve against the nearest
     ANCESTOR container instead — .product-grid's wrapper or
     .resource-list__carousel, both sized to the full row/track, not one
     card). That's why these live as custom properties consumed by
     descendants below, instead of properties set here directly. */
  .flavor-card {
    /* The two pieces of the photo's reserved clearance — outer: the
       transparent gap above .flavor-card__body; inner: .flavor-card__link's
       own top padding, clearing the title within the body. Both also drive
       .flavor-card__image-frame's height below, so the photo is capped to
       exactly this much space (see that rule) and can never reach far enough
       to overlap the title, whatever a given product photo's aspect ratio is.

       --flavor-inner-clearance used to be one guessed clamp() shared by
       every product, which could only ever be right for one photo shape at
       a time — too tight and taller photos (e.g. a QuickSip can) got capped
       small, too generous and shorter/wider photos left dead space above
       the title. Deriving it from --flavor-image-ratio (this card's own
       photo, set inline above from card_image.aspect_ratio — width ÷
       height) fixes that part per product: 100cqi is this card's own
       rendered width, so dividing by the ratio gives exactly the height
       that photo's own FILE renders at when shown at full card width.

       --flavor-image-fill then compensates for something aspect_ratio can't
       see: card_transparent_image cutouts (or a plain product photo, when a
       product has no cutout set) almost always have some transparent/empty
       margin baked into the file itself around the actual product, so even
       an exact file-ratio box still shows a gap below the visible product
       before the title. This uniformly scales the whole reserved height (and
       so the whole photo, padding included) down by that fraction — 1
       disables it (exact file ratio, original padding visible); lower
       shrinks the photo but pulls the visible product closer to the title.
       It's a global compensation for typical baked-in padding, not a
       per-product fix — a product whose cutout is already trimmed tight to
       the product will end up smaller than it needs to; the real fix for
       that one is re-exporting its image with the margin trimmed off. */
    --flavor-outer-gap: clamp(60px, 10cqi, 61px);
    --flavor-image-fill: 0.8;
    --flavor-inner-clearance: clamp(90px, calc(100cqi / var(--flavor-image-ratio, 1) * var(--flavor-image-fill, 1)), 340px);

    /* Two-tone default pair, used only when a card has neither a metafield
       color nor a theme "Fallback ... color" setting configured (those
       Liquid fallback chains are skipped entirely rather than resolving to
       a fixed hex, specifically so these CSS-level defaults can take
       over). Matches the reference card (Spice category homepage,
       "Chatpatta Seasoning"): the darker shade sits behind
       (--flavor-card-shape-back, .flavor-card__art), the lighter shade is
       the wave/blob in front (--flavor-card-shape-front, .flavor-card__blob).
       The inline --flavor-card-shape-back/-front custom properties (set
       per-card above when a color IS configured) always win over these. */
    --flavor-card-shape-back-default: #f2b3af;
    --flavor-card-shape-front-default: #fce7e6;

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: transparent;
    container-type: inline-size;
    text-align: center;
    transition: transform var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out),
      box-shadow var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
  }

  /* Gated to fine pointers + no reduced-motion preference, matching the
     theme's own card hover effects (assets/base.css
     .card-hover-effect-lift/-scale), so touch devices and reduced-motion
     users don't get a stuck transform. This is the only hover transform on
     the card — "Hover animation: None" means no rule matches, so the card
     stays still on hover. */
  @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
    .flavor-card--hover-lift:hover {
      transform: translateY(calc(-1 * var(--hover-lift-amount, 4px)));
    }

    /* Pure scale, no vertical movement — combining scale with translateY
       was making the card visually collide with/get covered by its
       neighbors in the grid on hover (scaling creates a new stacking
       context, so a taller/moved card can end up painted under a
       still-static sibling later in DOM order). z-index below lifts the
       hovered card above its row so the zoom itself is never clipped or
       covered either. */
    .flavor-card--hover-scale:hover {
      z-index: 2;
      transform: scale(var(--flavor-card-zoom-amount, 1.05));
      transition: transform var(--flavor-card-zoom-duration, 0.45s) var(--flavor-card-zoom-timing, ease-out),
        box-shadow var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
    }
  }

  /* Product photo: capped to exactly the reserved clearance height (outer
     gap + inner .flavor-card__link padding — see --flavor-outer-gap and
     --flavor-inner-clearance above), not the card's full height. Anchored
     to the BOTTOM of that box, flush with .flavor-card__link's own top edge
     — i.e. exactly where the title starts. Because object-fit:contain never
     renders content taller than its own box, the photo can physically never
     reach the title regardless of its aspect ratio: a tall photo (e.g. a
     QuickSip can) fills the box almost edge to edge and pokes up near the
     card's own top; a shorter/wider one floats lower, closer to the title,
     with empty space above it inside the box. No per-product or per-context
     tuning needed, and nothing is ever pushed past the card's own top edge
     (unlike an earlier version of this that used a negative
     object-position/transform nudge — that either clipped the photo's own
     top against its box, or got clipped by an ancestor carousel/grid row
     that has no spare room above a card to safely overflow into). Positioned
     absolute so it takes no space in the flex column itself, and
     pointer-events:none so it never blocks clicks meant for the "Add to
     cart" button sitting underneath it. --flavor-image-scale (a CSS custom
     property, from the "Image scale" setting) lets merchants size the
     floating photo up/down within this same box. */
  .flavor-card__image-frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: calc(var(--flavor-outer-gap) + var(--flavor-inner-clearance));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }

  .flavor-card__image {
    width: calc(100% * var(--flavor-image-scale, 1));
    height: calc(100% * var(--flavor-image-scale, 1));
    object-fit: contain;
    object-position: center bottom;
    border-radius: 0;
    filter: drop-shadow(0 10px 20px rgb(0 0 0 / 0.22));
  }

  /* The actual visible card: corner radius and the optional border (from
     the "Flavor card — shape" settings, via border-override above) both
     live here — not on <product-card> itself — so the image above can
     overflow out of the card cleanly instead of being clipped or ringed by
     its own edge. No background-color of its own — .flavor-card__art
     (below) is an inset:0 layer that always fully covers this box, so this
     box's own background would never actually be visible; the art layer's
     color is the card's real background. */
  .flavor-card__body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-block-start: var(--flavor-outer-gap);
    border-width: var(--border-width);
    border-style: var(--border-style);
    border-color: var(--border-color);
    border-radius: var(--border-radius, 24px);
    overflow: hidden;
  }

  /* Title clearance, kept deliberately SMALLER than --flavor-inner-clearance
     (which still drives .flavor-card__image-frame's height above, full size,
     untouched by this) — --flavor-title-lift pulls the title up into the
     lower portion of that frame instead of clearing all of it. That's safe
     precisely because of the baked-in file padding --flavor-image-fill above
     already told us is there: the photo's own visible pixels stop well
     before the frame's bottom edge, so this gap is mostly transparent
     already — z-index 3 (image) above z-index 1 (this link) means even
     where the boxes now overlap, nothing opaque paints over the title. Only
     risk: a product whose cutout has little/no bottom padding could end up
     with its title genuinely under the visible photo — if that happens for
     a specific product, it's that image that needs re-cropping, not this
     number. */
  .flavor-card__link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    --flavor-title-lift: 0.7;
    padding-block-start: calc(var(--flavor-inner-clearance) * var(--flavor-title-lift, 1));
    color: inherit;
    text-decoration: none;
  }

  /* Collection grid + search results (both share this .product-grid wrapper
     from snippets/product-grid.liquid) + related/recommended products on the
     product page (sections/product-recommendations.liquid, wrapped in
     <product-recommendations>) — kept in sync with each other on purpose so
     "related products" matches the collection grid it's meant to feel like a
     continuation of. 20px more title clearance than the homepage slider, on
     top of the same per-product image-derived value above. Image size/frame
     height is untouched; this only pushes the title down a bit further on
     these pages. */
  .product-grid .flavor-card__link,
  product-recommendations .flavor-card__link {
    padding-block-start: calc(var(--flavor-inner-clearance) * var(--flavor-title-lift, 1) + 20px);
  }

  /* Mobile only, same pages as above — desktop's +20px was confirmed good,
     this adds another 16px on top of it (20px + 16px = 36px total extra)
     below the theme's 750px breakpoint. Same selectors as above, placed
     after them so this wins the cascade under this media query without
     needing extra specificity. */
  @media screen and (max-width: 749px) {
    .product-grid .flavor-card__link,
    product-recommendations .flavor-card__link {
      padding-block-start: calc(var(--flavor-inner-clearance) * var(--flavor-title-lift, 1) + 36px);
    }
  }

  .flavor-card__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--flavor-card-shape-back, var(--flavor-card-shape-back-default));
  }

  .flavor-card__blob {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    display: block;
    line-height: 0;
    color: var(--flavor-card-shape-front, var(--flavor-card-shape-front-default));
  }

  .flavor-card__blob svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .flavor-card__title {
    margin-block-start: var(--margin-md, 20px);
    padding-inline: var(--padding-md, 16px);
    font-family: var(--flavor-title-font, inherit);
    font-size: var(--flavor-title-size, inherit);
    font-weight: var(--flavor-title-weight, 700);
    color: var(--flavor-card-title-color);
  }

  /* Single-line clamp instead of white-space:nowrap + text-overflow:ellipsis
     — this text is centered (inherited from .flavor-card), and centered
     nowrap content that overflows its box clips symmetrically from both
     edges with no ellipsis marker on the start side, not just the end.
     -webkit-line-clamp (broadly supported, not just WebKit today) clips at
     the true end of the line correctly regardless of text-align. Kept as a
     safety net — the description is trimmed to ~6 words in Liquid, so this
     should rarely need to actually clip anything. */
  .flavor-card__subtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-block-start: var(--margin-3xs, 4px);
    padding-inline: var(--padding-lg, 20px);
    font-family: var(--flavor-desc-font, inherit);
    font-size: var(--flavor-desc-size, 0.85em);
    color: var(--flavor-desc-color, currentColor);
    opacity: var(--opacity-70, 0.7);
  }

  .flavor-card__price {
    position: relative;
    z-index: 1;
    margin-block-start: var(--margin-xs, 10px);
    font-size: var(--flavor-price-size, inherit);
    color: var(--flavor-card-price-color);
  }

  .flavor-card__price .price {
    font-weight: 700;
    font-size: 1.03em;
  }

  .flavor-card__cta {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-block-start: auto;
    padding: var(--padding-md, 16px) var(--padding-lg, 20px) var(--padding-lg, 20px);
  }

  .flavor-card__cta product-form-component,
  .flavor-card__cta .shopify-product-form,
  .flavor-card__cta form {
    display: block;
    width: 100%;
  }

  .flavor-card__button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--flavor-button-bg, var(--color-background));
    color: var(--flavor-button-text, var(--color-foreground));
    --button-border-color: var(--flavor-button-border-color, var(--color-primary));
    border-radius: var(--flavor-button-radius, 12px);
    height: var(--flavor-button-height, 40px);
    font-size: var(--flavor-button-font-size, 0.875rem);
  }

  .flavor-card__button:hover {
    background-color: var(--flavor-button-hover-bg, var(--flavor-button-bg, var(--color-background)));
    color: var(--flavor-button-hover-text, var(--flavor-button-text, var(--color-foreground)));
    --button-border-color: var(--flavor-button-border-color, var(--color-primary));
  }

  .flavor-card__button--choose {
    text-decoration: none;
  }
/* END_SNIPPET:product-card-flavor */

/* START_SNIPPET:product-card (INDEX:231) */
product-card-link,
  :not(product-card-link) product-card {
    width: 100%;
  }

  .product-card__content--shadow {
    box-shadow: var(--shadow-card, 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06));
  }

  .product-card__content--hover-shadow {
    transition: box-shadow var(--animation-speed, 200ms) var(--animation-easing, ease);
  }

  .product-card__content--hover-shadow:hover {
    box-shadow: var(--shadow-card-hover, 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05));
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }

  /* Hide the variant swatches for product cards that show a swatches variant picker */
  :is(.product-card):has(swatches-variant-picker-component) .quick-add .variant-option--swatches {
    display: none;
  }

  /* Hide "Add" button for single option product cards that show a swatches variant picker */
  :is(.product-card:not([data-no-swatch-selected])):has(.quick-add__product-form-component--single-option):has(
      swatches-variant-picker-component
    )
    .quick-add__button--choose {
    display: none;
  }

  /* Hide "Add" button for single option product cards that show a swatches variant picker */
  :is(.product-card[data-no-swatch-selected]):has(.quick-add__product-form-component--single-option):has(
      swatches-variant-picker-component
    )
    add-to-cart-component {
    display: none;
  }

  /* Hide "add" button for multi-variant product cards that don't show a swatches variant picker */
  :is(.product-card):has(.quick-add__product-form-component--multi-variant):not(:has(swatches-variant-picker-component))
    .quick-add__button--add {
    display: none;
  }

  /* Hover effect for single variant product cards and product blocks */

  /* stylelint-disable selector-max-specificity */
  :is(.product-card):has(.quick-add__product-form-component--single-variant) .card-gallery:hover {
    & .quick-add__button--choose {
      display: none;
    }

    & .quick-add__button--add {
      display: grid;
    }
  }

  .product-card[data-no-swatch-selected] slideshow-component[data-generic-media-size='1'] slideshow-arrows {
    display: none;
  }

  .product-card[data-no-swatch-selected]
    slideshow-component[data-generic-media-size='1']
    slideshow-arrows:has(+ slideshow-slides slideshow-slide[variant-image]:not([hidden])) {
    display: flex;
  }

  .product-card .variant-option__swatch svg {
    display: none;
  }

  .product-card [data-available-count='0'] ~ svg {
    display: block;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:232) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-media (INDEX:233) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  ::view-transition-old(gallery-item),
  ::view-transition-new(gallery-item) {
    animation-duration: 0ms;
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quick-add-modal (INDEX:235) */
.quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    height: fit-content;
    overflow: hidden;
    min-height: 500px;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 750px) {
      position: fixed;
      display: block;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 750px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
  }

  .quick-add-modal__close:active {
    transform: scale(0.8);
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    max-width: var(--wide-content-width);
    overflow-y: auto;
    max-height: 100vh;

    @media screen and (max-width: 750px) {
      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: 750px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 750px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .variant-picker__form {
    display: block;
  }

  .quick-add-modal__content .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 750px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      overflow-y: auto;
      max-height: 100%;
      height: 100%;
    }
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }

  .quick-add-modal__content .product-details .variant-picker {
    --product-swatches-padding-block-end: 0px;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    padding: 0;
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
  }

  .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) {
      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: min(var(--gap-2xl), var(--gap));
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }

    .quick-add-modal__content .media-gallery--grid .product-media-container:first-child {
      border-top-right-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media-container:last-child {
      border-bottom-right-radius: var(--style-border-radius-popover, 0);
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding: var(--padding-2xl);
    max-height: 100%;
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .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: 750px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media slideshow-controls {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:236) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-top: calc(var(--quick-add-offset) + var(--padding-block-start));
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
    --quick-add-left: calc(var(--quick-add-offset) + var(--padding-inline-end));

    position: absolute;
    display: var(--quick-add-mobile-display, none);
    flex-direction: column;
    justify-content: flex-end;
    inset: max(var(--quick-add-top), calc((var(--border-radius) + var(--quick-add-top)) * (1 - cos(45deg))))
      max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))))
      max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))))
      max(var(--quick-add-left), calc((var(--border-radius) + var(--quick-add-left)) * (1 - cos(45deg))));
    width: auto;
    height: auto;
    z-index: var(--layer-raised);
    cursor: default;
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);

      display: var(--quick-add-display, flex);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: transparent;
  }

  .quick-add__button {
    display: grid;
    padding: var(--padding-xs);
    align-items: center;
    background-color: var(--color-background);
    color: var(--color-foreground);
    border-color: transparent;
    box-shadow: var(--shadow-popover);
    pointer-events: all;
    position: relative;
    overflow: hidden;
    border-radius: 100px;

    @media screen and (min-width: 750px) {
      display: none;
      padding: var(--padding-xs) var(--padding-sm);
    }

    .quick-add[stay-visible] & {
      display: grid;
    }
  }

  .quick-add__button .add-to-cart-text {
    gap: 0;
    line-height: 1;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    animation: none;

    @media screen and (min-width: 750px) {
      /* offset button padding to show a round button in a collapsed state */
      margin-inline: calc(var(--padding-sm) * -1);
      padding-inline: var(--padding-xs);
    }
  }

  .quick-add__button .add-to-cart-text--added {
    position: relative;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: end;
    line-height: 1;

    @media screen and (min-width: 750px) {
      width: 0;
    }
  }

  .quick-add__button .add-to-cart-text__content {
    width: 0;
    opacity: 0;
    transform: translateX(1em);
    transition: width var(--animation-speed) ease-in-out, opacity var(--animation-speed) ease-in-out,
      transform var(--animation-speed) ease-in-out;
    interpolate-size: allow-keywords;
    will-change: width, opacity, transform;
  }

  @container (min-width: 99px) {
    .quick-add[stay-visible] .add-to-cart-text,
    .quick-add__button:is(:focus, :hover) .add-to-cart-text {
      gap: var(--gap-2xs);

      @media screen and (min-width: 750px) {
        /* offset button padding to show a round button in a collapsed state */
        margin-inline: 0;
        padding-inline: 0;
      }
    }

    .quick-add[stay-visible] .add-to-cart-text__content,
    .quick-add__button:is(:focus, :hover) .add-to-cart-text__content {
      width: fit-content;
      opacity: 1;
      transform: translateX(0);
    }
  }

  .quick-add__button.atc-added .add-to-cart-text {
    opacity: 0;
  }

  .quick-add__button.atc-added .add-to-cart-text--added {
    opacity: 1;
    width: auto;

    @supports (width: calc-size(auto, size)) {
      width: calc-size(auto, size);
    }
  }

  .quick-add__button.atc-added .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button.atc-added .add-to-cart-text--added {
    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;
  }

  @keyframes atc-fade-in {
    from {
      opacity: 0;
      transform: translateX(1em);
      position: absolute;
    }

    to {
      opacity: 1;
      transform: translateX(0);
      position: inherit;
    }
  }

  @keyframes atc-fade-out {
    from {
      opacity: 1;
      transform: translateX(0);
      position: inherit;
    }

    to {
      opacity: 0;
      transform: translateX(-1em);
      position: absolute;
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:quick-checkout-button (INDEX:237) */
.quick-checkout-button {
    position: relative;
    background: var(--quick-checkout-bg, var(--color-button));
    color: var(--quick-checkout-text, var(--color-button-text));
    border-color: var(--quick-checkout-bg, var(--color-button));
  }

  .quick-checkout-button[aria-busy='true'] {
    pointer-events: none;
    opacity: 0.7;
  }
/* END_SNIPPET:quick-checkout-button */

/* START_SNIPPET:quicksip-addon-card (INDEX:238) */
.quicksip-addon-card {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--style-border-radius, 12px);
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  /* Applied once a card's quantity is above 0, so scrolling back up shows
     at a glance what's already in the order without reading every stepper. */
  .quicksip-addon-card.is-selected {
    border-color: #14205c;
    background: color-mix(in srgb, #14205c 4%, var(--color-background, white));
  }

  .quicksip-addon-card__media {
    flex: 0 0 auto;
    display: block;
    width: 92px;
    align-self: stretch;
    overflow: hidden;
    /* Only the media's own left corners are clipped/rounded to match the
       card's outer edge — the card itself is never `overflow: hidden`, so
       the action column (Add button / "Added" animation / stepper) is
       never at risk of being clipped as the row's height changes. */
    border-start-start-radius: var(--style-border-radius, 12px);
    border-end-start-radius: var(--style-border-radius, 12px);
    /* Matches the card's own background instead of a tinted gray, so any
       letterboxed space `contain` leaves around a product photo blends
       into the card rather than reading as a visible border/frame. */
    background: var(--color-background, #fff);
  }

  .quicksip-addon-card__image {
    display: block;
    width: 100%;
    height: 100%;
    /* `cover` was cropping tight into these portrait product photos (jars/
       bottles) inside the old, narrower box — the label ended up cut off
       and looking "zoomed in". `contain` shows the whole product instead,
       bleeding to the media box's own edges (no padding) so it still
       reads as filling the thumbnail, not floating inside a border. */
    object-fit: contain;
  }

  .quicksip-addon-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Padding lives here (and on __action below) instead of on the card
       itself, so only the content right of the image is inset. */
    padding: var(--padding-sm, 10px) 0 var(--padding-sm, 10px) 12px;
  }

  .quicksip-addon-card__title {
    font-family: var(--font-heading--family);
    font-weight: 700;
    font-size: var(--font-size--md, 1.05rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-foreground, inherit);
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .quicksip-addon-card__title:hover {
    text-decoration: underline;
  }

  .quicksip-addon-card__desc {
    margin: 0;
    font-size: var(--font-size--xs, 0.8rem);
    line-height: 1.4;
    /* A fixed, predictable muted color instead of `opacity` — opacity
       reveals whatever's behind the text (inconsistent once .is-selected
       tints the card's own background) and reads noticeably paler than
       intended at this font size. Matches the rgb(--color-foreground-rgb)
       pattern already used elsewhere in this file. */
    color: rgb(var(--color-foreground-rgb) / 0.7);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .quicksip-addon-card__price {
    font-size: var(--font-size--sm, 0.9rem);
    font-weight: 600;
  }

  .quicksip-addon-card__action {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: var(--padding-sm, 10px) var(--padding-sm, 10px) var(--padding-sm, 10px) 8px;
  }

  /* Flush against the card's own top border (like a tab attached to it),
     right-aligned over the Add+ button column — anchored to
     .quicksip-addon-card (position: relative, above) rather than
     .quicksip-addon-card__action, so it's positioned against the whole
     row, not just its action column. Square top corners (border-radius 0)
     keep that top edge flush/attached; only the bottom corners round off.
     Taken out of the __action flex flow entirely, so it no longer pushes
     the Add+ button down when present. */
  .quicksip-addon-card__badge {
    position: absolute;
    top: 0;
    right: var(--padding-md, 16px);
    z-index: 1;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 0 0 6px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
    /* Falls back to this neutral color only if [data-badge] is somehow
       unset — every actual badge_key value (named or auto-*) has its own
       rule below. */
    background: #374151;
    color: #fff;
  }

  .quicksip-addon-card__badge[data-badge='new-arrival'] {
    background: #2b3a8f;
    color: #fff;
  }

  .quicksip-addon-card__badge[data-badge='best-seller'] {
    background: #fbe3c2;
    color: #92400e;
  }

  .quicksip-addon-card__badge[data-badge='limited-release'] {
    background: #7c3aed;
    color: #fff;
  }

  /* Deterministic fallback palette for any other custom.card_badge text —
     picked via a hash of the text itself (see the Liquid above), so a given
     badge label always lands on the same one of these six colors. */
  .quicksip-addon-card__badge[data-badge='auto-1'] {
    background: #059669;
    color: #fff;
  }

  .quicksip-addon-card__badge[data-badge='auto-2'] {
    background: #db2777;
    color: #fff;
  }

  .quicksip-addon-card__badge[data-badge='auto-3'] {
    background: #ea580c;
    color: #fff;
  }

  .quicksip-addon-card__badge[data-badge='auto-4'] {
    background: #0891b2;
    color: #fff;
  }

  .quicksip-addon-card__badge[data-badge='auto-5'] {
    background: #b45309;
    color: #fff;
  }

  .quicksip-addon-card__badge[data-badge='auto-6'] {
    background: #b91c1c;
    color: #fff;
  }

  .quicksip-addon-card__control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  /* The plain `hidden` attribute alone loses to `.quicksip-addon-card__add-btn`'s
     own `display: inline-flex` below (equal specificity, author style wins
     the tie) — chaining [hidden] onto the class raises specificity enough
     to actually hide it, instead of it staying stuck visible. */
  .quicksip-addon-card__add-btn[hidden] {
    display: none;
  }

  .quicksip-addon-card__add-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 999px;
    background: #14205c;
    color: #fff;
    font-size: var(--font-size--sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .quicksip-addon-card__add-btn:hover {
    background: #374174;
  }

  .quicksip-addon-card__add-btn-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .quicksip-addon-card__add-btn-label--added {
    position: absolute;
    inset: 0;
    justify-content: center;
    opacity: 0;
    transform: translateY(6px);
  }

  .quicksip-addon-card__add-btn-label--added .svg-wrapper {
    width: 14px;
    height: 14px;
  }

  .quicksip-addon-card__add-btn.is-added .quicksip-addon-card__add-btn-label:not(.quicksip-addon-card__add-btn-label--added) {
    opacity: 0;
    transform: translateY(-6px);
  }

  .quicksip-addon-card__add-btn.is-added .quicksip-addon-card__add-btn-label--added {
    opacity: 1;
    transform: translateY(0);
  }

  /* Same [hidden]-specificity issue as the Add + button and others in this
     feature: a plain `.quicksip-addon-card__qty-wrap { display: flex }`
     ties with the browser's own `[hidden] { display: none }` rule and
     wins, so the wrap (and everything in it — the label, the stepper)
     would stay visible even when JS sets `hidden`. */
  .quicksip-addon-card__qty-wrap[hidden] {
    display: none;
  }

  .quicksip-addon-card__qty-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  /* Only when this card actually has a badge (.quicksip-addon-card__badge,
     flush against the card's own top border) does this control need extra
     clearance from it — badge-less cards center it normally, with no gap
     to reserve. Applied on .quicksip-addon-card__control itself (the
     shared wrapper) rather than on the Add+ button or qty-wrap separately,
     since only one of those two is ever visible at a time and both need
     the same clearance from the badge above. */
  .quicksip-addon-card__control--has-badge {
    padding-top: 12px;
  }

  /* The theme's own .quantity-selector sets `align-self: stretch` — inside
     our flex-column wrap that stretches it to match the widest sibling
     (the "Added in your order" label) instead of sizing to its own
     content. Override both that and the flex-basis it also carries
     (flex: 1 1 124px), which would otherwise still apply along whichever
     axis is "main" for this column container. */
  .quicksip-addon-card__qty-wrap .quantity-selector {
    align-self: flex-end;
    flex: none;
    width: fit-content;
  }

  .quicksip-addon-card__selected-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size--xs, 0.75rem);
    font-weight: 600;
    color: #14205c;
    white-space: nowrap;
  }

  .quicksip-addon-card__selected-label .svg-wrapper {
    width: 12px;
    height: 12px;
  }

  .quicksip-addon-card__qty-wrap .quantity-selector {
    height: 36px;
    border-radius: 999px;
    background: transparent;
    border: none;
  }

  /* The pill's own border/background are gone (above) — instead each +/-
     button gets its own circle. Chained one selector further than the
     theme's own `.product-details .quantity-selector .quantity-minus`
     asymmetric corner rule (which only rounds the two outer corners,
     assuming a continuous pill) so this wins on specificity regardless of
     stylesheet order, not just by injection order like the pill fix above. */
  .quicksip-addon-card .quicksip-addon-card__qty-wrap .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Theme default is --minimum-touch-target (~44px) — taller than our
       36px-tall control, which is what made the circles look oversized. */
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #14205c;
    background: color-mix(in srgb, #14205c 6%, var(--color-background, white));
    color: #14205c;
  }

  .quicksip-addon-card .quicksip-addon-card__qty-wrap .quantity-selector :is(.quantity-minus, .quantity-plus):hover {
    background: #14205c;
    color: #fff;
  }

  .quicksip-addon-card__soldout {
    font-size: var(--font-size--xs, 0.8rem);
    opacity: 0.6;
  }

  .quicksip-addon-card__choose {
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .quicksip-addon-card__media {
      width: 76px;
    }

    .quicksip-addon-card__body {
      padding: 8px 0 8px 10px;
      gap: 2px;
    }

    .quicksip-addon-card__title {
      font-size: var(--font-size--sm, 0.9rem);
    }

    .quicksip-addon-card__price {
      font-size: var(--font-size--xs, 0.8rem);
    }

    /* snippets/price.liquid's discount chip carries its own explicit
       font-size/padding (not inherited from .quicksip-addon-card__price
       above), so it needs its own override here — scoped to this card only,
       not snippets/price.liquid itself, since that chip is shared by other
       parts of the theme that don't need it shrunk. */
    .quicksip-addon-card__price .discount-percent {
      font-size: 9px;
      font-weight: 500;
      margin-left: 4px;
    }

    .quicksip-addon-card__price .discount-percent--chip {
      padding: 1px 4px;
    }

    .quicksip-addon-card__action {
      padding: 8px 8px 8px 6px;
    }

    .quicksip-addon-card__add-btn {
      height: 32px;
      padding: 0 12px;
      font-size: var(--font-size--xs, 0.8rem);
    }
  }
/* END_SNIPPET:quicksip-addon-card */

/* START_SNIPPET:rating-stars (INDEX:240) */
.rating-wrapper {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    width: 100%;
    gap: var(--gap-xs);
    flex-wrap: wrap;
  }

  .rating-wrapper,
  .rating-wrapper .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating-wrapper.justify-center {
    justify-content: center;
  }

  .rating-wrapper .rating {
    gap: var(--rating-gap, var(--gap-3xs));
  }

  .rating-wrapper .rating-count {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-wrapper .stars {
    height: var(--star-size, 0.9rem);
    fill: var(--empty-star-fill-color);
  }

  .rating-wrapper .filled-star {
    fill: var(--star-fill-color);
  }
/* END_SNIPPET:rating-stars */

/* START_SNIPPET:resource-card (INDEX:241) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:search-modal (INDEX:244) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    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;
  }

  /* Predictive search header tweaks for small screens */
  @media screen and (max-width: 749px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      content: '';
      position: absolute;
      right: calc(var(--padding-sm) + var(--minimum-touch-target));
      top: 0;
      bottom: 0;
      width: var(--border-width-sm);
      background-color: var(--color-border);
    }

    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )
      > .predictive-search__close-modal-button {
      &::before {
        content: none;
      }
    }
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:245) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  .header__column--center .search-action {
    width: auto;
    flex-grow: 1;
  }

  :is(.header__column--left, .header__column--center) .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:246) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:shop-mega-menu-card (INDEX:247) */
.shop-mega-menu-card {
    display: flex;
    flex-direction: column;
    gap: var(--padding-sm);
    text-decoration: none;
    color: var(--color-foreground);
  }

  .shop-mega-menu-card__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    border-radius: var(--card-corner-radius);
  }

  .shop-mega-menu-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--animation-speed-medium, 0.35s) var(--animation-easing);
  }

  .shop-mega-menu-card:hover .shop-mega-menu-card__image,
  .shop-mega-menu-card:focus-visible .shop-mega-menu-card__image {
    transform: scale(1.03);
  }

  .shop-mega-menu-card__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--padding-sm);
    text-align: center;
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .shop-mega-menu-card__title {
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-foreground);
    text-align: center;
  }
/* END_SNIPPET:shop-mega-menu-card */

/* START_SNIPPET:shop-mega-menu-list-row (INDEX:248) */
.shop-mega-menu-list-row {
    display: flex;
    align-items: center;
    gap: var(--padding-md);
    padding-block: var(--padding-xs);
    text-decoration: none;
    color: var(--color-foreground);
  }

  .shop-mega-menu-list-row__media {
    flex: 0 0 auto;
    display: block;
    width: clamp(48px, 16vw, 64px);
    aspect-ratio: var(--shop-mega-menu-list-row-aspect-ratio, 1 / 1);
    overflow: hidden;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    border-radius: var(--card-corner-radius);
  }

  .shop-mega-menu-list-row__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .shop-mega-menu-list-row__image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
  }

  .shop-mega-menu-list-row__title {
    font-family: var(--font-body--family);
    font-size: var(--font-size--md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-foreground);
  }
/* END_SNIPPET:shop-mega-menu-list-row */

/* START_SNIPPET:sorting (INDEX:256) */
.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 .facets__summary {
    @media screen and (min-width: 750px) {
      box-shadow: none;
    }
  }

  .sorting-filter .facets__summary:hover,
  .sorting-filter details[open] > .facets__summary {
    @media screen and (min-width: 750px) {
      box-shadow: none;
    }
  }

  .sorting-filter__options {
    display: flex;
    right: 0;
    flex-direction: column;
    gap: var(--margin-3xs);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    min-width: 180px;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-mobile-wrapper .sorting-filter__options {
    border-radius: var(--style-border-radius-popover);
    position: absolute;
    top: 0;
    right: 0;
    width: max-content;
    min-width: var(--facets-panel-min-width);
    max-width: var(--facets-panel-width);
    max-height: var(--facets-panel-height);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    padding: var(--padding-sm);
    gap: var(--gap-sm);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .sorting-filter__options {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: content-visibility var(--animation-speed-slow) allow-discrete,
      padding-block var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }

    &:focus-within {
      overflow-y: visible;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:264) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-width: var(--max-width, 100%);
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }

  .text-block--line-clamp > * {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp);
    overflow: hidden;
  }

  a:hover .text-block--hover-color,
  a:hover .text-block--hover-color > *,
  .product-card:hover .text-block--hover-color,
  .product-card:hover .text-block--hover-color > *,
  .collection-card:hover .text-block--hover-color,
  .collection-card:hover .text-block--hover-color > * {
    color: var(--hover-color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:274) */
.variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    display: flex;
    flex: 0 0 calc(3ch + 1.3em);
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-height: calc(3ch + 1.3em);
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  .variant-option__button-label__text {
    text-align: left;
    text-wrap: auto;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);
    padding: 0;
    border: none;
    display: block;
    flex-basis: auto;
    min-height: auto;
  }

  .variant-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);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --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;
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --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);
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-foreground);
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch,
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after,
    .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;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-picker-stroke-color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));

    background-color: inherit;
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label input,
  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .variant-option__button-label svg {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:video (INDEX:277) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */