/** Shopify CDN: Minification failed

Line 1899:0 Unexpected "}"
Line 2650:10 Expected identifier but found whitespace
Line 2650:12 Unexpected "{"
Line 2650:19 Expected ":"
Line 2650:45 Expected ":"
Line 6756:11 Expected identifier but found whitespace
Line 6756:13 Expected identifier but found "%"
Line 6756:59 Unexpected "0"
Line 6756:61 Expected identifier but found "%"
Line 6756:75 Expected identifier but found "%"
... and 7 more hidden warnings

**/
/* START_SECTION:cart-upsell-popup (INDEX:0) */
.cart-upsell[hidden] {
    display: none;
  }

  .cart-upsell__overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--cu-overlay, rgba(223, 128, 150, 0.7));
  }

  .cart-upsell__modal {
    position: relative;
    width: var(--cu-width, 400px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    background: var(--cu-bg, #ffffff);
    border-radius: var(--cu-radius, 20px);
    padding: 6px;
    font-family: var(--font-body--family);
  }

  .cart-upsell__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: #000000;
    cursor: pointer;
    z-index: 1;
    /* Without these a tap paints the blue-grey mobile highlight over the
       cross and can select it, so it reads as "stuck selected" after use. */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Keyboard users still get a ring via :focus-visible; a tap does not. */
  .cart-upsell__close:focus:not(:focus-visible) {
    outline: none;
  }

  /* The dialog only takes focus to trap it, so it must never show a ring. */
  .cart-upsell__modal:focus,
  .cart-upsell__modal:focus-visible {
    outline: none;
  }

  .cart-upsell__body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .cart-upsell__media {
    width: 100%;
    height: var(--cu-image-height, 400px);
    overflow: hidden;
  }

  .cart-upsell__media-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .cart-upsell__eyebrow {
    margin: 0 0 3px;
    font-size: 13px;
    color: #000000;
    letter-spacing: 0.02rem;
  }

  /* The body is a flex column with an 8px gap, which pushed the stars away
     from the image. Cancel that gap here and let the stars carry their own
     5px instead. Scoped to the sibling pair so it only applies when the
     image is actually shown. */
  .cart-upsell__media + .cart-upsell__eyebrow {
    margin-top: -8px;
    padding-top: 5px;
  }

  /* The body's 8px flex gap suits the block-level spacing but is too loose
     inside these two pairings, where the second line belongs to the first.
     Cancelling the gap leaves each element's own 3px margin as the spacing. */
  .cart-upsell__eyebrow + .cart-upsell__title,
  .cart-upsell__price + .cart-upsell__subtext {
    margin-top: -8px;
  }

  .cart-upsell__title {
    margin: 0;
    font-size: var(--cu-title-size, 18px);
    font-weight: 700;
    color: #000000;
    text-align: left;
    text-transform: none;
    letter-spacing: 0rem;
  }

  .cart-upsell__price {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
  }

  .cart-upsell__price-was {
    font-size: 15px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.7);
    text-decoration: line-through;
  }

  .cart-upsell__price-now {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
  }

  .cart-upsell__badge {
    font-size: 15px;
    font-weight: 700;
    color: var(--cu-badge-text, #ffffff);
    background: var(--cu-badge-bg, #df8096);
    border-radius: 16px;
    padding: 0px 10px;
  }

  .cart-upsell__subtext {
    margin: 0;
    font-size: var(--cu-body-size, 12px);
    font-weight: 600;
    color: #737373;
    letter-spacing: 0.005rem;
  }

  .cart-upsell__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .cart-upsell__list-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--cu-body-size, 12px);
    color: #000000;
    letter-spacing: 0.005rem;
    font-weight: 500;
  }

  .cart-upsell__list-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--cu-accent, #df8096);
  }

  .cart-upsell__blocks {
    width: 100%;
  }

  .cart-upsell__timer {
    width: 100%;
    padding: 1px;
    background: var(--cu-timer-bg, #f5f5f5);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    text-align: center;
  }

  .cart-upsell__cta {
    position: relative;
    width: calc(100% - 24px);
    margin: 5px 12px;
    padding: 10px 12px;
    background: var(--cu-cta-bg, #151515);
    color: var(--cu-cta-text, #ffffff);
    border: 0;
    border-radius: var(--cu-cta-radius, 20px);
    font-family: inherit;
    font-size: var(--cu-cta-size, 19px);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
  }

  .cart-upsell__cta[disabled] {
    opacity: 0.6;
    cursor: default;
  }

  /* Loading state: the label is hidden with visibility rather than removed,
     so the button keeps its width and does not jump while adding. */
  .cart-upsell__spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cart-upsell-spin 0.6s linear infinite;
  }

  .cart-upsell__cta.is-loading [data-upsell-add-label] {
    visibility: hidden;
  }

  .cart-upsell__cta.is-loading .cart-upsell__spinner {
    display: block;
  }

  @keyframes cart-upsell-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-upsell__spinner {
      animation-duration: 1.5s;
    }
  }

  .cart-upsell__dismiss {
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--cu-dismiss, #99a1af);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Footer strip: holds the Social proof block that closes the popup. Height
     is content-driven now that it is text rather than a fixed-height image. */
  .cart-upsell__footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-upsell__footer .social-proof {
    justify-content: center;
  }

  @media (max-width: 600px) {
    /* Full width on mobile: the modal ignores its desktop width setting and
       fills the viewport, so the max-width guard has to lift too. */
    .cart-upsell__modal {
      width: 100%;
      max-width: 100%;
      max-height: 100vh;
    }

    /* Full-bleed image on mobile. The fixed height was letterboxing it with
       object-fit: contain; letting it size to its own aspect ratio removes
       the bands, at the cost of a taller popup that scrolls. The negative
       margins cancel the modal's 6px and the body's 10px of padding. */
    .cart-upsell__modal {
      padding: 0;
      border-radius: 0;
    }

    .cart-upsell__body {
      padding: 0 10px 10px;
    }

    .cart-upsell__media {
      height: auto;
      width: calc(100% + 20px);
      margin: 0 -10px;
    }

    .cart-upsell__media-img {
      height: auto;
      object-fit: contain;
    }

    /* The close button sat against the modal's old padding. No backplate:
       a disc behind the cross reads as a stuck selection state. */
    .cart-upsell__close {
      top: 8px;
      right: 8px;
      background: none;
    }

    .cart-upsell__cta {
      font-size: calc(var(--cu-cta-size, 19px) - 2px);
    }
  }
/* END_SECTION:cart-upsell-popup */
/* START_SECTION:comparison-table (INDEX:1) */
.comparison-table-section {
    padding: var(--ct-pt, 50px) 20px var(--ct-pb, 60px);
    background: var(--ct-bg, #f7f7f7);
    font-family: var(--font-body--family);
    /* The theme wraps sections in a grid whose outer columns are the page
       margin (--page-margin), and children land in the centre column by
       default. This background is meant to bleed, so span every column. */
    grid-column: 1 / -1;
  }

  .comparison-table-section .comparison-table__heading {
    text-align: center;
    text-transform: none;
    margin-bottom: 40px;
    font-size: var(--ct-heading-size, 40px);
    letter-spacing: 0.02rem;
    font-weight: 600;
  }

  /* Narrow screens get a scrollable table rather than squeezed columns. */
  .comparison-table__scroll {
    max-width: var(--ct-max-width, 800px);
    margin: 0 auto;
    overflow-x: auto;
  }

  .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--ct-radius, 12px);
    color: var(--ct-text, #151515);
  }

  .comparison-table thead th {
    padding: 18px 16px;
    font-size: var(--ct-head-size, 14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--ct-head-border, #000000);
    background: transparent;
    text-align: center;
  }

  .comparison-table thead th:first-child {
    text-align: left;
  }

  /* The highlighted header sits on its own painted panel so the rounded top
     corners and the accent underline read as one shape. */
  .comparison-table thead th.comparison-table__cell--highlight {
    position: relative;
    z-index: 1;
    color: var(--ct-highlight-text, #ffffff);
    border-bottom-color: var(--ct-accent, #df8096);
  }

  .comparison-table thead th.comparison-table__cell--highlight::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ct-accent, #df8096);
    border-radius: var(--ct-radius, 12px) var(--ct-radius, 12px) 0 0;
    z-index: -1;
  }

  .comparison-table thead th.comparison-table__cell--highlight .comparison-table__logo {
    filter: brightness(0) invert(1);
  }

  /* Cap both axes: max-height alone lets a wide logo overflow the column,
     and without max-width a large upload pushes the whole table sideways. */
  .comparison-table__logo {
    max-height: var(--ct-logo-height, 24px);
    max-width: 100%;
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
  }

  .comparison-table tbody th,
  .comparison-table tbody td {
    padding: 16px;
    font-size: var(--ct-body-size, 14px);
    font-weight: 500;
    border-bottom: 1px solid var(--ct-row-border, #dadada);
    vertical-align: middle;
    text-align: center;
    letter-spacing: 0.005rem;
  }

  /* Semantically a row header, styled exactly like the reference's first cell.
     Scoped through tbody so it outranks the shared `tbody th, tbody td` rule
     above, which would otherwise centre it at weight 500. */
  .comparison-table tbody th.comparison-table__feature {
    text-align: left;
    font-weight: 600;
    text-transform: none;
  }

  /* Tint derived from the accent colour, so changing the accent carries over
     instead of needing a second colour kept manually in sync. */
  .comparison-table tbody td.comparison-table__cell--highlight {
    position: relative;
  }

  .comparison-table tbody td.comparison-table__cell--highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ct-accent, #df8096);
    opacity: var(--ct-tint, 0.07);
    pointer-events: none;
  }

  .comparison-table tbody tr:last-child th,
  .comparison-table tbody tr:last-child td {
    border-bottom: none;
  }

  .comparison-table__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ct-icon, 28px);
    height: var(--ct-icon, 28px);
    color: var(--ct-accent, #df8096);
  }

  .comparison-table__icon img,
  .comparison-table__icon svg {
    width: var(--ct-icon-img, 20px);
    height: var(--ct-icon-img, 20px);
    display: block;
  }

  @media screen and (max-width: 600px) {
    .comparison-table-section {
      padding: var(--ct-pt-m, 40px) 12px var(--ct-pb-m, 50px);
    }

    .comparison-table-section .comparison-table__heading {
      font-size: var(--ct-heading-size-m, 36px);
    }

    .comparison-table__logo {
      max-height: var(--ct-logo-height-m, 20px);
    }

    .comparison-table thead th {
      padding: 12px 8px;
      font-size: var(--ct-head-size-m, 12px);
    }

    .comparison-table tbody th,
    .comparison-table tbody td {
      padding: 12px 8px;
      font-size: var(--ct-body-size-m, 12px);
    }

    .comparison-table__icon {
      width: var(--ct-icon-m, 24px);
      height: var(--ct-icon-m, 24px);
    }

    .comparison-table__icon img,
    .comparison-table__icon svg {
      width: var(--ct-icon-img-m, 16px);
      height: var(--ct-icon-img-m, 16px);
    }
  }
/* END_SECTION:comparison-table */
/* START_SECTION:faq-accordions (INDEX:5) */
.faq-accordions-section {
    padding: var(--fa-pt, 40px) 20px var(--fa-pb, 60px);
    background: var(--fa-bg, #ffffff);
    font-family: var(--font-body--family);
    /* Theme sections sit in a grid whose outer columns are the page margin. */
    grid-column: 1 / -1;
  }

  .faq-accordions__inner {
    max-width: var(--fa-max-width, 1160px);
    margin: 0 auto;
  }

  .faq-accordions__header {
    margin-bottom: 20px;
    text-align: center;
  }

  .faq-accordions-section .faq-accordions__heading {
    text-align: center;
    text-transform: none;
    margin: 0 0 30px;
    font-size: var(--fa-heading-size, 36px);
    font-weight: var(--fa-heading-weight, 600);
    line-height: 1.25;
    letter-spacing: 0.02rem;
  }

  .faq-accordions__columns {
    display: grid;
    grid-template-columns: repeat(var(--fa-columns, 2), minmax(0, 1fr));
    gap: var(--fa-column-gap, 40px);
    align-items: start;
  }

  .faq-accordions__item {
    background: var(--fa-item-bg, #f7f7f7);
    border-radius: var(--fa-radius, 8px);
    margin-bottom: var(--fa-item-gap, 10px);
    overflow: hidden;
  }

  .faq-accordions__item:last-child {
    margin-bottom: 0;
  }

  .faq-accordions__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 20px;
    cursor: pointer;
    list-style: none;
    color: var(--fa-text, #000000);
    font-size: var(--fa-question-size, 16px);
    font-weight: var(--fa-question-weight, 400);
    line-height: 26px;
    letter-spacing: 0.02rem;
    /* A summary is a control, not copy: without these, repeated toggling
       selects the question text and every tap flashes the blue-grey mobile
       tap highlight, both of which read as the heading turning grey. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .faq-accordions__question::-webkit-details-marker {
    display: none;
  }

  .faq-accordions__question::marker {
    content: '';
  }

  /* base.css recolours every <summary> on hover via --color-primary-hover,
     which greys this text. Hold the resting colour. */
  .faq-accordions__question:hover,
  .faq-accordions__question:hover .faq-accordions__question-text,
  .faq-accordions__question:hover .faq-accordions__icon {
    color: var(--fa-text, #000000);
  }

  .faq-accordions__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: currentColor;
  }

  /* The paths are drawn in a 192-unit viewBox. Without an explicit stroke the
     SVG default of 1 user unit scales down to a hairline at 14px, which is why
     the plus looked missing; the theme's own .icon class sets 12 for these. */
  .faq-accordions__icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 12;
  }

  .faq-accordions__item .faq-accordions__icon--minus,
  .faq-accordions__item[open] .faq-accordions__icon--plus {
    display: none;
  }

  .faq-accordions__item[open] .faq-accordions__icon--minus {
    display: block;
  }

  .faq-accordions__answer {
    padding: 20px;
    padding-top: 0;
    font-size: var(--fa-answer-size, 16px);
    line-height: 25px;
    color: var(--fa-text, #000000);
    letter-spacing: 0.02rem;
  }

  .faq-accordions__answer > :first-child {
    margin-top: 0;
  }

  .faq-accordions__answer > :last-child {
    margin-bottom: 0;
  }

  @media (max-width: 767px) {
    .faq-accordions-section {
      padding: var(--fa-pt-m, 30px) 16px var(--fa-pb-m, 40px);
    }

    .faq-accordions-section .faq-accordions__heading {
      font-size: var(--fa-heading-size-m, 28px);
    }

    .faq-accordions__columns {
      grid-template-columns: 1fr;
      gap: var(--fa-item-gap, 10px);
    }

    .faq-accordions__question {
      font-size: var(--fa-question-size-m, 15px);
      gap: 12px;
    }

    .faq-accordions__answer {
      font-size: var(--fa-answer-size-m, 15px);
    }
  }
/* END_SECTION:faq-accordions */
/* START_SECTION:header-announcements (INDEX:9) */
.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: 989px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 900px;
    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;
    }
  }

  @media screen and (min-width: 990px) {
    .announcement-bar__slider--inline-desktop {
      gap: var(--spacing-lg, 16px);
    }

    .announcement-bar__slider--inline-desktop slideshow-arrows {
      display: none;
    }

    .announcement-bar__slider--inline-desktop .announcement-bar__slides {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--announcement-desktop-gap, clamp(0.75rem, 2vw, 2rem));
      width: 100%;
      max-width: none;
      margin-inline: auto;
    }

    .announcement-bar__slider--inline-desktop .announcement-bar__slides > * {
      grid-area: auto;
    }

    .announcement-bar__slider--inline-desktop .announcement-bar__slide {
      opacity: 1;
      visibility: visible;
      transition: none;
    }

    .announcement-bar__slider--inline-desktop .announcement-bar__slide[aria-hidden='true'] {
      opacity: 1;
      visibility: visible;
    }
  }

  .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: 990px) {
      --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__text {
    font-size: var(--announcement-font-size-desktop, 1rem);
  }

  @media screen and (max-width: 989px) {
    .announcement-bar__text {
      font-size: var(--announcement-font-size-mobile, 0.875rem);
    }
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }

  /* Fix text wrapping on mobile */
  .announcement-bar__slide,
  .announcement-bar__text {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  @media screen and (max-width: 989px) {
    .announcement-bar__slides {
      width: 100%;
      max-width: 100%;
      padding-inline: var(--padding-sm);
    }

    .announcement-bar__text {
      text-align: center;
      line-height: 1.4;
    }
  }
/* END_SECTION:header-announcements */
/* START_SECTION:header (INDEX:10) */
body {
    --header-height: 0px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

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

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

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

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

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

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

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

    &[transparent='not-sticky'][data-sticky-state='active'],
    /* Only show opaque background when hovering over menu items with children (mega menu)
       Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --header-bg-color: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;

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

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

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

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

  .header-section {
    position: relative;
  }

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

  .header-section:has(> #header-component[sticky='always']) {
    position: sticky;
    top: var(--sticky-header-top, -1px);
    z-index: 21;
  }

  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;
    top: var(--sticky-header-top, -1px);
    z-index: 21;
  }

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

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

  /*
   * Never fade #header-component when scroll-up marks it inactive. The hamburger + drawer live
   * inside this host; opacity:0 hid all content while ResizeObserver/layout still reserved height
   * (--header-height, below-header top) → empty band. Desktop ≥750px was still hitting that path.
   * (Hide-on-scroll for desktop is off until an inner wrapper can be hidden without the drawer.)
   */
  #header-component.header[data-sticky-state='inactive'] {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .header__row {
    position: relative;
    overflow: visible;

    /* 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(--header-border-color, var(--color-border));
  }

  @media screen and (max-width: 989px) {
    .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: 990px) {
      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: 989px) {
      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-sm);
    justify-content: flex-end;
    grid-area: right;
    overflow: visible;

    .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: 990px) {
        --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: 989px) {
      --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: var(--gap-xs);
      align-items: center;
      padding-inline: var(--header-mobile-side-inset, calc(var(--padding-3xs) + var(--gap-xs)));

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

      @media screen and (min-width: 750px) and (max-width: 989px) {
        &:has(.header__button) .header__button {
          grid-area: rightA;
          justify-self: end;
        }
      }
    }
  }

  /* 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-padding: var(--padding-xs);
    --font-paragraph--line-height: 1;
  }

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

  .header.header--compact .header__columns {
    --padding-block-start: min(var(--header-padding-top, var(--header-padding)), 10px);
    --padding-block-end: min(var(--header-padding-bottom, var(--header-padding)), 10px);
  }

  @media screen and (max-width: 989px) {
    .header.header--compact .header__columns {
      --padding-block-start: min(var(--header-padding-top, var(--header-padding)), 8px);
      --padding-block-end: min(var(--header-padding-bottom, var(--header-padding)), 8px);
    }
  }

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

  .header.header--extra-compact .header__columns {
    --padding-block-start: min(var(--header-padding-top, var(--header-padding)), 6px);
    --padding-block-end: min(var(--header-padding-bottom, var(--header-padding)), 6px);
  }

  @media screen and (max-width: 989px) {
    .header.header--extra-compact .header__columns {
      --padding-block-start: min(var(--header-padding-top, var(--header-padding)), 4px);
      --padding-block-end: min(var(--header-padding-bottom, var(--header-padding)), 4px);
    }
  }

  @media screen and (max-width: 989px) {
    .header {
      --header-padding: var(--padding-xs);
    }
  }

  .header__columns {
    --padding-block-start: var(--header-padding-top, var(--header-padding));
    --padding-block-end: var(--header-padding-bottom, var(--header-padding));
    overflow: visible;
  }

  .header:not(.header--compact):not(.header--extra-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:image-with-text (INDEX:14) */
.image-with-text {
    padding-top: var(--iwt-pt, 20px);
    padding-bottom: var(--iwt-pb, 20px);
    background: var(--iwt-bg, transparent);
    font-family: var(--font-body--family);
  }

  .image-with-text__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--iwt-gap, 50px);
    align-items: center;
  }

  /* Flip with `order` rather than the direction: rtl trick the reference used:
     rtl leaks into punctuation and list rendering inside the copy. */
  .image-with-text__grid--reverse .image-with-text__image {
    order: 2;
  }

  .image-with-text__image {
    border-radius: var(--iwt-radius, 16px);
    overflow: hidden;
  }

  .image-with-text__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .image-with-text__content {
    text-align: left;
    min-width: 0;
  }

  .image-with-text .image-with-text__heading {
    text-align: left;
    text-transform: none;
    margin: 0 0 20px;
    letter-spacing: 0rem;
    font-weight: 600;
  }

  .image-with-text__highlight {
    background: var(--iwt-highlight-bg, #df8096);
    color: var(--iwt-highlight-text, #ffffff);
    padding: 4px 10px;
    border-radius: 6px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 1.6;
  }

  .image-with-text__text {
    font-family: var(--font-body--family);
    font-size: var(--iwt-text-size, 15px);
    color: var(--iwt-text, #555555);
    line-height: 1.7;
    margin: 0 0 24px;
    letter-spacing: 0.02rem;
  }

  .image-with-text__text p {
    margin: 0 0 14px;
  }

  .image-with-text__text p:last-child {
    margin-bottom: 0;
  }

  .image-with-text__usps {
    display: grid;
    grid-template-columns: repeat(var(--iwt-usp-columns, 2), minmax(0, 1fr));
    gap: 14px 20px;
    margin-top: 24px;
  }

  .image-with-text__usp {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .image-with-text__usp img {
    width: var(--iwt-usp-icon, 32px);
    height: var(--iwt-usp-icon, 32px);
    flex-shrink: 0;
  }

  .image-with-text__usp-text {
    font-family: var(--font-body--family);
    font-size: var(--iwt-usp-size, 15px);
    font-weight: 600;
    color: var(--iwt-usp-color, #151515);
    min-width: 0;
    letter-spacing: 0.02rem;
  }

  .image-with-text__usp-text p {
    margin: 0;
  }

  .image-with-text__button {
    display: inline-block;
    margin-top: 28px;
    padding: 14px 32px;
    background: var(--iwt-btn-bg, #151515);
    color: var(--iwt-btn-text, #ffffff);
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .image-with-text__button:hover {
    opacity: 0.85;
  }

  @media (max-width: 767px) {
    .image-with-text__grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }

    /* Stacked: image always leads, whichever side it takes on desktop. */
    .image-with-text__grid--reverse .image-with-text__image {
      order: 0;
    }

    .image-with-text__text {
      font-size: 16px;
    }

    .image-with-text .image-with-text__heading {
      font-size: 24px;
    }
  }

  @media (max-width: 600px) {
    .image-with-text__usp img {
      width: var(--iwt-usp-icon-mobile, 26px);
      height: var(--iwt-usp-icon-mobile, 26px);
    }

    .image-with-text__usp-text {
      font-size: var(--iwt-usp-size-mobile, 13px);
      line-height: 1.25;
    }

    .image-with-text__usp {
      gap: 8px;
    }
  }
/* END_SECTION:image-with-text */
/* START_SECTION:ingredients-grid (INDEX:15) */
.ingredients-grid-section {
    padding: var(--ig-pt, 60px) 20px var(--ig-pb, 70px);
    background: var(--ig-bg, #fff9fb);
    font-family: var(--font-body--family);
    /* Theme sections sit in a grid whose outer columns are the page margin;
       children land in the centre column, which would inset this background. */
    grid-column: 1 / -1;
  }

  .ingredients-grid__header {
    text-align: center;
    margin-bottom: 50px;
  }

  .ingredients-grid-section .ingredients-grid__heading {
    text-transform: none;
    margin-bottom: 0;
    font-size: var(--ig-heading-size, 40px);
    letter-spacing: 0.02rem;
    font-weight: 600;
  }

  .ingredients-grid__subtitle {
    margin: 10px auto 0;
    max-width: 500px;
    font-size: var(--ig-subtitle-size, 15px);
    color: var(--ig-subtitle-color, #777777);
    letter-spacing: 0.02rem;
  }

  .ingredients-grid__subtitle p {
    margin: 0;
  }

  .ingredients-grid__card {
    background: var(--ig-card-bg, #ffffff);
    border-radius: var(--ig-radius, 16px);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    height: 100%;
  }

  .ingredients-grid__card--lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .ingredients-grid__card--lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }

  .ingredients-grid__image {
    width: 100%;
    aspect-ratio: 1 / var(--ig-ratio, 0.85);
    overflow: hidden;
  }

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

  .ingredients-grid__info {
    padding: var(--ig-info-pad, 24px);
    text-align: center;
  }

  .ingredients-grid__name {
    font-size: var(--ig-name-size, 18px);
    font-weight: 700;
    color: var(--ig-name-color, #2d2d2d);
    margin: 0 0 8px;
    letter-spacing: 0.02rem;
    text-transform: none;
  }

  .ingredients-grid__desc {
    font-size: var(--ig-desc-size, 14px);
    color: var(--ig-desc-color, #777777);
    line-height: 1.5;
    margin: 0;
    letter-spacing: 0.02rem;
  }

  .ingredients-grid__desc p {
    margin: 0;
  }

  .ingredients-grid__badge {
    display: inline-block;
    margin-top: 14px;
    padding: 5px 14px;
    font-size: var(--ig-badge-size, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 20px;
    background: var(--ig-accent, #df8096);
    color: var(--ig-badge-text, #ffffff);
  }

  /* Desktop: the Swiper wrapper is reused as a plain grid, with Swiper not
     running. The compound selector is deliberate, since swiper-bundle.css sets
     `.swiper { overflow: hidden }` and loads after this file: a single-class
     rule ties on specificity, loses on order, and clips the hover lift. */
  @media (min-width: 768px) {
    .ingredients-grid__swiper.swiper {
      max-width: var(--ig-max-width, 960px);
      margin: 0 auto;
      overflow: visible;
    }

    .ingredients-grid__grid.swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(var(--ig-columns, 3), minmax(0, 1fr));
      gap: var(--ig-gap, 24px);
      transform: none !important;
    }

    .ingredients-grid__slide.swiper-slide {
      width: auto;
      flex-shrink: 1;
      /* Swiper writes spaceBetween as an inline margin; it would add to the
         grid gap if an instance ever lingered. */
      margin: 0 !important;
    }

    .ingredients-grid-section .swiper-button-prev,
    .ingredients-grid-section .swiper-button-next,
    .ingredients-grid-section .swiper-scrollbar {
      display: none;
    }
  }

  @media (max-width: 767px) {
    .ingredients-grid-section {
      padding: var(--ig-pt-m, 40px) 0 var(--ig-pb-m, 50px);
    }

    .ingredients-grid__header {
      padding: 0 16px;
    }

    .ingredients-grid-section .ingredients-grid__heading {
      font-size: var(--ig-heading-size-m, 36px);
    }

    .ingredients-grid__subtitle {
      font-size: var(--ig-subtitle-size-m, 15px);
    }

    .ingredients-grid__nav {
      position: relative;
      padding: 0 20px;
    }

    .ingredients-grid__swiper .swiper-wrapper {
      padding: 8px 0 12px;
    }

    .ingredients-grid__slide.swiper-slide {
      width: var(--ig-slide-width, 270px);
      height: auto;
    }

    .ingredients-grid__info {
      padding: var(--ig-info-pad-m, 20px);
    }

    .ingredients-grid__name {
      font-size: var(--ig-name-size-m, 18px);
    }

    .ingredients-grid__desc {
      font-size: var(--ig-desc-size-m, 14px);
    }

    .ingredients-grid__badge {
      font-size: var(--ig-badge-size-m, 11px);
    }

    .ingredients-grid-section .swiper-scrollbar {
      height: 4px;
      margin-top: 24px;
    }

    .ingredients-grid-section .swiper-scrollbar-drag {
      background: var(--ig-accent, #df8096);
    }

    .ingredients-grid-section .swiper-button-prev,
    .ingredients-grid-section .swiper-button-next {
      display: flex;
      width: 30px;
      height: 30px;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      top: var(--swiper-navigation-top-offset, 40%);
    }

    .ingredients-grid-section .swiper-button-prev {
      left: 0;
    }

    .ingredients-grid-section .swiper-button-next {
      right: 0;
    }

    .ingredients-grid-section .swiper-button-prev:after,
    .ingredients-grid-section .swiper-button-next:after {
      font-size: 12px;
      font-weight: bold;
      color: #2d2d2d;
    }

    .ingredients-grid-section div[aria-disabled='true'] {
      opacity: 0.35;
      cursor: auto;
      pointer-events: none;
    }
  }
/* END_SECTION:ingredients-grid */
/* START_SECTION:product-information (INDEX:46) */
.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 & tablet styles — product page only (not homepage featured product) */
  @media screen and (max-width: 989px) {
    .product-information:not(.featured-product-information) .product-information__grid {
      display: flex;
      flex-direction: column;
      grid-column: 1 / -1;
      width: 100%;
    }

    .product-information:not(.featured-product-information) .product-information__media {
      order: 0;
      grid-column: 1 / -1;
      width: 100%;
      min-width: 0;
    }

    .product-information:not(.featured-product-information) .product-details {
      order: 1;
      grid-column: 1 / -1;
      width: 100%;
    }

    /* No column gap padding on tablet — desktop split-column rules only apply at 990px+ */
    .product-information:not(.featured-product-information)
      .product-information__grid:not(:has(.product-information__media:empty)).product-information--media-left
      .product-information__media,
    .product-information:not(.featured-product-information)
      .product-information__grid:not(:has(.product-information__media:empty)).product-information--media-right
      .product-information__media {
      padding-inline: 0 !important;
    }

    .product-information:not(.featured-product-information)
      .product-information__grid:not(:has(.product-information__media:empty)).product-information--media-left
      .product-details,
    .product-information:not(.featured-product-information)
      .product-information__grid:not(:has(.product-information__media:empty)).product-information--media-right
      .product-details {
      padding-inline: 0 !important;
    }

    /* Single-image products have no thumbnail row — add space before details */
    .product-information:not(.featured-product-information):has(.slideshow--single-media) .product-information__grid {
      gap: 22px;
    }
  }

  /* Mobile: full-bleed image, padded product details — product page only */
  @media screen and (max-width: 749px) {
    .product-information:not(.featured-product-information) {
      overflow-x: clip;
    }

    .product-information:not(.featured-product-information) .product-information__media {
      width: 100vw;
      max-width: 100vw;
      margin-inline: calc(50% - 50vw);
    }

    .product-information:not(.featured-product-information) .product-information__media media-gallery.spacing-style,
    .product-information:not(.featured-product-information) .product-information__media slideshow-component,
    .product-information:not(.featured-product-information) .product-information__media slideshow-container,
    .product-information:not(.featured-product-information) .product-information__media slideshow-slides,
    .product-information:not(.featured-product-information) .product-information__media .product-media-container {
      padding: 0 !important;
      margin-inline: 0 !important;
      --padding-block-start: 0px !important;
      --padding-block-end: 0px !important;
      --padding-inline-start: 0px !important;
      --padding-inline-end: 0px !important;
      border-radius: 0 !important;
      width: 100%;
      max-width: 100%;
    }

    .product-information:not(.featured-product-information) .product-details > .group-block {
      padding-inline: 20px !important;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 990px) {
    .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 page only */
    .product-information:not(.featured-product-information)
      .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 */
    .product-information:not(.featured-product-information).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;
    }
  }

  @media screen and (min-width: 990px) {
    .product-information__grid--max-width {
      box-sizing: border-box;
      width: 100%;
      max-width: var(--product-info-max-width, 1280px);
      margin-inline: auto;
    }
  }

  .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:results-stats (INDEX:49) */
.results-stats {
    padding-top: var(--rs-pt, 0px);
    padding-bottom: var(--rs-pb, 50px);
    background: var(--rs-bg, #ffffff);
    font-family: var(--font-body--family);
  }

  .results-stats .results-stats__heading {
    text-align: center;
    text-transform: none;
    margin-bottom: 40px;
    font-size: var(--rs-heading-size, 40px);
    letter-spacing: 0.02rem;
    font-weight: 600;
  }

  .results-stats__card {
    background: var(--rs-card-bg, #f7f7f7);
    border-radius: var(--rs-radius, 16px);
    padding: var(--rs-card-pad, 40px 28px);
    text-align: center;
    height: 100%;
  }

  .results-stats__card--lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .results-stats__card--lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .results-stats__percentage {
    font-family: var(--font-h2--family);
    font-weight: 600;
    font-size: var(--rs-pct-size, 80px);
    color: var(--rs-pct-color, #df8096);
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: 0.02rem;
  }

  .results-stats__title {
    font-family: var(--font-h2--family);
    font-weight: 600;
    font-size: var(--rs-title-size, 16px);
    color: var(--rs-title-color, #151515);
    margin: 0 0 10px;
    line-height: 1.4;
    letter-spacing: 0.02rem;
  }

  .results-stats__subtitle {
    font-family: var(--font-body--family);
    font-size: var(--rs-subtitle-size, 13px);
    color: var(--rs-subtitle-color, #999999);
    line-height: 1.4;
    margin: 0;
    letter-spacing: 0.02rem;
  }

  /* Desktop: the Swiper wrapper is repurposed as a plain grid. Swiper is not
     running at this width, so none of its inline sizing is present. */
  @media (min-width: 768px) {
    /* Compound selector on purpose: swiper-bundle.css sets `.swiper {
       overflow: hidden }` and loads after this file, so a single-class rule
       ties on specificity and loses on source order. That clipped the hover
       lift and its shadow, since the desktop grid lives inside .swiper here. */
    .results-stats__swiper.swiper {
      max-width: var(--rs-max-width, 1100px);
      margin: 0 auto;
      overflow: visible;
    }

    .results-stats__grid.swiper-wrapper {
      display: grid;
      grid-template-columns: repeat(var(--rs-columns, 3), minmax(0, 1fr));
      gap: var(--rs-gap, 24px);
      transform: none !important;
    }

    .results-stats__slide.swiper-slide {
      width: auto;
      flex-shrink: 1;
      /* Swiper writes spaceBetween as an inline margin on each slide. If it is
         still running (or was destroyed without cleaning up) that margin would
         add to the grid gap, so it is overridden rather than trusted away. */
      margin: 0 !important;
    }

    .results-stats .swiper-button-prev,
    .results-stats .swiper-button-next,
    .results-stats .swiper-scrollbar {
      display: none;
    }
  }

  @media (max-width: 767px) {
    .results-stats {
      padding-bottom: var(--rs-pb-m, 40px);
    }

    .results-stats .results-stats__heading {
      font-size: var(--rs-heading-size-m, 36px);
    }

    .results-stats__nav {
      position: relative;
      padding: 0 20px;
    }

    .results-stats__swiper .swiper-wrapper {
      padding: 8px 0 12px;
    }

    .results-stats__slide.swiper-slide {
      width: var(--rs-slide-width, 270px);
      height: auto;
    }

    .results-stats__card {
      padding: var(--rs-card-pad-m, 30px 24px);
    }

    .results-stats__percentage {
      font-size: var(--rs-pct-size-m, 60px);
    }

    .results-stats__title {
      font-size: var(--rs-title-size-m, 16px);
    }

    .results-stats__subtitle {
      font-size: var(--rs-subtitle-size-m, 13px);
    }

    .results-stats .swiper-scrollbar {
      height: 4px;
      margin-top: 24px;
    }

    .results-stats .swiper-scrollbar-drag {
      background: var(--rs-pct-color, #df8096);
    }

    .results-stats .swiper-button-prev,
    .results-stats .swiper-button-next {
      display: flex;
      width: 30px;
      height: 30px;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      top: var(--swiper-navigation-top-offset, 40%);
    }

    .results-stats .swiper-button-prev {
      left: 0;
    }

    .results-stats .swiper-button-next {
      right: 0;
    }

    .results-stats .swiper-button-prev:after,
    .results-stats .swiper-button-next:after {
      font-size: 12px;
      font-weight: bold;
      color: #2d2d2d;
    }

    .results-stats div[aria-disabled='true'] {
      opacity: 0.35;
      cursor: auto;
      pointer-events: none;
    }
  }
/* END_SECTION:results-stats */
/* START_SECTION:testimonials-carousel (INDEX:55) */
.testimonials-carousel {
    padding-top: var(--st-pt, 20px);
    padding-bottom: var(--st-pb, 20px);
    background: var(--st-bg, #ffffff);
  }

  /* Scoped with the section class so this outranks the theme's .h2, which
     otherwise ties on specificity and resets tracking to normal. */
  .testimonials-carousel .testimonials-carousel__heading {
    font-size: var(--st-heading-size, 40px);
    text-align: center;
    text-transform: none;
    margin-bottom: 30px;
    letter-spacing: 0.02rem;
    font-weight: 600;
  }

  .testimonials-carousel__heading-break {
    display: inline-block;
  }

  /* The circle is an SVG laid over the word, so it scales with the type. */
  .testimonials-carousel__highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    color: var(--st-highlight-text, #000000);
  }

  .testimonials-carousel__highlight-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 118%;
    height: 165%;
    transform: translate(-50%, -50%);
    color: var(--st-highlight, #df8096);
    pointer-events: none;
  }

  .testimonials-carousel__highlight-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Slides must NOT stretch to the tallest sibling, otherwise expanding one
     card's "Read more" grows every card in the row. Each slide sizes to its
     own card; resting heights stay uniform because the text is line-clamped. */
  .testimonials-carousel .swiper-wrapper {
    align-items: flex-start;
  }

  .testimonials-carousel .swiper-slide {
    height: auto;
  }

  .testimonials-carousel__card {
    background: var(--st-card-bg, #f7f7f7);
    border-radius: 16px;
    overflow: hidden;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .testimonials-carousel__image {
    width: 100%;
    height: var(--st-image-height, 220px);
    overflow: hidden;
  }

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

  .testimonials-carousel__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }

  .testimonials-carousel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .testimonials-carousel__name {
    font-weight: 700;
    font-size: var(--st-name-size, 15px);
    color: var(--st-name, #2d2d2d);
    letter-spacing: 0.02rem;
  }

  .testimonials-carousel__stars {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
  }

  .testimonials-carousel__stars svg {
    width: 14px;
    height: 14px;
  }

  .testimonials-carousel__stars svg path {
    fill: var(--st-accent, #df8096);
  }

  .testimonials-carousel__verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--st-verified-size, 12px);
    font-weight: 600;
    color: var(--st-accent, #df8096);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .testimonials-carousel__verified svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .testimonials-carousel__text {
    font-size: var(--st-text-size, 16px);
    line-height: 1.55;
    color: var(--st-text, #555555);
    position: relative;
    letter-spacing: 0.02rem;
  }

  .testimonials-carousel__text p {
    margin: 0;
  }

  .testimonials-carousel__text:not(.is-expanded) p {
    display: -webkit-box;
    -webkit-line-clamp: var(--st-clamp, 5);
    line-clamp: var(--st-clamp, 5);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .testimonials-carousel__read-more {
    background: none;
    border: none;
    padding: 0;
    /* A <button> does not inherit the page font: without this it falls back to
       the UA default (Arial) instead of the theme body face. */
    font-family: inherit;
    font-size: var(--st-read-size, 13px);
    font-weight: 600;
    line-height: 26px;
    color: var(--st-accent, #df8096);
    cursor: pointer;
    margin-top: auto;
    /* Full card width so text-align: center actually centres it. */
    width: 100%;
    text-align: center;
    letter-spacing: 0.02rem;
  }

  .testimonials-carousel__read-more:hover {
    text-decoration: underline;
  }

  .testimonials-carousel__nav {
    position: relative;
  }

  .testimonials-carousel .swiper-button-prev,
  .testimonials-carousel .swiper-button-next {
    width: 36px;
    height: 36px;
    background: var(--st-card-bg, #f7f7f7);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    top: var(--swiper-navigation-top-offset, 43%);
  }

  .testimonials-carousel .swiper-button-prev {
    left: 0;
  }

  .testimonials-carousel .swiper-button-next {
    right: 0;
  }

  .testimonials-carousel .swiper-button-prev:after,
  .testimonials-carousel .swiper-button-next:after {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
  }

  .testimonials-carousel div[aria-disabled='true'] {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }

  @media (max-width: 767px) {
    .testimonials-carousel .testimonials-carousel__heading {
      font-size: var(--st-heading-size-m, 36px);
    }

    .testimonials-carousel__name {
      font-size: var(--st-name-size-m, 15px);
    }

    .testimonials-carousel__verified {
      font-size: var(--st-verified-size-m, 12px);
    }

    .testimonials-carousel__text {
      font-size: var(--st-text-size-m, 16px);
    }

    .testimonials-carousel__read-more {
      font-size: var(--st-read-size-m, 13px);
    }

    .testimonials-carousel__image {
      height: var(--st-image-height-mobile, 200px);
    }

    .testimonials-carousel__nav {
      padding-left: 16px;
      padding-right: 16px;
    }

    .testimonials-carousel .swiper-button-prev,
    .testimonials-carousel .swiper-button-next {
      width: 30px;
      height: 30px;
    }
  }
/* END_SECTION:testimonials-carousel */
/* START_SECTION:why-split (INDEX:56) */
.why-split-section {
    padding-top: var(--ws-pt, 0px);
    padding-bottom: var(--ws-pb, 60px);
    font-family: var(--font-body--family);
  }

  .why-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--ws-radius, 8px);
    overflow: hidden;
    min-height: var(--ws-min-height, 500px);
    max-width: var(--ws-max-width, 1160px);
    margin: 0 auto;
  }

  /* Flip with `order`, not direction: rtl, which would leak into the copy. */
  .why-split__inner--reverse .why-split__image {
    order: 2;
  }

  .why-split__image {
    position: relative;
    min-height: var(--ws-image-min, 350px);
  }

  .why-split__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .why-split__content {
    background: var(--ws-content-bg, #f7f7f7);
    padding: var(--ws-content-pad, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .why-split-section .why-split__heading {
    text-align: left;
    text-transform: none;
    margin: 0 0 30px;
    font-size: var(--ws-heading-size, 36px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ws-heading-color, #151515);
    letter-spacing: 0.02rem;
  }

  .why-split__text {
    margin-bottom: 30px;
  }

  .why-split__text p {
    margin: 0;
    font-size: var(--ws-text-size, 15px);
    line-height: 1.6;
    color: var(--ws-text-color, #555555);
    letter-spacing: 0.02rem;
  }

  .why-split__features {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
  }

  .why-split__feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ws-divider, rgba(0, 0, 0, 0.08));
  }

  .why-split__feature:last-child {
    border-bottom: none;
  }

  .why-split__feature-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--ws-icon-bg, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .why-split__feature-icon img {
    width: 28px;
    height: 28px;
    display: block;
  }

  .why-split__feature-text {
    flex: 1;
    min-width: 0;
  }

  .why-split__feature-title {
    font-weight: 600;
    font-size: var(--ws-title-size, 15px);
    color: var(--ws-title-color, #2d2d2d);
    margin-bottom: 2px;
    letter-spacing: 0.005rem;
  }

  .why-split__feature-desc {
    font-size: var(--ws-desc-size, 14px);
    color: var(--ws-desc-color, #666666);
    line-height: 1.4;
    letter-spacing: 0.01rem;
  }

  .why-split__feature-desc p {
    margin: 0;
  }

  .why-split__cta {
    display: flex;
  }

  .why-split__button {
    display: inline-block;
    padding: 12px 17.6px;
    background: var(--ws-btn-bg, #151515);
    color: var(--ws-btn-text, #ffffff);
    font-family: inherit;
    font-size: var(--ws-btn-size, 12.8px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    border-radius: var(--ws-btn-radius, 10px);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .why-split__button:hover {
    opacity: 0.85;
  }

  @media (max-width: 767px) {
    .why-split-section {
      padding-bottom: var(--ws-pb-m, 60px);
    }

    .why-split__inner {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    /* Stacked: the photo always leads, whichever side it takes on desktop. */
    .why-split__inner--reverse .why-split__image {
      order: 0;
    }

    .why-split__image {
      min-height: var(--ws-image-min-m, 280px);
    }

    .why-split__content {
      padding: var(--ws-content-pad-m, 30px) 24px;
    }

    .why-split-section .why-split__heading {
      margin-bottom: 20px;
      font-size: var(--ws-heading-size-m, 28px);
    }

    .why-split__text p {
      font-size: var(--ws-text-size-m, 15px);
    }

    .why-split__feature-icon {
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
    }

    .why-split__feature-icon img {
      width: 24px;
      height: 24px;
    }

    .why-split__feature-title {
      font-size: var(--ws-title-size-m, 15px);
    }

    .why-split__feature-desc {
      font-size: var(--ws-desc-size-m, 14px);
    }

    /* Full-width CTA on mobile. The anchor is inline-block by default, so it
       shrink-wraps its text: it needs to become a block and be told to centre
       its own label, since text-align on the flex parent would not reach it. */
    .why-split__cta {
      display: block;
    }

    .why-split__button {
      display: block;
      width: 100%;
      text-align: center;
    }
  }
/* END_SECTION:why-split */
/* START_BLOCK:_announcement (INDEX:58) */
.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 {
    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;
  }

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

  .announcement-bar__content {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    position: relative;
  }

  .announcement-bar__text {
    margin: 0;
  }

  .announcement-bar__visual {
    max-width: 80px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .announcement-bar__visual img {
    width: {{ block.settings.image_width }}px;
    max-height: 24px;
    object-fit: contain;
  }

  .announcement-bar__visual svg {
    max-width: 100%;
    max-height: 100%;
  }
/* END_BLOCK:_announcement */
/* START_BLOCK:_header-logo (INDEX:83) */
.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:84) */
.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);
    }
  }

  /* Mobile menu drawer text size + optional weight (see --mobile-menu-font-weight on header-drawer) */
  @media screen and (max-width: 989px) {
    .menu-drawer .menu-drawer__menu-item-text {
      font-size: var(--mobile-menu-font-size) !important;
    }

    .menu-drawer .menu-drawer__menu-item--mainlist,
    .menu-drawer .menu-drawer__menu-item--parent {
      font-weight: var(--mobile-menu-font-weight, var(--menu-top-level-font-weight)) !important;
    }

    .menu-drawer .menu-drawer__menu-item--child {
      font-weight: var(--mobile-menu-font-weight, var(--menu-child-font-weight)) !important;
    }

    .menu-drawer__menu > .menu-drawer__list-item {
      min-height: var(--mobile-menu-item-height) !important;
    }
    
    .menu-drawer__menu-item--mainlist {
      min-height: var(--mobile-menu-item-height) !important;
    }
    
    .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
      min-height: var(--mobile-menu-item-height) !important;
    }
  }

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

  .header-menu-secondary {
    flex-shrink: 0;
    width: auto;
  }

  /* 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 sets --menu-horizontal-gap itself, so a value inherited from
     <header-menu> would lose. This two-class rule outranks that declaration
     and still falls back to the theme's own spacing when unset. */
  .header-menu .menu-list {
    --menu-horizontal-gap: var(--menu-gap-desktop, var(--gap-xl));
  }

  .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);
    letter-spacing: var(--menu-top-level-letter-spacing, 0.075em);
    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: 990px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

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

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

  /* Hover/active underline bar — DESKTOP ONLY. Same transform as header icons
     (header-actions) so one theme offset lines up. Bar uses .menu-list__link-title
     so top:50% is the text line center, not the tall padded link box. */
  .menu-list__link {
    position: relative;
  }

  @media screen and (min-width: 990px) {
    .menu-list__link-title {
      position: relative;
      display: inline-block;
    }

    .menu-list__link-title::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100%;
      height: var(--menu-hover-bar-thickness, 2px);
      background-color: var(--menu-hover-bar-color, currentColor);
      border-radius: 999px;
      transform: translate(-50%, var(--menu-hover-bar-offset, 12px)) scaleX(0);
      transform-origin: center;
      transition: transform var(--animation-speed) var(--animation-easing);
      pointer-events: none;
    }

    .menu-list__list-item:where(:hover, :focus-within) > .menu-list__link .menu-list__link-title::after,
    .menu-list__link[aria-expanded='true'] .menu-list__link-title::after {
      transform: translate(-50%, var(--menu-hover-bar-offset, 12px)) scaleX(1);
    }

    .menu-list__link--active .menu-list__link-title::after {
      transform: translate(-50%, var(--menu-hover-bar-offset, 12px)) scaleX(1);
    }

    .header.header--no-hover-bar-hover
      .menu-list__list-item:where(:hover, :focus-within)
      > .menu-list__link
      .menu-list__link-title::after,
    .header.header--no-hover-bar-hover .menu-list__link[aria-expanded='true'] .menu-list__link-title::after {
      transform: translate(-50%, var(--menu-hover-bar-offset, 12px)) scaleX(0);
    }

    .header.header--no-hover-bar-active .menu-list__link--active .menu-list__link-title::after {
      transform: translate(-50%, var(--menu-hover-bar-offset, 12px)) scaleX(0);
    }

    .header.header--no-hover-bar-hover.header--no-hover-bar-active .menu-list__link-title::after {
      content: none;
    }
  }

  .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 (min-width: 750px) {
    .mega-menu__link:not(.mega-menu__link--parent),
    .mega-menu__link:not(.mega-menu__link--parent) .mega-menu__link-title {
      font-size: var(--mega-menu-desktop-sub-font-size, var(--menu-child-font-size));
      font-weight: var(--mega-menu-desktop-sub-font-weight, var(--menu-child-font-weight));
    }

    .mega-menu__link--parent,
    .mega-menu__link--parent .mega-menu__link-title {
      font-size: var(--mega-menu-desktop-sub-font-size, var(--menu-parent-font-size));
      font-weight: var(--mega-menu-desktop-sub-font-weight, var(--menu-parent-font-weight));
    }
  }

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

  .mega-menu__link:has(.mega-menu__link-image),
  .mega-menu__link:has(.mega-menu__link-image-wrap),
  .mega-menu__link:has(.mega-menu__link-subtext) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
    gap: 0;
    align-items: stretch;
  }

  .mega-menu__link-subtext {
    display: block;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 400;
    margin-top: 0.2em;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .mega-menu__link-image-wrap {
    display: block;
    width: 100%;
    position: relative;
    aspect-ratio: var(--mega-menu-link-image-aspect, 1 / 1);
    overflow: hidden;
    border-radius: var(--menu-image-border-radius, 0);
    margin: 0;
    flex-shrink: 0;
  }

  .mega-menu__link-image-wrap .mega-menu__link-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 0;
  }

  /* Header hover bar: flush to bottom of image frame (matches .menu-list__link-title::after style). */
  @media screen and (min-width: 990px) {
    .mega-menu__link-image-wrap::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: var(--menu-hover-bar-thickness, 2px);
      background-color: var(--menu-hover-bar-color, currentColor);
      border-radius: 999px;
      transform: scaleX(0);
      transform-origin: center;
      transition: transform var(--animation-speed) var(--animation-easing);
      pointer-events: none;
      z-index: 1;
    }

    .mega-menu__link:has(.mega-menu__link-image-wrap):hover .mega-menu__link-image-wrap::after,
    .mega-menu__link:has(.mega-menu__link-image-wrap):focus-visible .mega-menu__link-image-wrap::after,
    .mega-menu__link:has(.mega-menu__link-image-wrap):focus-within .mega-menu__link-image-wrap::after {
      transform: scaleX(1);
    }

    .header.header--no-hover-bar-hover
      .mega-menu__link:has(.mega-menu__link-image-wrap):hover
      .mega-menu__link-image-wrap::after,
    .header.header--no-hover-bar-hover
      .mega-menu__link:has(.mega-menu__link-image-wrap):focus-visible
      .mega-menu__link-image-wrap::after,
    .header.header--no-hover-bar-hover
      .mega-menu__link:has(.mega-menu__link-image-wrap):focus-within
      .mega-menu__link-image-wrap::after {
      transform: scaleX(0);
    }

    .header.header--no-hover-bar-hover .mega-menu__link-image-wrap::after {
      content: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image-wrap) {
    color: #000000;

    &:hover,
    &:focus-visible {
      color: #000000;
    }

    .mega-menu__link-title {
      color: inherit;
      margin-top: 10px;
    }

    .mega-menu__link-subtext {
      color: rgb(0 0 0 / 0.6);
    }
  }

  /* 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)):not(:has(.mega-menu__link-image-wrap)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)):not(:has(.mega-menu__link-image-wrap))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: var(--mega-menu-link-image-aspect, 1 / 1);
    margin-bottom: 0;
    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));
    }
  }

  /* Centered mega row (no featured product/collection column): matches AG1-style card strip */
  .menu-list__submenu:has(.mega-menu.mega-menu--align-center:not(:has(.mega-menu__content))) .menu-list__submenu-inner {
    justify-content: center;
  }

  .mega-menu.mega-menu--align-center:not(:has(.mega-menu__content)) .mega-menu__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 240px));
      width: fit-content;
      max-width: 100%;
      margin-inline: auto;
      flex-wrap: nowrap;
    }
  }

  .mega-menu.mega-menu--align-center:not(:has(.mega-menu__content)) .mega-menu__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: auto;
    max-width: 100%;
    grid-template-columns: unset;
    grid-column: unset;

    @media screen and (min-width: 990px) {
      display: contents;
      width: 100%;
    }
  }

  .mega-menu.mega-menu--align-center:not(:has(.mega-menu__content)) .mega-menu__column {
    grid-column: unset;
    flex: 0 1 auto;
    min-width: min(100%, 10rem);
    max-width: 14rem;

    @media screen and (min-width: 990px) {
      flex: unset;
      min-width: 0;
      max-width: 240px;
      grid-column: span 1;
    }
  }

  @media screen and (min-width: 990px) {
    .mega-menu.mega-menu--align-center:not(:has(.mega-menu__content)) .mega-menu__column--collection-image {
      flex: unset;
      min-width: 0;
      max-width: 240px;
      grid-column: span 1;
    }

    .mega-menu.mega-menu--align-center:not(:has(.mega-menu__content)) .mega-menu__link:has(.mega-menu__link-image-wrap) {
      max-width: 240px;
      width: 100%;
    }

    .mega-menu.mega-menu--align-center:not(:has(.mega-menu__content)) .mega-menu__link-image-wrap {
      max-width: 240px;
      max-height: 240px;
      width: 100%;
      aspect-ratio: 1 / 1;
    }
  }

  .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:_product-details (INDEX:95) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 989px) {
    .product-information.section--page-width .product-details > .group-block,
    .section--page-width .product-details > .group-block {
      padding-inline: 0;
    }

    /* Mobile-specific padding - override all general padding */
    .product-details > .group-block {
      padding-top: var(--mobile-padding-top, var(--padding-block-start, 0)) !important;
      padding-bottom: var(--mobile-padding-bottom, var(--padding-block-end, 0)) !important;
      padding-left: var(--mobile-padding-left, var(--padding-inline-start, 0)) !important;
      padding-right: var(--mobile-padding-right, var(--padding-inline-end, 0)) !important;
    }

    .featured-product-information .product-details {
      padding-inline: 0 !important;
      justify-content: flex-start;
    }

    .featured-product-information .product-details > .group-block {
      width: 100%;
      max-width: 100%;
    }

    /* Featured product — full width on mobile only (tablet uses flex stack from section CSS) */
    @media screen and (max-width: 749px) {
      .featured-product-information .product-details {
        grid-column: 1 / -1 !important;
      }
    }

    /* Product page uses full width on mobile & tablet */
    .product-information:not(.featured-product-information) .product-details {
      grid-column: 1 / -1 !important;
    }
  }

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

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

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

    /* Fill height: stretch to match the media column, but grow with long content.
       Do not cap at viewport height — that clipped product details on short screens. */
    .full-height--desktop {
      height: auto;
      min-height: 100%;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, flex-start);
      min-height: 100%;
    }
  }
/* END_BLOCK:_product-details */
/* START_BLOCK:_product-media-gallery (INDEX:99) */
.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: 989px) {
    .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;
  }
  /* Dots under image styling */
  [data-slideshow-mobile-style="dots-under"] slideshow-controls {
    position: static !important;
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0;
    min-height: 30px;
  }

  [data-slideshow-mobile-style="dots-under"] .slideshow-controls__dots {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    mix-blend-mode: normal !important;
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  [data-slideshow-mobile-style="dots-under"] .slideshow-controls__dots button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--color-foreground) !important;
    opacity: 0.3 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
  }

  [data-slideshow-mobile-style="dots-under"] .slideshow-controls__dots button[aria-selected="true"] {
    opacity: 1 !important;
  }

  [data-slideshow-mobile-style="dots-under"] .slideshow-controls__dots button::after {
    display: none !important;
  }

  /* Hero-style carousel arrows (matches hero-carousel section) */
  .media-gallery--carousel slideshow-arrows.slideshow-arrows--hero {
    mix-blend-mode: normal;
    align-items: center;
    justify-content: unset;
  }

  .media-gallery--carousel slideshow-arrows.slideshow-arrows--hero .slideshow-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    background: #fff;
    opacity: 0.6;
    backdrop-filter: blur(4px);
    color: #211e3f;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    padding: 0;
    min-height: unset;
    pointer-events: auto;
  }

  .media-gallery--carousel slideshow-arrows.slideshow-arrows--hero .slideshow-control:hover {
    background: #DF8096;
    border-color: #DF8096;
    color: #fff;
  }

  .media-gallery--carousel slideshow-arrows.slideshow-arrows--hero .slideshow-control:disabled {
    display: none;
  }

  .media-gallery--carousel slideshow-arrows.slideshow-arrows--hero .slideshow-control--previous {
    left: -6px;
    border-radius: 0 50% 50% 0;
    width: 32px;
    height: 36px;
  }

  .media-gallery--carousel slideshow-arrows.slideshow-arrows--hero .slideshow-control--next {
    right: -6px;
    border-radius: 50% 0 0 50%;
    width: 32px;
    height: 36px;
  }

  .media-gallery--carousel slideshow-arrows.slideshow-arrows--hero .slideshow-control svg {
    width: 22px;
    height: 22px;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-arrows.slideshow-arrows--hero .slideshow-control--previous {
      left: 0;
      width: 40px;
      height: 40px;
    }

    .media-gallery--carousel slideshow-arrows.slideshow-arrows--hero .slideshow-control--next {
      right: 0;
      width: 40px;
      height: 40px;
    }
  }

  /* Mobile-specific padding override */
  @media screen and (max-width: 749px) {
    media-gallery.spacing-style {
      padding: 0 !important;
      --padding-block-start: 0px !important;
      --padding-block-end: 0px !important;
      --padding-inline-start: 0px !important;
      --padding-inline-end: 0px !important;
    }
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    media-gallery.spacing-style {
      padding-top: var(--mobile-padding-top, var(--padding-block-start, 0)) !important;
      padding-bottom: var(--mobile-padding-bottom, var(--padding-block-end, 0)) !important;
      padding-left: var(--mobile-padding-left, var(--padding-inline-start, 0)) !important;
      padding-right: var(--mobile-padding-right, var(--padding-inline-end, 0)) !important;
    }
  }
/* END_BLOCK:_product-media-gallery */
/* START_BLOCK:buy-buttons (INDEX:108) */
.buy-buttons-block {
    width: 100%;
  }

  /* ── Plan Cards Mode ── */
  .plan-cards-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    font-family: var(--font-body--family);
  }

  .plan-cards-block * {
    font-family: inherit;
    box-sizing: border-box;
  }

  .plan-cards-heading {
    font-size: 18px;
    font-weight: var(--font-h3--weight, 600);
    color: #000;
    font-family: var(--font-heading--family);
  }

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

  .plan-cards-item {
    margin: 0;
  }

  .plan-cards-btn {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease;
    overflow: hidden;
    position: relative;
  }

  .plan-cards-btn:hover {
    border-color: #6b7280;
  }

  .plan-cards-btn.selected {
    border-color: var(--pc-selected-border, #00572c);
    background: var(--pc-selected-bg, #daece3);
  }

  .plan-cards-eyebrow {
    text-align: center;
    background: var(--pc-eyebrow-bg, #00572c);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 5px 12px;
    margin: -12px -12px 14px -12px;
  }

  .plan-cards-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .plan-cards-radio {
    display: inline-flex;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid #9ca3af;
    border-radius: 50%;
    margin-top: 2px;
    position: relative;
    transition: border-color 0.2s ease;
  }

  .plan-cards-radio::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 10px; height: 10px;
    background: var(--pc-selected-border, #00572c);
    border-radius: 50%;
    transition: transform 0.2s ease;
  }

  .plan-cards-btn.selected .plan-cards-radio {
    border-color: var(--pc-selected-border, #00572c);
  }

  .plan-cards-btn.selected .plan-cards-radio::after {
    transform: translate(-50%, -50%) scale(1);
  }

  .plan-cards-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }

  .plan-cards-title {
    font-size: 18px;
    font-weight: var(--font-h3--weight, 600);
    font-family: var(--font-heading--family);
    color: #000;
    line-height: 1.3;
    letter-spacing: -0.02rem
  }

  .plan-cards-note {
    font-size: 0.875rem;
    color: #4b5563;
    font-weight: var(--font-body--weight, 400);
  }

  .plan-cards-price-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
    margin-left: auto;
  }

  .plan-cards-price-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .plan-cards-price {
    font-size: 1.125rem;
    font-weight: var(--font-h4--weight, 700);
    font-family: var(--font-heading--family);
    color: #000;
  }

  .plan-cards-compare {
    font-size: 0.8125rem;
    color: #6b7280;
    text-decoration: line-through;
    font-weight: 500;
  }

  .plan-cards-daily {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--pc-selected-border, #00572c);
  }

  /* Collapse/expand pattern using grid-template-rows.
     Uses minmax(0, Xfr) explicitly so iOS Safari (which inherits a min-content
     track size by default when grid items live inside a <button>) collapses the
     row all the way to 0 instead of leaving "ghost height" behind.
     overflow:clip + contain are GPU-friendly hints that force iOS to recomposite
     the row size on transition end, fixing the intermittent gap-below-OTP bug
     visible only on physical iPhone Safari. */
  .plan-cards-features-drawer {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    opacity: 0;
    margin-top: 0;
    margin-left: 26px;
    overflow: hidden;
    overflow: clip; /* progressive enhancement; falls back to hidden on older iOS */
    contain: layout;
    transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.28s ease;
  }

  /* Inner wrapper must allow itself to be clipped to 0 when the grid row is 0fr. */
  .plan-cards-features-drawer > * {
    overflow: hidden;
    min-height: 0;
  }

  .plan-cards-btn.selected .plan-cards-features-drawer {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
    margin-top: 10px;
  }

  .plan-cards-features-drawer:not(.plan-cards-features-drawer--otp) {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
    margin-top: 10px;
  }

  .plan-cards-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .plan-cards-features li {
    font-size: 0.875rem;
    color: #000;
    font-weight: var(--font-body--weight, 400);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .plan-cards-feat-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--pc-selected-border, #00572c);
  }

  .plan-cards-feat-icon--x {
    color: #ff0000;
  }

  .plan-cards-feat-svg {
    display: block;
  }

  .plan-cards-features--otp {
    flex-direction: row;
    gap: 12px;
  }

  .plan-cards-features--otp li {
    color: #000000;
  }

  .plan-cards-atc-btn {
    width: 100%;
    height: 56px;
    background: var(--pc-btn-bg, #007e40);
    color: var(--pc-btn-text, #fff);
    border: 1px solid var(--pc-btn-border, #000);
    border-radius: var(--pc-btn-radius, 9999px);
    font-size: var(--button-font-size-primary);
    font-weight: var(--button-font-weight-primary);
    font-family: var(--button-font-family-primary);
    text-transform: var(--button-text-case-primary);
    letter-spacing: normal;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: var(--pc-atc-margin-top, 4px);
    margin-bottom: var(--pc-atc-margin-bottom, 0px);
  }

  .plan-cards-atc-btn:hover,
  .plan-cards-atc-btn:focus-visible {
    background: var(--pc-btn-bg-hover, var(--pc-btn-bg, #007e40));
    color: var(--pc-btn-text-hover, var(--pc-btn-text, #fff));
  }

  .plan-cards-atc-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
  }

  /* Hide standalone OTP block when plan cards mode is active */
  .buy-buttons-block:has(.plan-cards-block) ~ .shopify-block:has(.one-time-purchase-wrapper),
  .buy-buttons-block:has(.plan-cards-block) ~ .shopify-block:has(.classic-otp-container) {
    display: none !important;
  }

  /* Hide Seal Subscriptions default widget when custom UI is enabled */
  .custom-subscription-selector ~ .product-form-buttons .sealsubs-target-element,
  .custom-subscription-selector ~ .product-form-buttons .sealsubs-container {
    display: none !important;
  }

  /* Hide Seal Subscriptions widget in Plan Cards mode */
  .buy-buttons-block:has(.plan-cards-block) .sealsubs-target-element,
  .buy-buttons-block:has(.plan-cards-block) .sealsubs-container,
  .buy-buttons-block:has(.plan-cards-block) [class*="sealsubs"],
  .buy-buttons-block:has(.plan-cards-block) [class*="sls-"] {
    display: none !important;
  }

  /* Custom subscription selector styling - matches quantity preset */
  .custom-subscription-selector {
    margin-bottom: 20px;
  }

  .subscription-heading {
    margin: 0 0 16px 0;
    color: #000;
    /* Default fallback */
    font-size: 18px; 
    font-weight: 600;
    letter-spacing: var(--sub-heading-letter-spacing, 0px);
  }

  @media screen and (min-width: 990px) {
    .subscription-heading {
      font-size: var(--sub-heading-size-desktop, 18px) !important;
    }
  }

  @media screen and (max-width: 989px) {
    .subscription-heading {
      font-size: var(--sub-heading-size-mobile, 16px) !important;
    }
  }

  /* Custom typography if preset is custom */
  .custom-subscription-selector[style*="--sub-heading-font-family"] .subscription-heading {
    font-family: var(--sub-heading-font-family);
    font-weight: var(--sub-heading-weight);
    color: var(--sub-heading-color);
    font-size: var(--sub-heading-font-size, 1rem);
    letter-spacing: var(--sub-heading-letter-spacing, 0px);
  }

  /* Typography presets for subscription heading */
  .subscription-heading--paragraph {
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
  }

  .subscription-heading--h1,
  .subscription-heading--h2,
  .subscription-heading--h3,
  .subscription-heading--h4,
  .subscription-heading--h5,
  .subscription-heading--h6 {
    font-family: var(--font-heading--family);
  }

  .subscription-heading--h1 { font-weight: var(--font-h1--weight); }
  .subscription-heading--h2 { font-weight: var(--font-h2--weight); }
  .subscription-heading--h3 { font-weight: var(--font-h3--weight); }
  .subscription-heading--h4 { font-weight: var(--font-h4--weight); }
  .subscription-heading--h5 { font-weight: var(--font-h5--weight); }
  .subscription-heading--h6 { font-weight: var(--font-h6--weight); }

  .custom-subscription-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .custom-subscription-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 12px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--button-border-radius, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
    box-shadow: none;
    overflow: visible !important; /* Allow badge to overlap */
  }

  /* Subscription Save Badge - duplicated from quantity preset */
  .subscription-save-badge {
    position: absolute;
    top: -8px;
    right: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    width: fit-content;
    line-height: 1;
    pointer-events: none;
  }

  /* Active/selected state */
  .custom-subscription-option:has(.custom-subscription-radio:checked) {
    border-color: rgba(0, 0, 0, 1);
    background: #DAECE3;
  }

  /* Cartoon shadow on active state only */
  body[data-button-style="cartoon"] .custom-subscription-option:has(.custom-subscription-radio:checked) {
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 1);
    border: 1px solid rgba(0, 0, 0, 1);
  }

  .custom-subscription-radio {
    margin-top: 4px;
    margin-right: 16px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: #2d7a2d;
  }

  .custom-subscription-content {
    flex: 1;
    position: relative;
  }

  .custom-subscription-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  .custom-subscription-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .custom-subscription-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding-top: 4px;
  }

  .custom-subscription-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    letter-spacing: -0.03rem;
  }

  .custom-subscription-subtitle {
    font-size: 12px;
    color: #4a5568;
    font-weight: 400;
    letter-spacing: -0.03rem;
  }

  .custom-subscription-promo {
    font-size: 16px;
    color: #000;
    font-weight: 500;
    letter-spacing: -0.03rem;
    line-height: 1.7;
  }

  .custom-subscription-price {
    font-size: 20px;
    font-weight: 800;
    color: #000;
    line-height: 1;
  }

  .custom-subscription-price-strike {
    font-size: 12px;
    color: #718096;
    text-decoration: line-through;
    font-weight: 500;
  }

  .custom-subscription-price-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
  }

  .custom-subscription-per-day {
    font-size: 12px;
    color: #007E40;
    font-weight: 700;
  }

  .subscription-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    width: fit-content;
    line-height: 1;
    white-space: nowrap;
  }

  .subscription-badge--yellow {
    background: #fbbf24;
    color: #000;
    position: absolute;
    top: -20px;
    left: 5px;
    z-index: 5;
  }

  /* Inactive State Text Colors - ONLY Left Text Affected */
  .custom-subscription-option:not(:has(:checked)) .custom-subscription-title,
  .custom-subscription-option:not(:has(:checked)) .custom-subscription-subtitle,
  .custom-subscription-option:not(:has(:checked)) .custom-subscription-promo {
    color: #000000bf;
  }

  /* Custom Radio Button Styling */
  .custom-subscription-radio {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 4px;
    margin-right: 16px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    background-color: transparent;
    display: grid;
    place-content: center;
    transition: all 0.2s ease;
  }

  .custom-subscription-radio::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: scale(0);
    transition: 0.2s transform ease-in-out;
    background-color: #00391D; /* Dot color */
  }

  .custom-subscription-radio:checked {
    border: 2px solid #00391D;
    background-color: transparent; /* "same color as the card" which is background of parent */
  }

  .custom-subscription-radio:checked::before {
    transform: scale(1);
  }

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

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

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

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

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

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

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

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

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

  /* Promo banner styles */
  .promo-banner {
    padding: 6px 16px;
    line-height: 1.4;
  }

  .promo-banner--width-full {
    width: 100%;
  }

  .promo-banner--width-fit {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
  
  .promo-banner p {
    margin: 0;
  }
  
  @media screen and (max-width: 989px) {
    .promo-banner {
      font-size: var(--fs-promo-m) !important;
    }
    
    /* Fix mobile spacing for buy buttons block */
    .buy-buttons-block {
      margin-top: 20px;
    }
  }
  
  .promo-banner p {
    margin: 0;
  }
  
  @media screen and (max-width: 989px) {
    .promo-banner {
      font-size: var(--fs-promo-m) !important;
    }
    
    /* Fix mobile spacing for buy buttons block */
    .buy-buttons-block {
      margin-top: 10px;
    }
  }

  /* Typography presets for promo banner */
  .promo-banner--paragraph {
    font-family: var(--font-body--family);
    font-size: var(--font-body--size);
    font-weight: var(--font-body--weight);
  }

  .promo-banner--h1,
  .promo-banner--h2,
  .promo-banner--h3,
  .promo-banner--h4,
  .promo-banner--h5,
  .promo-banner--h6 {
    font-family: var(--font-heading--family);
  }

  .promo-banner--h1 { font-size: var(--font-h1--size); font-weight: var(--font-h1--weight); }
  .promo-banner--h2 { font-size: var(--font-h2--size); font-weight: var(--font-h2--weight); }
  .promo-banner--h3 { font-size: var(--font-h3--size); font-weight: var(--font-h3--weight); }
  .promo-banner--h4 { font-size: var(--font-h4--size); font-weight: var(--font-h4--weight); }
  .promo-banner--h5 { font-size: var(--font-h5--size); font-weight: var(--font-h5--weight); }
  .promo-banner--h6 { font-size: var(--font-h6--size); font-weight: var(--font-h6--weight); }

  .promo-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
    margin: 0 4px;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
  }

  .promo-code-copy[data-dashed="true"] {
    border: 1px dashed currentColor;
  }

  .promo-code-text {
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .promo-code-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
  }

  .promo-code-icon--copy {
    display: block !important;
  }

  .promo-code-icon--check {
    display: none !important;
  }

  .promo-code-copy.copied .promo-code-icon--copy {
    display: none !important;
  }

  .promo-code-copy.copied .promo-code-icon--check {
    display: block !important;
  }

  /* Button overrides - only override specific properties when set */
  .product-form-buttons[style*="--button-background"] .button {
    background-color: var(--button-background) !important;
  }
  
  .product-form-buttons[style*="--button-text-color"] .button {
    color: var(--button-text-color) !important;
  }
  
  .product-form-buttons[style*="--button-border-radius"] .button {
    border-radius: var(--button-border-radius) !important;
  }
/* END_BLOCK:buy-buttons */
/* START_BLOCK:countdown-timer (INDEX:113) */
.countdown-timer-wrapper {
    width: 100%;
    padding-top: 6px !important;
    padding-bottom: 20px !important;
  }

  .countdown-timer-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .countdown-timer-bar {
    width: 100%;
    height: 10px;
    background-color: #f7f7f7;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 7px;
  }

  .countdown-timer-progress {
    height: 100%;
    background-color: #df8096;
    transition: width 0.3s ease;
    border-radius: 0px;
  }

  .countdown-timer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .countdown-timer-prefix {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02rem;
  }

  .countdown-timer-end {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #df8096;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02rem;
  }

  .countdown-timer-time {
    color: #df8096;
    font-weight: 500;
  }

  @media (max-width: 768px) {
    .countdown-timer-container {
      width: 100%;
    }
  }

  .product__subheading,
  .product__subheading p,
  .countdown-timer-prefix,
  .countdown-timer-end,
  .countdown-timer-time {
    letter-spacing: 0.02rem;
  }
/* END_BLOCK:countdown-timer */
/* START_BLOCK:email-signup (INDEX:115) */
.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;
    }
  }

  /* The rule above keys off the viewport, so a narrow container on a wide
     screen (a footer column, for instance) still splits input and button side
     by side and leaves the field unusably narrow. Stack on container width
     instead. Browsers without container query support keep the old behaviour. */
  .email-signup-block {
    container-type: inline-size;
  }

  @container (max-width: 320px) {
    .email-signup__input-group:not(:has(.email-signup__button--arrow)) {
      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:image (INDEX:124) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio-mobile);
    overflow: hidden;
  }

  placeholder-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio-mobile);
  }

  @media screen and (min-width: 750px) {
    .placeholder-image {
      aspect-ratio: var(--ratio);
    }

    placeholder-image img {
      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-mobile);
  }

  @media screen and (min-width: 750px) {
    .image-block__image {
      aspect-ratio: var(--ratio);
    }
  }

  /* 3D Cartoon Effect */
  .image-block--cartoon .image-block__image,
  .image-block--cartoon .placeholder-image {
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 1);
  }

  @media screen and (min-width: 990px) {
    .image-block.hide-desktop {
      display: none;
    }
  }

  @media screen and (max-width: 989px) {
    .image-block.hide-mobile {
      display: none;
    }
  }
/* END_BLOCK:image */
/* START_BLOCK:menu (INDEX:128) */
.menu {
    width: 100%;
  }

  /* Desktop / mobile visibility */
  @media screen and (min-width: 990px) {
    .menu--hide-desktop {
      display: none !important;
    }
  }

  @media screen and (max-width: 989px) {
    .menu--hide-mobile {
      display: none !important;
    }
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu--follow-group-align.menu--layout-vertical .menu__details {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment, flex-start);
    text-align: unset;
  }

  .menu--follow-group-align.menu--layout-vertical .details-content {
    width: 100%;
  }

  .menu--layout-vertical .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu--layout-vertical .menu__details,
  .menu--layout-vertical .menu__heading {
    text-align: var(--menu-text-align-desktop, left);
  }

  .menu--layout-vertical .details-content > ul.list-unstyled {
    display: flex;
    flex-direction: column;
    align-items: var(--menu-horizontal-align-desktop, flex-start);
    width: 100%;
  }

  .menu--layout-vertical .menu__item {
    width: fit-content;
    max-width: 100%;
  }

  .menu--follow-group-align.menu--layout-vertical .details-content > ul.list-unstyled {
    align-items: var(--horizontal-alignment, flex-start);
  }

  .menu--layout-horizontal .details-content > ul.list-unstyled {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: var(--menu-horizontal-align-desktop, flex-start);
    gap: var(--spacing--size);
    width: 100%;
  }

  .menu--layout-horizontal .menu__item + .menu__item {
    margin-block-start: 0;
  }

  .menu--link-size-override .menu__item a {
    font-size: var(--menu-link-fs-mobile) !important;
  }

  @media screen and (min-width: 990px) {
    .menu--link-size-override .menu__item a {
      font-size: var(--menu-link-fs-desktop) !important;
    }
  }

  .menu--colors-override .menu__heading,
  .menu--colors-override .menu__heading__default,
  .menu--colors-override .menu__heading__accordion {
    color: var(--menu-heading-color);
  }

  .menu--colors-override .menu__heading__toggle {
    color: var(--menu-heading-color);
  }

  .menu--colors-override .menu__item a {
    color: var(--menu-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .menu--colors-override .menu__item a:hover,
  .menu--colors-override .menu__item a:focus-visible {
    color: var(--menu-link-hover-color);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 989px) {
    .menu--layout-vertical .menu__details,
    .menu--layout-vertical .menu__heading {
      text-align: var(--menu-text-align-mobile, var(--menu-text-align-desktop, left));
    }

    .menu--layout-vertical .details-content > ul.list-unstyled {
      align-items: var(--menu-horizontal-align-mobile, var(--menu-horizontal-align-desktop, flex-start));
    }

    .menu--layout-horizontal .details-content > ul.list-unstyled {
      justify-content: var(--menu-horizontal-align-mobile, var(--menu-horizontal-align-desktop, flex-start));
    }

    /* 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:payment-icons (INDEX:132) */
.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:price (INDEX:135) */
.tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }

  .price-with-savings {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
  }

  .price-with-savings [ref='priceContainer'] {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
  }

  .price-with-savings--hide-decimals [ref='priceContainer'] {
    gap: 12px;
  }

  .price-with-savings .price {
    color: var(--sale-price-color, var(--color-sale-price));
    font-size: var(--sale-price-font-size-mobile, var(--sale-price-font-size));
    font-family: var(--sale-price-font-family);
    font-weight: var(--sale-price-font-weight);
    line-height: var(--sale-price-line-height);
    text-transform: var(--sale-price-text-transform);
    letter-spacing: var(--sale-price-letter-spacing);
  }

  .price-with-savings .compare-at-price {
    color: var(--compare-price-color, var(--color-compare-at-price)) !important;
    font-size: var(--compare-price-font-size-mobile, var(--compare-price-font-size));
    font-family: var(--compare-price-font-family);
    font-weight: var(--compare-price-font-weight);
    line-height: var(--compare-price-line-height);
    text-transform: var(--compare-price-text-transform);
    letter-spacing: var(--compare-price-letter-spacing);
  }

  @media screen and (min-width: 750px) {
    .price-with-savings .price {
      font-size: var(--sale-price-font-size);
    }

    .price-with-savings .compare-at-price {
      font-size: var(--compare-price-font-size);
    }
  }

  .price-with-savings--compare-match-sale .compare-at-price {
    text-decoration-thickness: 1px;
    text-decoration-offset: 0.1em;
  }

  .savings-badge {
    display: inline-block;
    background-color: var(--savings-badge-background, var(--color-sale-price));
    color: var(--savings-badge-text, var(--color-background));
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: var(--savings-badge-font-size);
    font-weight: var(--savings-badge-font-weight);
    white-space: nowrap;
    font-family: var(--savings-badge-font-family);
    line-height: var(--savings-badge-line-height);
    text-transform: var(--savings-badge-text-transform);
    letter-spacing: var(--savings-badge-letter-spacing);
  }

  .product-tag-badge {
    display: inline-block;
    background-color: var(--product-tag-badge-bg, #bf0505);
    color: var(--product-tag-badge-text, #ffffff);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--font-body--family);
    font-size: var(--product-tag-badge-font-size, 11px);
    font-weight: var(--product-tag-badge-font-weight, 600);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
  }
/* END_BLOCK:price */
/* START_BLOCK:product-accordion (INDEX:136) */
.product__accordions {
    width: 100%;
    align-self: stretch;
    padding-bottom: var(--PBB, 10px);
  }

  .product__accordion {
    border-bottom: 1px solid #e2e2e2;
    padding: 0 0 10px;
    background-color: transparent;
  }

  .product__accordion__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
    color: #151515;
    list-style: none;
    /* This row is a control, not copy. Without these, toggling it repeatedly
       selects the heading text (the selection paints grey while the document
       is unfocused) and every tap on mobile washes it in the default blue-grey
       tap highlight. Both read as "the heading turns grey". */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* base.css:1740 recolours every <summary> on hover to --color-primary-hover,
     which resolves to rgb(0 0 0 / 0.53) and greys this heading. The label has
     no colour of its own, so it inherits that too. Hold the resting colour on
     both: .product__accordion__title:hover (0,2,0) outranks summary:hover. */
  .product__accordion__title:hover,
  .product__accordion__title:hover .product__accordion__label,
  .product__accordion__title:hover .icon {
    color: #151515;
  }

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

  .product__accordion__title::marker {
    content: "";
  }

  .product__accordion__label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }

  .product__accordion__title .icon {
    flex-shrink: 0;
    width: 16px;
    height: 26px;
    color: #151515;
    stroke-width: 12;
  }

  .product__accordion .icon-toggle-minus,
  .product__accordion[open] .icon-toggle-plus {
    display: none;
  }

  .product__accordion[open] .icon-toggle-minus {
    display: block;
  }

  .product__accordion__inner {
    padding: 10px 0 5px;
    font-size: 14.4px;
    line-height: 22.5px;
    color: #151515;
  }

  .product__accordion__inner p {
    margin: 0 0 14.4px;
  }

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

  .product__accordion__inner ol,
  .product__accordion__inner ul {
    margin: 0 0 14.4px;
    padding-left: 20px;
  }

  #usps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 10px;
    margin-top: 20px;
  }

  #usps .cell {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: flex-start;
    gap: 12px;
  }

  #usps .cell img {
    width: 25px;
    height: 25px;
  }

  #usps .cell p {
    margin: 0;
    font-size: 14.4px;
    font-weight: 400;
    line-height: 20.16px;
  }

  .accordion-content-image {
    margin-top: 10px;
  }

  .accordion-content-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
  }

  .accordion__popup-link {
    margin-top: 10px;
  }

  .accordion__popup-link a {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Ingredient popup */
  .accordion-popup {
    width: min(800px, calc(100vw - 32px));
    max-height: 576px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    /* Explicit colour, not --color-background: that variable resolves to
       transparent inside the dialog's colour-scheme context, which left the
       popup see-through. */
    background: var(--popup-bg, #ffffff);
    color: #151515;
    overflow: hidden;
  }

  .accordion-popup::backdrop {
    background: rgba(0, 0, 0, 0.45);
  }

  .accordion-popup__inner {
    position: relative;
    max-height: 576px;
    overflow-y: auto;
    padding: 40px;
    font-family: var(--font-body--family);
  }

  /* The panel only takes focus so the dialog traps it; never draw a ring here. */
  .accordion-popup__inner:focus,
  .accordion-popup__inner:focus-visible {
    outline: none;
  }

  /* Tapping the button on a touch device must not leave the circular ring
     behind either. Keyboard users still get it via :focus-visible. */
  .accordion-popup__close:focus:not(:focus-visible) {
    outline: none;
  }

  .accordion-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
    padding: 0 0 16px;
    border-bottom: 1px solid #e5e5e5;
  }

  .accordion-popup__close {
    flex-shrink: 0;
    /* Pull the button's own padding back so its glyph aligns with the panel's
       right padding edge, keeping the rule the full content width. */
    margin: 0 -8px 0 0;
    width: 40px;
    height: 43px;
    padding: 8px;
    border: 0;
    border-radius: 30px;
    background: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #333333;
  }

  .accordion-popup__title {
    margin: 0;
    padding: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 26.25px;
  }

  .accordion-popup__content {
    font-size: 16px;
    line-height: 25px;
  }

  .accordion-popup__content p {
    margin: 0 0 16px;
  }

  /* 40px of padding is too generous once the panel is near the viewport edge. */
  @media (max-width: 600px) {
    .accordion-popup__inner {
      padding: 24px;
    }
  }

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

  /* Consistent tracking across every text element in this block. */
  .product__accordion__label,
  .product__accordion__inner,
  .product__accordion__inner p,
  .product__accordion__inner li,
  #usps .cell p,
  .accordion__popup-link a,
  .accordion-popup__title,
  .accordion-popup__content,
  .accordion-popup__content p,
  .accordion-popup__content li {
    letter-spacing: 0.02rem;
  }
/* END_BLOCK:product-accordion */
/* START_BLOCK:product-feature (INDEX:141) */
.product__features {
    width: 100%;
    align-self: stretch;
  }

  .product__feature {
    background-color: var(--bg, #f7f7f7);
    color: var(--text, #000000);
    border: var(--feature-border, 2px solid #df8096);
    border-radius: var(--feature-radius, 8px);
    padding: var(--feature-padding, 20px);
  }

  .product__feature__content {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .product__feature__icon__container {
    flex-shrink: 0;
  }

  .product__icon {
    width: var(--icon-size, 50px);
    height: var(--icon-size, 50px);
  }

  .product__icon__holder {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
  }

  .product__icon__holder figure {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  .product__icon__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: block;
  }

  .product__feature__heading h5 {
    margin: 0;
    color: var(--heading, #000000);
    font-size: var(--heading-size, 19.4px);
    font-weight: 600;
    line-height: 1.25;
  }

  .product__feature__text {
    margin-top: 10px;
  }

  .product__feature__text p {
    margin: 0;
    color: var(--text, #000000);
    font-size: var(--text-size, 14.4px);
    font-weight: 400;
    line-height: 1.56;
    letter-spacing: var(--text-tracking, 0.02rem);
  }

  .product__feature__heading h5,
  .product__feature__text p {
    letter-spacing: 0.02rem;
  }
/* END_BLOCK:product-feature */
/* START_BLOCK:quantity-break (INDEX:151) */
.qb {
    display: block;
    width: 100%;
    padding-top: var(--qb-padding-top, 0px);
    padding-bottom: var(--qb-padding-bottom, 10px);
    font-family: var(--font-body--family);
    letter-spacing: normal;
  }

  .qb__bars {
    display: flex;
    flex-direction: column;
    gap: var(--qb-gap, 11px);
  }

  .qb__bar {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: var(--qb-bg, #f7f7f7);
    border: 1px solid var(--qb-border, rgba(223, 128, 150, 0.3));
    border-radius: var(--qb-radius, 10px);
    cursor: pointer;
    overflow: hidden;
  }

  .qb__bar.is-selected {
    background: var(--qb-bg-selected, #ffffff);
    border-color: var(--qb-border-selected, #df8096);
  }

  .qb__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .qb__header {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: start;
    width: 100%;
  }

  .qb__radio {
    width: 18px;
    height: 18px;
    margin-top: 4px;
    border: 2px solid #cfcfcf;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

  .qb__bar.is-selected .qb__radio {
    border-color: var(--qb-border-selected, #df8096);
  }

  .qb__bar.is-selected .qb__radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--qb-border-selected, #df8096);
  }

  .qb__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }

  .qb__first-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .qb__title {
    font-size: var(--qb-title-size, 18px);
    font-weight: 700;
    color: var(--qb-title-color, #151515);
    line-height: 1.2;
    letter-spacing: normal;
  }

  .qb__subtitle {
    font-size: var(--qb-subtitle-size, 13px);
    font-weight: 400;
    color: var(--qb-subtitle-color, #555555);
    line-height: 1.3;
    letter-spacing: normal;
  }

  .qb__pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    text-align: right;
  }

  .qb__price {
    font-size: var(--qb-price-size, 16px);
    font-weight: 700;
    color: var(--qb-price-color, #151515);
    letter-spacing: normal;
    line-height: 1.2;
  }

  .qb__compare {
    font-size: var(--qb-compare-size, 13px);
    font-weight: 400;
    color: var(--qb-compare-color, #555555);
    text-decoration: line-through;
    letter-spacing: normal;
    line-height: 1.2;
  }

  .qb__label {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--qb-label-bg, #df8096);
    color: var(--qb-label-color, #ffffff);
    font-size: var(--qb-label-size, 11px);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1;
    white-space: nowrap;
  }

  .qb__gifts {
    display: flex;
    flex-direction: column;
    /* Full-bleed: cancel the card's 14px/16px padding so gift rows span edge to edge
       (Glooshe / Kaching Bundles layout). The card's overflow:hidden keeps the
       bottom corners rounded. */
    margin: 12px -16px -14px;
    color: var(--qb-gift-color, #151515);
  }

  .qb__bar.is-selected .qb__gifts {
    color: var(--qb-gift-color-selected, #ffffff);
  }

  .qb__gift {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px 10px;
    padding: 8px 16px 8px 12px;
    background: var(--qb-gift-bg, #f7f7f7);
    color: inherit;
    border-radius: 0;
  }

  .qb__bar.is-selected .qb__gift {
    background: var(--qb-gift-bg-selected, #df8096);
  }

  .qb__gift + .qb__gift {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  .qb__bar.is-selected .qb__gift + .qb__gift {
    border-top-color: rgba(255, 255, 255, 0.25);
  }

  .qb__gift-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .qb__gift-image {
    width: var(--qb-gift-image, 30px);
    height: var(--qb-gift-image, 30px);
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
    display: block;
  }

  .qb__gift-text {
    font-size: var(--qb-gift-size, 12px);
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.3;
  }

  .qb__gift-price {
    font-size: calc(var(--qb-gift-size, 12px) - 1px);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.3;
    text-decoration: line-through;
    flex-shrink: 0;
    opacity: 0.95;
  }

  .qb .quantity-preset-input {
    display: none;
  }
/* END_BLOCK:quantity-break */
/* START_BLOCK:reviews-badge (INDEX:157) */
.reviews-badge-link {
    display: inline-flex;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  .reviews-badge {
    display: flex;
    align-items: center;
    gap: var(--reviews-badge-gap, 8px);
    flex-wrap: wrap;
  }

  .reviews-badge[data-alignment="left"] {
    justify-content: flex-start;
  }

  .reviews-badge[data-alignment="center"] {
    justify-content: center;
  }

  .reviews-badge[data-alignment="right"] {
    justify-content: flex-end;
  }

  .reviews-badge__stars {
    display: flex;
    gap: var(--reviews-badge-star-gap, 2px);
    align-items: center;
    flex-shrink: 0;
  }

  .reviews-badge__star-icon {
    width: var(--reviews-badge-star-size, 16px);
    height: var(--reviews-badge-star-size, 16px);
    color: var(--reviews-badge-star-color, #00B67A);
  }

  .reviews-badge__text {
    font-size: var(--reviews-badge-text-size, 14px);
    color: var(--reviews-badge-text-color, inherit);
    line-height: 1.4;
  }

  .reviews-badge__text p {
    margin: 0;
    letter-spacing: normal;
  }

  .reviews-badge__text strong,
  .reviews-badge__highlight {
    color: var(--reviews-badge-highlight-color, inherit);
  }

  .reviews-badge__text--mobile {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .reviews-badge__star-icon {
      width: var(--reviews-badge-star-size-mobile, 14px);
      height: var(--reviews-badge-star-size-mobile, 14px);
    }

    .reviews-badge__text {
      font-size: var(--reviews-badge-text-size-mobile, 12px);
    }

    .reviews-badge__text--desktop {
      display: none;
    }

    .reviews-badge__text--mobile {
      display: block;
    }
  }
/* END_BLOCK:reviews-badge */
/* START_BLOCK:social-proof (INDEX:160) */
.social-proof {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--social-proof-gap, 10px);
    padding-top: var(--social-proof-padding-top, 0px);
    padding-bottom: var(--social-proof-padding-bottom, 0px);
    color: var(--social-proof-text-color, #151515);
    font-family: var(--font-body--family);
  }

  .social-proof__avatars {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .social-proof__avatar {
    width: var(--social-proof-image-size, 32px);
    height: var(--social-proof-image-size, 32px);
    border-radius: 50%;
    overflow: hidden;
    background: #e8e8e8;
    border: 2px solid #ffffff;
    flex-shrink: 0;
    margin-left: calc(var(--social-proof-image-overlap, 10px) * -1);
  }

  .social-proof__avatar:first-child {
    margin-left: 0;
  }

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

  .social-proof__text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
    font-size: var(--social-proof-text-size-mobile, 13px);
    line-height: 1.3;
    letter-spacing: normal;
    color: inherit;
  }

  .social-proof__name,
  .social-proof__message {
    letter-spacing: normal;
  }

  .social-proof__name {
    font-weight: var(--social-proof-name-weight, 700);
  }

  .social-proof__message {
    font-weight: var(--social-proof-text-weight, 400);
  }

  .social-proof__check {
    display: inline-flex;
    color: var(--social-proof-check-bg, #2568ef);
    width: var(--social-proof-check-size, 16px);
    height: var(--social-proof-check-size, 16px);
    flex-shrink: 0;
  }

  .social-proof__check svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  @media screen and (min-width: 750px) {
    .social-proof__text {
      font-size: var(--social-proof-text-size, 14px);
    }
  }
/* END_BLOCK:social-proof */
/* START_BLOCK:stock-shipping-info (INDEX:163) */
/* The product info column is a flex column with align-items: flex-start, so
     children shrink to their content. Stretch this one to the full column
     width, otherwise the two halves sit next to each other instead of being
     pushed to opposite edges. */
  .stock-shipping-block {
    width: 100%;
    align-self: stretch;
  }

  #stockinfop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 0;
    list-style: none !important;
    font-family: var(--font-body--family);
    font-size: var(--ssi-font-size, 15.6px);
    font-weight: var(--ssi-font-weight, 500);
    line-height: 1.4;
    letter-spacing: 0.005rem;
  }

  /* The country code carries its own bold inline style, so it keeps that. The
     rest of the line follows the weight setting. */
  #stockinfop .stock-left span,
  #stockinfop .shipping_usp,
  #stockinfop .flag-emoji {
    font-weight: inherit;
  }

  #stockinfop .stock-left {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  #stockinfop .location-right {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  /* The source snippet only recoloured .pulsing-dot::before, assuming the dot
     itself was styled elsewhere. This theme has no such rule, so the shape and
     the pulse are defined here. */
  #stockinfop .pulsing-dot {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  #stockinfop .pulsing-dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: inherit;
    animation: stockinfop-pulse 1.8s ease-out infinite;
  }

  @keyframes stockinfop-pulse {
    0% {
      transform: scale(1);
      opacity: 0.7;
    }

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

  @media (prefers-reduced-motion: reduce) {
    #stockinfop .pulsing-dot::before {
      animation: none;
    }
  }

  #stockinfop,
  #stockinfop .stock-left span,
  #stockinfop .location-right span {
    letter-spacing: 0.02rem;
  }
/* END_BLOCK:stock-shipping-info */
/* START_BLOCK:usp-grid (INDEX:169) */
.usp-grid {
    display: grid;
    grid-template-columns: repeat(var(--usp-grid-columns-mobile, 2), minmax(0, 1fr));
    gap: var(--usp-grid-gap, 8px);
    width: 100%;
    padding-top: var(--usp-padding-top, 0px);
    padding-bottom: var(--usp-padding-bottom, 10px);
  }

  .usp-grid__item {
    display: flex;
    align-items: center;
    gap: var(--usp-item-gap, 10px);
    padding: var(--usp-item-padding-y, 10px) var(--usp-item-padding-x, 14px);
    background: var(--usp-item-bg, #f7f7f7);
    border-radius: var(--usp-item-radius, 8px);
    min-width: 0;
  }

  .usp-grid__icon {
    width: var(--usp-icon-size, 22px);
    height: var(--usp-icon-size, 22px);
    flex-shrink: 0;
    object-fit: contain;
    display: block;
  }

  .usp-grid__text {
    font-family: var(--font-body--family);
    font-size: var(--usp-text-size-mobile, 13px);
    font-weight: var(--usp-text-weight, 600);
    color: var(--usp-text-color, #2d2d2d);
    line-height: 1.3;
    letter-spacing: normal;
  }

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

    .usp-grid__text {
      font-size: var(--usp-text-size, 13px);
    }
  }
/* END_BLOCK:usp-grid */
/* START_SNIPPET:account-drawer (INDEX:174) */
.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:176) */
.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;
    }

    @supports not selector(:popover-open) {
      &.\: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:177) */
/* Case and tracking from the Add to cart block. Applied to the inner text
     nodes, not just the button, because the block's own typography rules set
     properties on .add-to-cart-text__content and would otherwise win. */
  .add-to-cart-block__wrapper .add-to-cart-text,
  .add-to-cart-block__wrapper .add-to-cart-text__content,
  .add-to-cart-block__wrapper .add-to-cart-text--added span:not(.svg-wrapper),
  .add-to-cart-block__wrapper .add-to-cart-text--error span:not(.svg-wrapper) {
    text-transform: var(--add-to-cart-text-transform, uppercase);
    letter-spacing: var(--add-to-cart-letter-spacing, 1.4px);
  }

  /* Size and weight without needing the Custom preset. Falls back to inherit,
     so leaving the settings blank changes nothing. Declared after the preset
     rules above so an explicit choice always wins. */
  @media screen and (max-width: 749px) {
    .add-to-cart-block__wrapper .add-to-cart-text__content,
    .add-to-cart-block__wrapper .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart-block__wrapper .add-to-cart-text--error span:not(.svg-wrapper) {
      font-size: var(--add-to-cart-mobile-font-size, inherit);
      font-weight: var(--add-to-cart-mobile-font-weight, inherit);
    }
  }

  @media screen and (min-width: 750px) {
    .add-to-cart-block__wrapper .add-to-cart-text__content,
    .add-to-cart-block__wrapper .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart-block__wrapper .add-to-cart-text--error span:not(.svg-wrapper) {
      font-size: var(--add-to-cart-desktop-font-size, inherit);
      font-weight: var(--add-to-cart-desktop-font-weight, inherit);
    }
  }


  /* Desktop Typography Presets */
  @media screen and (min-width: 750px) {
    .add-to-cart--desktop-h1 .add-to-cart-text__content,
    .add-to-cart--desktop-h1 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--desktop-h1 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h1--family);
      font-size: var(--font-h1--size);
      font-weight: var(--font-h1--weight);
      line-height: var(--font-h1--line-height);
      letter-spacing: var(--font-h1--letter-spacing);
      text-transform: var(--font-h1--case);
    }
    
    .add-to-cart--desktop-h2 .add-to-cart-text__content,
    .add-to-cart--desktop-h2 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--desktop-h2 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h2--family);
      font-size: var(--font-h2--size);
      font-weight: var(--font-h2--weight);
      line-height: var(--font-h2--line-height);
      letter-spacing: var(--font-h2--letter-spacing);
      text-transform: var(--font-h2--case);
    }
    
    .add-to-cart--desktop-h3 .add-to-cart-text__content,
    .add-to-cart--desktop-h3 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--desktop-h3 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h3--family);
      font-size: var(--font-h3--size);
      font-weight: var(--font-h3--weight);
      line-height: var(--font-h3--line-height);
      letter-spacing: var(--font-h3--letter-spacing);
      text-transform: var(--font-h3--case);
    }
    
    .add-to-cart--desktop-h4 .add-to-cart-text__content,
    .add-to-cart--desktop-h4 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--desktop-h4 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h4--family);
      font-size: var(--font-h4--size);
      font-weight: var(--font-h4--weight);
      line-height: var(--font-h4--line-height);
      letter-spacing: var(--font-h4--letter-spacing);
      text-transform: var(--font-h4--case);
    }
    
    .add-to-cart--desktop-h5 .add-to-cart-text__content,
    .add-to-cart--desktop-h5 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--desktop-h5 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h5--family);
      font-size: var(--font-h5--size);
      font-weight: var(--font-h5--weight);
      line-height: var(--font-h5--line-height);
      letter-spacing: var(--font-h5--letter-spacing);
      text-transform: var(--font-h5--case);
    }
    
    .add-to-cart--desktop-h6 .add-to-cart-text__content,
    .add-to-cart--desktop-h6 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--desktop-h6 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h6--family);
      font-size: var(--font-h6--size);
      font-weight: var(--font-h6--weight);
      line-height: var(--font-h6--line-height);
      letter-spacing: var(--font-h6--letter-spacing);
      text-transform: var(--font-h6--case);
    }
    
    .add-to-cart--desktop-paragraph .add-to-cart-text__content,
    .add-to-cart--desktop-paragraph .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--desktop-paragraph .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-body--family);
      font-size: var(--font-body--size);
      font-weight: var(--font-body--weight);
      line-height: var(--font-body--line-height);
      letter-spacing: var(--font-body--letter-spacing);
    }
    
    .add-to-cart--desktop-custom .add-to-cart-text__content,
    .add-to-cart--desktop-custom .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--desktop-custom .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--add-to-cart-desktop-font-family, inherit);
      font-size: var(--add-to-cart-desktop-font-size, inherit);
      font-weight: var(--add-to-cart-desktop-font-weight, inherit);
      color: var(--add-to-cart-desktop-color, inherit);
    }
  }
  
  /* Mobile Typography Presets */
  @media screen and (max-width: 749px) {
    .add-to-cart--mobile-h1 .add-to-cart-text__content,
    .add-to-cart--mobile-h1 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--mobile-h1 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h1--family);
      font-size: var(--font-h1--size);
      font-weight: var(--font-h1--weight);
      line-height: var(--font-h1--line-height);
      letter-spacing: var(--font-h1--letter-spacing);
      text-transform: var(--font-h1--case);
    }
    
    .add-to-cart--mobile-h2 .add-to-cart-text__content,
    .add-to-cart--mobile-h2 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--mobile-h2 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h2--family);
      font-size: var(--font-h2--size);
      font-weight: var(--font-h2--weight);
      line-height: var(--font-h2--line-height);
      letter-spacing: var(--font-h2--letter-spacing);
      text-transform: var(--font-h2--case);
    }
    
    .add-to-cart--mobile-h3 .add-to-cart-text__content,
    .add-to-cart--mobile-h3 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--mobile-h3 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h3--family);
      font-size: var(--font-h3--size);
      font-weight: var(--font-h3--weight);
      line-height: var(--font-h3--line-height);
      letter-spacing: var(--font-h3--letter-spacing);
      text-transform: var(--font-h3--case);
    }
    
    .add-to-cart--mobile-h4 .add-to-cart-text__content,
    .add-to-cart--mobile-h4 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--mobile-h4 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h4--family);
      font-size: var(--font-h4--size);
      font-weight: var(--font-h4--weight);
      line-height: var(--font-h4--line-height);
      letter-spacing: var(--font-h4--letter-spacing);
      text-transform: var(--font-h4--case);
    }
    
    .add-to-cart--mobile-h5 .add-to-cart-text__content,
    .add-to-cart--mobile-h5 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--mobile-h5 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h5--family);
      font-size: var(--font-h5--size);
      font-weight: var(--font-h5--weight);
      line-height: var(--font-h5--line-height);
      letter-spacing: var(--font-h5--letter-spacing);
      text-transform: var(--font-h5--case);
    }
    
    .add-to-cart--mobile-h6 .add-to-cart-text__content,
    .add-to-cart--mobile-h6 .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--mobile-h6 .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-h6--family);
      font-size: var(--font-h6--size);
      font-weight: var(--font-h6--weight);
      line-height: var(--font-h6--line-height);
      letter-spacing: var(--font-h6--letter-spacing);
      text-transform: var(--font-h6--case);
    }
    
    .add-to-cart--mobile-paragraph .add-to-cart-text__content,
    .add-to-cart--mobile-paragraph .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--mobile-paragraph .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--font-body--family);
      font-size: var(--font-body--size);
      font-weight: var(--font-body--weight);
      line-height: var(--font-body--line-height);
      letter-spacing: var(--font-body--letter-spacing);
    }
    
    .add-to-cart--mobile-custom .add-to-cart-text__content,
    .add-to-cart--mobile-custom .add-to-cart-text--added span:not(.svg-wrapper),
    .add-to-cart--mobile-custom .add-to-cart-text--error span:not(.svg-wrapper) {
      font-family: var(--add-to-cart-mobile-font-family, inherit);
      font-size: var(--add-to-cart-mobile-font-size, inherit);
      font-weight: var(--add-to-cart-mobile-font-weight, inherit);
      color: var(--add-to-cart-mobile-color, inherit);
    }
  }

  add-to-cart-component button {
    position: relative;
  }

  .add-to-cart-text {
    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }


  .atc-added .add-to-cart-text {
    animation-name: atc-slide-out;
  }

  .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text--added {
    animation-name: atc-slide-in;
  }

  .add-to-cart-text--loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
  }

  .add-to-cart-spinner {
    width: 1.25em;
    height: 1.25em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: atc-spinner 0.6s linear infinite;
  }

  .button.atc-loading .add-to-cart-text,
  .button.atc-loading .add-to-cart-text--added,
  .button.atc-loading .add-to-cart-text--error {
    visibility: hidden;
  }

  .button.atc-loading .add-to-cart-text--loading {
    display: flex;
  }

  @keyframes atc-spinner {
    to {
      transform: rotate(360deg);
    }
  }

  .add-to-cart-text--error {
    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-error .add-to-cart-text {
    animation-name: atc-slide-out;
  }
  
  .atc-error .add-to-cart-text--added {
    display: none;
  }

  .atc-error .add-to-cart-text--error {
    animation-name: atc-slide-in;
  }
  
  .atc-added .add-to-cart-text--error {
    display: none;
  }

  @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:cart-drawer (INDEX:195) */
/* Hide the cart drawer trigger when rendered without button (LP pages) */
  .cart-drawer--no-button {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
  }
  
  .cart-drawer--no-button .cart-drawer__dialog {
    pointer-events: auto;
  }

  .cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

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

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

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

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

  .cart-drawer__dialog {
    overflow: hidden;
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    right: 0;
    top: 0;
    background-color: var(--color-background);
  }

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

  /* While a cart update is in flight the items component carries
     .cart-items-disabled — cover the drawer with a translucent veil and a
     spinner instead of any visible teardown. */
  .cart-drawer__dialog:has(.cart-items-disabled)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(255 255 255 / 0.55);
    z-index: 20;
    animation: cart-drawer-veil-in 0.15s ease-out both;
  }

  .cart-drawer__dialog:has(.cart-items-disabled)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgb(0 0 0 / 0.12);
    border-top-color: rgb(0 0 0 / 0.6);
    border-radius: 50%;
    z-index: 21;
    animation: cart-drawer-veil-spin 0.7s linear infinite;
  }

  @keyframes cart-drawer-veil-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes cart-drawer-veil-spin {
    to { transform: rotate(360deg); }
  }

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

  .cart-drawer__empty-message .cart-drawer__continue-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .cart-drawer__empty-message .hero-carousel__cta-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .cart-drawer__empty-message .hero-carousel__cta-icon svg {
    width: 22px;
    height: 22px;
  }

  /* Override base.css dialog-modal mobile styles with higher specificity */
  @media screen and (max-width: 749px) {
    .cart-drawer__dialog.dialog-modal.dialog-drawer {
      width: var(--cart-mobile-width) !important;
      max-width: var(--cart-mobile-max-width) !important;
      margin: var(--cart-mobile-margin) !important;
      left: {% if settings.cart_drawer_full_width_mobile %}0{% else %}auto{% endif %} !important;
      right: 0 !important;
      border-left: {% if settings.cart_drawer_full_width_mobile %}none{% else %}var(--style-border-drawer){% endif %} !important;
    }
  }
/* END_SNIPPET:cart-drawer */
/* START_SNIPPET:cart-icon-component (INDEX:196) */
cart-icon {
    overflow: visible;
  }

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

  /* Cart icon label */
  .action__cart[data-label-desktop],
  .action__cart[data-label-mobile] {
    position: relative;
  }
  
  .action__cart[data-label-desktop]::after,
  .action__cart[data-label-mobile]::after {
    position: absolute;
    top: calc(100% - 4px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--2xs);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    z-index: 10;
  }

  @media screen and (min-width: 750px) {
    .action__cart[data-label-desktop]::after {
      content: attr(data-label-desktop);
    }
  }

  @media screen and (max-width: 749px) {
    .action__cart[data-label-mobile]::after {
      content: attr(data-label-mobile);
    }
  }
/* END_SNIPPET:cart-icon-component */
/* START_SNIPPET:divider (INDEX:211) */
.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(--divider-color, var(--color-border));
    border-right: var(--divider-border-thickness) solid var(--divider-color, 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);
    opacity: var(--divider-opacity, 1);
  }

  @media screen and (min-width: 990px) {
    .divider.hide-desktop {
      display: none;
    }
  }

  @media screen and (max-width: 989px) {
    .divider.hide-mobile {
      display: none;
    }
  }
/* END_SNIPPET:divider */
/* START_SNIPPET:group (INDEX:227) */
.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;
  }

  @media screen and (min-width: 990px) {
    .group-block.hide-desktop {
      display: none !important;
    }
  }

  @media screen and (max-width: 989px) {
    .group-block.hide-mobile {
      display: none !important;
    }
  }
/* END_SNIPPET:group */
/* START_SNIPPET:header-actions (INDEX:228) */
/* CRITICAL: Progress bar text styling - must be here to survive morphing */
  .cart-progress-bar__text {
    font-size: 15px !important;
    text-transform: none !important;
    -webkit-text-size-adjust: 100% !important;
    letter-spacing: 0rem !important;
    font-weight: 400 !important;
    margin-bottom: -5px !important;
  }

  /* CRITICAL: Discount code styling - must be here for first load */
  /* Matches the item-level discount code styling exactly */
  .cart-order-summary__discount-codes {
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .cart-order-summary__discount-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background-color: var(--cart-item-discount-bg-color, #f0f0f0);
    color: var(--cart-item-discount-text-color, #000);
    border-radius: 4px;
    font-size: 0.875rem;
    width: fit-content;
  }

  .cart-order-summary__discount-icon {
    flex-shrink: 0;
    color: var(--cart-item-discount-icon-color, #000);
  }

  .cart-order-summary__discount-text {
    line-height: 1.2;
  }

  .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;
    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);
    border-radius: 15px;
  }


  /* 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__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

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

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

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    padding: 1px 14px 14px 14px;
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */

    @media screen and (min-width: 990px) {
      --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: 990px) {
      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: 990px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

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

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

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

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

  .cart-drawer--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;
    overflow: visible;

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

  header-actions {
    gap: 0;
    padding-inline: 0;
  }

  @media screen and (max-width: 989px) {
    header-actions {
      padding-inline-end: 0;
    }
  }

  /* Only add spacing when labels are present, per breakpoint */
  @media screen and (min-width: 990px) {
    header-actions:has([data-label-desktop]) {
      gap: var(--gap-xs);
      padding-inline: var(--gap-xs);
    }
    header-actions:has([data-label-mobile]):not(:has([data-label-desktop])) {
      gap: 0;
      padding-inline: 0;
    }
  }

  @media screen and (max-width: 989px) {
    header-actions:has([data-label-mobile]) {
      gap: var(--gap-xs);
      padding-inline: var(--gap-xs);
    }
    header-actions:has([data-label-desktop]):not(:has([data-label-mobile])) {
      gap: 0;
      padding-inline: 0;
    }
  }

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

  .header-actions__action {
    --button-color: var(--color-foreground);

    /* Force header icons to use the scheme icon color */
    color: var(--color-icon, var(--color-foreground)) !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }

  /* Hover bar on every header icon (controlled by the Header section settings).
     Anchored to the icon button's vertical center and pushed down by the offset
     so it sits just below the icon and aligns with the menu link bar. */
  .header-actions__action,
  .account-button,
  cart-drawer-component > button.header-actions__action,
  .dropdown-localization__button,
  .header__icon--menu,
  .header__icon--summary {
    position: relative;
    align-items: center;
  }

  /* Header CTA button — keep it neatly aligned in the header row */
  .header__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin-inline: var(--gap-xs);
    line-height: 1;
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .header__button {
    }
  }

  /* MOBILE ONLY: when the mobile menu drawer is rendered inside <header-actions>,
     flatten its wrapper chain so the hamburger summary becomes a direct flex
     sibling of the cart/account icons and sits inline with them on the same line.
     We MUST keep this mobile-scoped — otherwise display:contents would override
     the .desktop:hidden class on .header__drawer and the hamburger would leak
     onto desktop. */
  @media screen and (max-width: 989px) {
    header-actions > .shopify-block:has(.header__drawer),
    header-actions .header__drawer,
    header-actions header-drawer {
      display: contents !important;
      min-height: 0 !important;
    }

    header-actions .menu-drawer-container {
      display: flex;
      align-items: center;
      margin-inline: 0;
    }

    header-actions .menu-drawer-container > .header__icon--summary {
      width: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      padding: 0;
      cursor: pointer;
    }

    /* Render the hamburger icon at 22px so it visually matches the other
       header icons (overrides the SVG's intrinsic 14×14 size). */
    header-actions .menu-drawer-container .header__icon--menu svg {
      width: 22px;
      height: 22px;
    }
  }

  /* DESKTOP-ONLY hover bar for every header icon */
  @media screen and (min-width: 990px) {
    .header-actions__action::before,
    .account-button::before,
    cart-drawer-component > button.header-actions__action::before,
    .dropdown-localization__button::before,
    .header__icon--menu::before,
    .header__icon--summary::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 70%;
      height: var(--menu-hover-bar-thickness, 2px);
      background-color: var(--menu-hover-bar-color, currentColor);
      border-radius: 999px;
      transform: translate(-50%, var(--menu-hover-bar-offset, 12px)) scaleX(0);
      transform-origin: center;
      transition: transform var(--animation-speed) var(--animation-easing);
      pointer-events: none;
      z-index: 1;
    }

    .header-actions__action:where(:hover, :focus-visible)::before,
    .account-button:where(:hover, :focus-visible, [aria-expanded='true'])::before,
    cart-drawer-component > button.header-actions__action:where(:hover, :focus-visible)::before,
    .dropdown-localization__button:where(:hover, :focus-visible, [aria-expanded='true'])::before,
    .header__icon--menu:where(:hover, :focus-visible)::before,
    .header__icon--summary:where(:hover, :focus-visible, [aria-expanded='true'])::before {
      transform: translate(-50%, var(--menu-hover-bar-offset, 12px)) scaleX(1);
    }

    .header.header--no-hover-bar-hover .header-actions__action:where(:hover, :focus-visible)::before,
    .header.header--no-hover-bar-hover .account-button:where(:hover, :focus-visible, [aria-expanded='true'])::before,
    .header.header--no-hover-bar-hover cart-drawer-component > button.header-actions__action:where(:hover, :focus-visible)::before,
    .header.header--no-hover-bar-hover .dropdown-localization__button:where(:hover, :focus-visible, [aria-expanded='true'])::before,
    .header.header--no-hover-bar-hover .header__icon--menu:where(:hover, :focus-visible)::before,
    .header.header--no-hover-bar-hover .header__icon--summary:where(:hover, :focus-visible, [aria-expanded='true'])::before {
      transform: translate(-50%, var(--menu-hover-bar-offset, 12px)) scaleX(0);
    }

    .header.header--no-hover-bar-icons .header-actions__action:where(:hover, :focus-visible)::before,
    .header.header--no-hover-bar-icons .account-button:where(:hover, :focus-visible, [aria-expanded='true'])::before,
    .header.header--no-hover-bar-icons cart-drawer-component > button.header-actions__action:where(:hover, :focus-visible)::before,
    .header.header--no-hover-bar-icons .dropdown-localization__button:where(:hover, :focus-visible, [aria-expanded='true'])::before,
    .header.header--no-hover-bar-icons .header__icon--menu:where(:hover, :focus-visible)::before,
    .header.header--no-hover-bar-icons .header__icon--summary:where(:hover, :focus-visible, [aria-expanded='true'])::before {
      transform: translate(-50%, var(--menu-hover-bar-offset, 12px)) scaleX(0);
    }

    .header.header--no-hover-bar-hover .header-actions__action::before,
    .header.header--no-hover-bar-hover .account-button::before,
    .header.header--no-hover-bar-hover cart-drawer-component > button.header-actions__action::before,
    .header.header--no-hover-bar-hover .dropdown-localization__button::before,
    .header.header--no-hover-bar-hover .header__icon--menu::before,
    .header.header--no-hover-bar-hover .header__icon--summary::before {
      content: none;
    }

    .header.header--no-hover-bar-icons .header-actions__action::before,
    .header.header--no-hover-bar-icons .account-button::before,
    .header.header--no-hover-bar-icons cart-drawer-component > button.header-actions__action::before,
    .header.header--no-hover-bar-icons .dropdown-localization__button::before,
    .header.header--no-hover-bar-icons .header__icon--menu::before,
    .header.header--no-hover-bar-icons .header__icon--summary::before {
      content: none;
    }

    /* In-drawer controls are not header icons — never show the menu hover bar */
    .cart-drawer__dialog .cart-drawer__close-button::before,
    .cart-drawer__dialog .cart__checkout-button::before {
      content: none;
      display: none;
    }
  }

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

  .header-actions__action svg {
    width: var(--header-icon-size-desktop);
    height: var(--header-icon-size-desktop);
    stroke-width: var(--icon-stroke-width);
  }

  @media screen and (max-width: 989px) {
    .header-actions__action svg {
      width: var(--header-icon-size-mobile);
      height: var(--header-icon-size-mobile);
    }
  }

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

    position: relative;
  }

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

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

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

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

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
  }

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

  .cart-bubble--animating .cart-bubble__text {
    animation: cartBubbleSlideIn var(--animation-speed) var(--animation-easing);
  }

  /* Icon labels - only shift/show when label exists for the breakpoint */
  @media screen and (min-width: 990px) {
    .header-actions__action[data-label-desktop],
    .account-button[data-label-desktop],
    cart-drawer-component > button.header-actions__action[data-label-desktop],
    .dropdown-localization__button[data-label-desktop],
    .header__icon--summary[data-label-desktop] {
      position: relative;
      overflow: visible;
      transform: translateY(-6px);
    }

    .header-actions__action[data-label-desktop]::after,
    .account-button[data-label-desktop]::after,
    cart-drawer-component > button.header-actions__action[data-label-desktop]::after,
    .dropdown-localization__button[data-label-desktop]::after,
    .header__icon--summary[data-label-desktop]::after {
      content: attr(data-label-desktop);
      position: absolute;
      top: calc(100% - 8px);
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-paragraph--family);
      font-size: var(--font-size--2xs);
      font-weight: var(--font-paragraph--weight);
      color: var(--color-foreground);
      line-height: 1.2;
      text-align: center;
      white-space: nowrap;
      z-index: 10;
    }
  }

  @media screen and (max-width: 989px) {
    .header-actions__action[data-label-mobile],
    .account-button[data-label-mobile],
    cart-drawer-component > button.header-actions__action[data-label-mobile],
    .dropdown-localization__button[data-label-mobile],
    .header__icon--summary[data-label-mobile] {
      position: relative;
      overflow: visible;
      transform: translateY(-6px);
    }

    .header-actions__action[data-label-mobile]::after,
    .account-button[data-label-mobile]::after,
    cart-drawer-component > button.header-actions__action[data-label-mobile]::after,
    .dropdown-localization__button[data-label-mobile]::after,
    .header__icon--summary[data-label-mobile]::after {
      content: attr(data-label-mobile);
      position: absolute;
      top: calc(100% - 8px);
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-paragraph--family);
      font-size: var(--font-size--2xs);
      font-weight: var(--font-paragraph--weight);
      color: var(--color-foreground);
      line-height: 1.2;
      text-align: center;
      white-space: nowrap;
      z-index: 10;
    }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:230) */
/*
    Drawer open: do NOT force position:sticky on .header-section — that swaps layout models and
    causes a visible jump. Keep the top row above the fixed sheet via z-index only.
  */
  html:has(header-drawer .menu-drawer-container:is([open], .menu-open)) #header-component.header {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html:has(header-drawer .menu-drawer-container:is([open], .menu-open))
    #header-component
    .header__row--top {
    position: relative;
    z-index: 2;
  }

  /*
    Do not give .menu-drawer and .menu-drawer__backdrop the same z-index: the backdrop is later in
    the DOM and paints on top. Its backdrop-filter: brightness(0.75) then darkens the panel —
    sampled ~#bfbfbf from white (191 ≈ 255×0.75), not your color scheme. Use theme layers:
    --layer-menu-drawer (18) above --layer-heightened (4).
  */

  .header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 990px) {
    .header--desktop header-menu + .header__drawer header-drawer {
      display: none;
    }
  }

  @media screen and (max-width: 989px) {
    .menu-drawer-container {
      margin-inline-start: var(--gap-xs);
      margin-inline-end: var(--gap-xs);
    }

    /* Ensure product prices in mobile menu use proper theme color scheme */
    .menu-drawer .resource-card .price {
      color: var(--color-sale-price) !important;
      font-weight: 600;
    }

    .menu-drawer .resource-card .compare-at-price {
      color: var(--color-compare-at-price) !important;
      text-decoration: line-through;
    }

    .menu-drawer .resource-card__title {
      color: var(--color-foreground) !important;
    }

    .menu-drawer .resource-card__subtext {
      color: rgb(var(--color-foreground-rgb) / 0.7) !important;
    }

    .menu-drawer .resource-card__content {
      color: var(--color-foreground) !important;
    }

    /* Menu dividers: inset line (not edge-to-edge). */
    .menu-drawer__list-item--divider {
      border-block-end: none;
      position: relative;
    }

    .menu-drawer__list-item--divider::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: var(--padding-lg);
      right: var(--padding-lg);
      height: var(--style-border-width);
      background-color: var(--color-border);
      pointer-events: none;
    }

    .menu-drawer__menu-container--divider {
      border-block-end: none;
    }

    .menu-drawer__menu-container--divider > summary {
      position: relative;
    }

    .menu-drawer__menu-container--divider > summary::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: var(--padding-lg);
      right: var(--padding-lg);
      height: var(--style-border-width);
      background-color: var(--color-border);
      pointer-events: none;
    }
  }

  @media screen and (min-width: 990px) {
    .menu-drawer-container {
      margin-inline: var(--gap-xs);
    }
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--button-size);
    width: var(--button-size);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  /* Hamburger + close share one slot in the header trigger (same position, same size). */
  .menu-drawer__trigger-icons {
    display: grid;
    place-items: center;
    position: relative;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__trigger-icons > .header-drawer-icon {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer-container:not([open]) .menu-drawer__trigger-icons .header-drawer-icon--close,
  .menu-drawer-container[open] .menu-drawer__trigger-icons .header-drawer-icon--open {
    display: none !important;
  }

  .menu-drawer-container:not([open]) .menu-drawer__trigger-icons .header-drawer-icon--open,
  .menu-drawer-container[open] .menu-drawer__trigger-icons .header-drawer-icon--close {
    display: flex !important;
  }

  @media screen and (max-width: 989px) {
    .menu-drawer__trigger-icons,
    .menu-drawer__trigger-icons > .header-drawer-icon {
      width: 22px;
      height: 22px;
    }

    .menu-drawer__trigger-icons svg {
      width: 22px;
      height: 22px;
    }
  }

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;

    @media screen and (min-width: 990px) {
      min-height: 0;
    }
  }

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

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 990px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  /* Primary close control is the header trigger (icon swap); hide duplicate panel button. */
  .menu-drawer > .menu-drawer__close-button--panel {
    display: none;
  }

  .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: 990px) {
      width: 25rem;
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  /*
   * Slide-over (not below-header): keep the real header visible in the bar.
   * Inset the drawer panel under --header-height so it doesn’t sit under the sticky header.
   */
  .header-drawer:not(.header-drawer--below-header) .menu-drawer-container.menu-open > .menu-drawer {
    top: var(--header-height, 60px);
    height: calc(100dvh - var(--header-height, 60px));
    max-height: calc(100dvh - var(--header-height, 60px));
  }

  .header-drawer:not(.header-drawer--below-header) .menu-drawer-container.menu-open > .menu-drawer__backdrop {
    top: var(--header-height, 60px);
    height: calc(100dvh - var(--header-height, 60px));
  }

  .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: 990px) {
      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;
  }

  /* Desktop slide-over only: wider symmetric gutter (--mobile-menu-text-inset from Header section; default page margin). Mobile keeps theme --drawer-padding. */
  @media screen and (min-width: 990px) {
    .header-drawer:not(.header-drawer--below-header) .menu-drawer__navigation > .menu-drawer__menu:not(.menu-drawer__menu--grid),
    .header-drawer:not(.header-drawer--below-header) .menu-drawer__inner-submenu > .menu-drawer__menu:not(.menu-drawer__menu--grid) {
      padding-inline: var(--mobile-menu-text-inset, var(--page-margin));
    }

    .header-drawer:not(.header-drawer--below-header) .menu-drawer__utility-links {
      margin-inline: var(--mobile-menu-text-inset, var(--page-margin));
    }

    .header-drawer:not(.header-drawer--below-header) .menu-drawer__back-button {
      padding-block: var(--padding-md);
      padding-inline: var(--mobile-menu-text-inset, var(--page-margin));
    }
  }

  .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: 990px) {
      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: 990px) {
      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: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */
  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    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);
  }

  /*
    Account row icon: must beat .menu-drawer svg and bucketed styles (use !important).
    --menu-drawer-account-icon-size can be overridden from header-drawer style if needed.
  */
  .menu-drawer .menu-drawer__account-row-icon {
    width: var(--menu-drawer-account-icon-size, 28px);
    height: var(--menu-drawer-account-icon-size, 28px);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .menu-drawer .menu-drawer__account-row-icon svg {
    width: var(--menu-drawer-account-icon-size, 28px) !important;
    height: var(--menu-drawer-account-icon-size, 28px) !important;
    min-width: var(--menu-drawer-account-icon-size, 28px);
    min-height: var(--menu-drawer-account-icon-size, 28px);
    display: block;
  }

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

  /* Account links under the menu list. Indented to line up with the menu
     items above, and sized down so they read as secondary to the nav. */
  .menu-drawer__account-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: var(--padding-sm) 0 0;
    padding: 0;
    list-style: none;
  }

  .menu-drawer__account-links-item {
    display: block;
  }

  .menu-drawer__account-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-inline: var(--mobile-menu-text-inset, var(--page-margin));
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
    text-decoration: none;
    letter-spacing: 0.02rem;
  }

  .menu-drawer__account-link:hover {
    text-decoration: underline;
  }

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

  /**
   * Full-width sheet under header: prefer live `#header-component` bottom in the viewport.
   * Body `--header-group-height` sums section wrappers and can be taller than the visible bar → gap.
   */
  .header-drawer--below-header {
    --below-header-sheet-top: var(--below-header-menu-top, var(--header-height, 60px));
  }

  .header-drawer--below-header .menu-drawer-container {
    margin-inline: 0;
  }

  .header-drawer--below-header .menu-drawer {
      top: var(--below-header-sheet-top);
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-width: none;
      height: auto;
      border-right: none;
      border-radius: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-shadow: none;
    }

    .header-drawer--below-header .menu-drawer__backdrop {
      top: var(--below-header-sheet-top);
      height: calc(100dvh - var(--below-header-sheet-top));
    }

    .header-drawer--below-header .menu-drawer__submenu {
      height: 100%;
    }

    /* Root + slide-in submenu primary list: align with header logo; deeper nested ul keep theme padding. */
    .header-drawer--below-header .menu-drawer__navigation > .menu-drawer__menu.has-submenu,
    .header-drawer--below-header .menu-drawer__inner-submenu > .menu-drawer__menu {
      padding-inline-start: var(--mobile-menu-text-inset, var(--page-margin));
      padding-inline-end: var(--drawer-padding);
      padding-block-start: 0;
      margin-block-start: 0;
    }

    /*
      Put spacing on each top-level <li> (not flex gap). Match any direct <li> (root items in the <3
      levels branch used to omit .menu-drawer__list-item, so li-only selectors stay reliable). Keep
      accordion rows in a column flex like flat links so bottom margin lines up the same visually.
      --margin-xs is tighter than the old flat-only --margin-md.
    */
    .header-drawer--below-header .menu-drawer__navigation > .menu-drawer__menu.has-submenu > li:not(:last-child),
    .header-drawer--below-header .menu-drawer__inner-submenu > .menu-drawer__menu > li:not(:last-child) {
      margin-block-end: var(--margin-xs) !important;
    }

    .header-drawer--below-header .menu-drawer__navigation > .menu-drawer__menu.has-submenu > li:last-child,
    .header-drawer--below-header .menu-drawer__inner-submenu > .menu-drawer__menu > li:last-child {
      margin-block-end: 0 !important;
    }

    .header-drawer--below-header .menu-drawer__navigation > .menu-drawer__menu.has-submenu > li.menu-drawer__list-item--deep {
      flex-direction: column;
      align-items: stretch;
    }

    /* Remove pull-up on nested panel so gap math stays even when details is closed. */
    .header-drawer--below-header .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
      margin-block-start: 0;
    }

    .header-drawer--below-header .menu-drawer__account-section {
      flex-shrink: 0;
      border-bottom: none;
      padding-inline-start: var(--mobile-menu-text-inset, var(--page-margin));
      padding-inline-end: var(--drawer-padding);
      padding-block-start: 18px;
      padding-block-end: 10px;
      position: relative;
    }

    .header-drawer--below-header .menu-drawer__account-section::after {
      content: '';
      display: block;
      height: var(--style-border-width);
      margin-inline: 0;
      margin-block-start: 18px;
      background-color: var(--color-border);
    }

    .header-drawer--below-header .menu-drawer__account-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--gap-md);
      min-height: var(--minimum-touch-target);
      text-decoration: none;
      color: #000000;
      font-family: var(--menu-top-level-font-family);
      font-size: 20px;
      font-weight: var(--mobile-menu-font-weight, var(--menu-top-level-font-weight));
    }

    .header-drawer--below-header .menu-drawer__account-row-label {
      font-size: 22px;
      color: #000000;
    }

    .header-drawer--below-header .menu-drawer__account-row-icon,
    .header-drawer--below-header .menu-drawer__account-row-icon svg {
      color: #000000;
    }

    /* Nav labels: true black (drawer color scheme “foreground” is often dark gray). */
    .header-drawer--below-header .menu-drawer__navigation .menu-drawer__menu-item--mainlist,
    .header-drawer--below-header .menu-drawer__navigation summary.menu-drawer__menu-item--mainlist,
    .header-drawer--below-header .menu-drawer__navigation .menu-drawer__menu-item--parent,
    .header-drawer--below-header .menu-drawer__navigation .menu-drawer__menu-item--child {
      color: #000000 !important;
    }

    .header-drawer--below-header .menu-drawer__navigation .menu-drawer__menu-item--mainlist:hover,
    .header-drawer--below-header .menu-drawer__navigation summary.menu-drawer__menu-item--mainlist:hover,
    .header-drawer--below-header .menu-drawer__navigation .menu-drawer__menu-item--parent:hover,
    .header-drawer--below-header .menu-drawer__navigation .menu-drawer__menu-item--child:hover {
      color: #000000 !important;
    }

    .header-drawer--below-header .menu-drawer__navigation .menu-drawer__menu-item-text {
      color: inherit !important;
    }

    /* Accordion rows: keep caret beside the label (not pinned to the far edge). */
    .header-drawer--below-header .menu-drawer__menu details > summary.menu-drawer__menu-item,
    .header-drawer--below-header accordion-custom details > summary.menu-drawer__menu-item {
      justify-content: flex-start;
      gap: var(--padding-2xs, 0.375rem);
    }

    .header-drawer--below-header
      .menu-drawer__menu
      details
      > summary.menu-drawer__menu-item
      > .menu-drawer__expand-icon--caret,
    .header-drawer--below-header
      accordion-custom
      details
      > summary.menu-drawer__menu-item
      > .menu-drawer__expand-icon--caret {
      margin-inline: 0;
      padding-inline: 0;
      padding-block: var(--padding-2xs);
      flex-shrink: 0;
    }

    .header-drawer--below-header .menu-drawer__expand-icon--caret svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
      color: #000000;
    }

    .header-drawer--below-header .menu-drawer__menu-item--child:not(.menu-drawer__menu-item--parent) {
      font-size: 20px !important;
      padding-block: var(--padding-3xs, 0.25rem) !important;
      line-height: 1.35;
    }

    .header-drawer--below-header
      .menu-drawer__menu--childlist
      .menu-drawer__menu-item--child:not(.menu-drawer__menu-item--parent)
      .menu-drawer__menu-item-text {
      font-size: 20px !important;
    }

    .header-drawer--below-header .menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child {
      font-size: max(0.75rem, 0.78em) !important;
      padding-block: 0.2rem !important;
    }

    .header-drawer--below-header .menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child .menu-drawer__menu-item-text {
      font-size: max(0.75rem, 0.78em) !important;
    }

    /* Nested accordion lists: half the theme drawer horizontal padding (tighter sub-links). */
    .header-drawer--below-header .menu-drawer__navigation .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid),
    .header-drawer--below-header .menu-drawer__navigation .menu-drawer__menu--grandchildlist:not(.menu-drawer__menu--grid) {
      padding-inline: calc(var(--drawer-padding) / 2);
    }

    .header-drawer--below-header .menu-drawer__list-item--deep .menu-drawer__menu--childlist,
    .header-drawer--below-header .menu-drawer__menu--grandchildlist {
      padding-block-start: var(--padding-3xs);
    }

    .header-drawer--below-header .menu-drawer__list-item--deep .menu-drawer__menu {
      padding-block-end: var(--padding-xs);
    }

    /* Flip caret vertically when open (invert) instead of a 180° spin. */
    .header-drawer--below-header accordion-custom details[open] > summary .menu-drawer__expand-icon--caret,
    .header-drawer--below-header .menu-drawer__menu details[open] > summary .menu-drawer__expand-icon--caret {
      transform: scaleY(-1);
    }

    .header-drawer--below-header .menu-drawer__expand-icon--caret {
      transition: transform var(--animation-speed) var(--animation-easing);
    }

    .header-drawer--below-header .menu-drawer__utility-links {
      margin-inline-start: var(--mobile-menu-text-inset, var(--page-margin));
      margin-inline-end: var(--drawer-padding);
      padding-inline: 0;
    }

    .header-drawer--below-header .menu-drawer__featured-content {
      padding-inline-start: var(--mobile-menu-text-inset, var(--page-margin));
      padding-inline-end: var(--drawer-padding);
    }

    .header-drawer--below-header .menu-drawer__back-button {
      padding-inline-start: var(--mobile-menu-text-inset, var(--page-margin));
      padding-inline-end: var(--padding-xl);
    }

    .header-drawer--below-header .menu-drawer__submenu .menu-drawer__close-button {
      margin-inline-end: var(--drawer-padding);
    }

    .header-drawer--below-header .menu-drawer__list-item--divider::after {
      left: calc(var(--mobile-menu-text-inset, var(--page-margin)) + var(--padding-lg));
      right: var(--drawer-padding);
    }

    .header-drawer--below-header .menu-drawer__menu-container--divider > summary::after {
      left: calc(var(--mobile-menu-text-inset, var(--page-margin)) + var(--padding-lg));
      right: var(--drawer-padding);
    }

  @media screen and (min-width: 990px) {
    .header-drawer--below-header .menu-drawer__navigation > .menu-drawer__menu.has-submenu,
    .header-drawer--below-header .menu-drawer__inner-submenu > .menu-drawer__menu {
      padding-inline-end: var(--mobile-menu-text-inset, var(--page-margin));
    }

    .header-drawer--below-header .menu-drawer__account-section {
      padding-inline-end: 20px;
    }

    .header-drawer--below-header .menu-drawer__utility-links {
      margin-inline-end: var(--mobile-menu-text-inset, var(--page-margin));
    }

    .header-drawer--below-header .menu-drawer__featured-content {
      padding-inline-end: var(--mobile-menu-text-inset, var(--page-margin));
    }

    .header-drawer--below-header .menu-drawer__back-button {
      padding-inline-end: var(--mobile-menu-text-inset, var(--page-margin));
    }

    .header-drawer--below-header .menu-drawer__submenu .menu-drawer__close-button {
      margin-inline-end: var(--mobile-menu-text-inset, var(--page-margin));
    }

    .header-drawer--below-header .menu-drawer__list-item--divider::after {
      right: var(--mobile-menu-text-inset, var(--page-margin));
    }

    .header-drawer--below-header .menu-drawer__menu-container--divider > summary::after {
      right: var(--mobile-menu-text-inset, var(--page-margin));
    }
  }
/* END_SNIPPET:header-drawer */
/* START_SNIPPET:overlay (INDEX:252) */
.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 (INDEX:257) */
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:product-media (INDEX:265) */
.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: 990px) {
    .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:269) */
.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:search-modal (INDEX:274) */
/* 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:275) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
    overflow: visible;
    margin-inline-end: var(--gap-xs);
  }

  search-button {
    overflow: visible;
  }

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

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */
/* START_SNIPPET:text (INDEX:300) */
: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));
  }

  /* Mobile heading above media functionality */
  @media screen and (max-width: 749px) {
    .mobile-heading-above-media {
      width: 100%;
    }

    .mobile-heading-above-media h1,
    .mobile-heading-above-media h2,
    .mobile-heading-above-media h3,
    .mobile-heading-above-media h4,
    .mobile-heading-above-media h5,
    .mobile-heading-above-media h6 {
      margin-bottom: var(--padding-md);
    }
  }

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

  /* Mobile override styles */
  @media screen and (max-width: 749px) {
    .mobile-override.custom-typography > *,
    .mobile-override.custom-typography :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--mobile-font-size) !important;
    }
  }

  /* Desktop override styles — tablet uses 90% of desktop (40px → 36px) */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .desktop-override > *,
    .desktop-override :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: calc(var(--desktop-font-size) * 9 / 10) !important;
    }
  }

  @media screen and (min-width: 990px) {
    .desktop-override > *,
    .desktop-override :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--desktop-font-size) !important;
    }
  }
/* END_SNIPPET:text */