/** Shopify CDN: Minification failed

Line 2843:4 Unexpected "{"
Line 2843:5 Expected identifier but found "%"
Line 2844:18 Unexpected "<"
Line 2844:71 Unterminated string token
Line 2851:5 Expected identifier but found "%"

**/
/* START_SECTION:footer-utilities (INDEX:23) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground-muted);
    padding-top:0px;

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

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

  .utilities > * {
    text-align: center;

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

  .utilities--blocks-1 > * {
    text-align: right;
  }

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

    .utilities--blocks-1 > * {
      justify-self: end;
      text-align: right;
      width: 100%;
    }

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

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

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

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

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */
/* START_SECTION:footer (INDEX:24) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
    padding-bottom:0px;
  }

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

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

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

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

@media screen and (min-width: 990px) {
  .footer-content {
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    /* padding-top: 74px; */
  }
 
  /* Wider brand/newsletter column (track 1) + narrower logo column (last track).
     Only the selector matching your real column count applies; rest are inert.
     Tune the fr values to taste. */
  .footer-content[style*='--grid-columns: 4'] {
    grid-template-columns: 1.8fr 1fr 1fr 0.55fr !important;
  }
  .footer-content[style*='--grid-columns: 5'] {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 0.55fr !important;
  }
  .footer-content[style*='--grid-columns: 6'] {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 0.55fr !important;
  }
  .footer-content[style*='--grid-columns: 7'] {
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr 1fr 0.55fr !important;
  }
 
  /* Single item centered */
  .footer-content[style*='--grid-columns: 1'] {
    justify-items: center;
  }
 
  .footer-content--isolated-grid-item-desktop > :last-child {
    grid-column: 1 / -1;
  }
 
  /* Fix: keep newsletter group as a single column beside the menus (desktop). */
  /* .footer-content > .group-block:first-child {
    grid-column: 1 / 2 !important;
    min-width: 0 !important;
  } */
 
  .footer-content > .group-block:first-child .email-signup-block,
  .footer-content > .group-block:first-child .email-signup__form,
  .footer-content > .group-block:first-child input[type="email"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

      /* ASTERI Part 2 — group B-Corp badge with FOLLOW US (mobile) */
      @media screen and (max-width: 989px) {
        .footer-content > :nth-child(6) {
          grid-column: auto !important;
          justify-self: start;
          margin-top: 8px;
        }
          .footer-content > :nth-child(6) img { max-width: 64px; height: auto; }
      }
    .asteri-floc{display:flex;align-items:center;gap:14px;margin-top:18px}
    .asteri-floc__langform{margin:0;display:inline-flex}
    /* button reset — no background, no border, no dropdown */
    .asteri-floc__field{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:inherit;background:none;border:0;padding:0;font:inherit;line-height:1}
    .asteri-floc__flag{width:40px;height:27px;border-radius:3px;background-size:cover;background-position:center;display:inline-block;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
    .asteri-floc__value{font-size:18px;letter-spacing:.02em;color:inherit;white-space:nowrap}
    .asteri-floc__value--country{font-weight:600}
    .asteri-floc__sep{opacity:.4;font-size:18px}
    .asteri-floc__lang:hover .asteri-floc__value,
    .asteri-floc__country:hover .asteri-floc__value{text-decoration:underline}

    /* Row that pairs the localization selector with the Certified B badge.
       Now anchored INSIDE the newsletter column group (under the consent
       checkbox), so it fills the column width: the selector sits at the start,
       the badge is pushed to the far end with an auto margin. flex-wrap lets a
       long Arabic country name + the badge break gracefully in the narrower
       newsletter column instead of overflowing. */
    .asteri-floc-row{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:14px 18px;
      width:100%;
    }
    .asteri-floc-row--under-consent{
      margin-block:22px 0;
    }
    .asteri-floc-row .asteri-floc{margin-top:0;flex:0 0 auto}
    /* Slightly smaller than the old full-width row so it reads well in the
       narrower newsletter column. */
    .asteri-floc-row--under-consent .asteri-floc__value{font-size:16px}
    .asteri-floc-row--under-consent .asteri-floc__flag{width:34px;height:23px}

    /* B Corp badge. base.css sets a global `img{width:100%}`, which balloons the
       badge once it becomes a flex item — so it's constrained by HEIGHT instead,
       with width following the image's own aspect ratio. */
    .asteri-floc-row__badge{
      flex:0 0 auto;
      display:inline-flex;
      align-items:center;
      width:auto;
      max-width:none;
      margin-inline-start:auto;
    }
    .asteri-floc-row__badge img{
      width:auto !important;
      height:var(--asteri-bcorp-size, 48px) !important;
      max-width:none;
      object-fit:contain;
    }

    /* When the row is relocated, hide the email-signup block's OWN native
       region/language selector on desktop so it isn't duplicated. Scoped to
       >=990px and to the relocated state, so mobile is left exactly as it was. */
    @media screen and (min-width: 990px){
      .footer-content.asteri-floc-relocated .email-signup__location{display:none !important}
    }

    /* ASTERI — mobile navigation drawer placement (unchanged). */
    .asteri-floc--mobile-menu{
      margin-top:0;
      padding:16px 20px;
      width:100%;
      box-sizing:border-box;
    }
  
    /* Mobile: let the long Arabic country name wrap to a new line so the B-Corp
       logo stays on screen. !important is required because the inline styles
       set flex-wrap:wrap already, but we also normalise spacing when moved. */
    @media screen and (max-width: 749px) {
      .asteri-floc-row[data-asteri-mobile-moved] {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px 14px !important;
        margin-block: 32px 36px !important;
      }
      .asteri-floc-row[data-asteri-mobile-moved] .asteri-floc {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        flex-wrap: wrap !important;
        margin-inline-end: 0 !important;
      }
      .asteri-floc-row[data-asteri-mobile-moved] .asteri-floc__country {
        min-width: 0 !important;
        text-align: start !important;
      }
      .asteri-floc-row[data-asteri-mobile-moved] .asteri-floc__value--country {
        white-space: normal !important;      /* was nowrap — allow wrapping */
        overflow-wrap: anywhere !important;
      }
      .asteri-floc-row[data-asteri-mobile-moved] .asteri-floc-row__badge {
        flex: 0 0 auto !important;
        margin-inline-start: auto !important;
      }
    }
  
  /* ===== ASTERI footer — app buttons + payment row ===== */

  /* App Store / Google Play badges: keep aspect ratio + proper size */
  .payment-icons__app-btn { height: auto !important; }
  .payment-icons__app-btn img {
    width: auto !important;
    height: 40px !important;            /* desktop badge height — tweak to taste */
    max-width: none !important;
    object-fit: contain !important;
    display: block;
  }

  /* Payment icons: keep them crisp (undo the global img width:100% squish) */
  .payment-icons__item img,
  .payment-icons__item svg {
    width: auto !important;
    height: 20px !important;
    max-width: none !important;
    object-fit: contain !important;
  }

  /* Desktop: make the app + payment block span the FULL footer width */
  @media screen and (min-width: 990px) {
    .footer-content > :last-child { grid-column: 1 / -1 !important; }
    .payment-icons__row {
      justify-content: space-between !important;
      align-items: center !important;
      flex-wrap: wrap;
      gap: 20px 32px;
    }
  }

  /* Mobile: bigger App Store / Google Play badges (per the reference) */
  @media screen and (max-width: 749px) {
    .payment-icons__app-btn img { height: 45px !important; }
    .payment-icons__item img,
    .payment-icons__item svg { height: 23px !important; }
  }
/* END_SECTION:footer */
/* START_SECTION:header-announcements (INDEX:25) */
/* ==========================================================
     ASTERI — sticky bar.
     header.liquid sets #header-group to display:contents whenever the header
     is sticky, so this section's wrapper is a body-level flow item and can
     stick on its own.
     top: -1px rather than 0 because the header sticks at
     calc(var(--sticky-announcement-height) - 1px) — it keeps that 1px so its
     own position check can still tell "stuck" from "at rest". Pulling the bar
     up by the same 1px lands the header exactly on the bar's bottom edge
     instead of over its divider.
     --sticky-announcement-height is published on <body> by
     asteri-announcement-bar.js, and only while this setting is on, so every
     consumer falls back to 0px when it is off.
     ========================================================== */
  /* A sticky element can only travel inside its containing block, so the bar
     would only stick for the height of #header-group if that stayed a box.
     header.liquid already flattens it for a sticky header; do the same when
     only the bar is sticky, so this setting works on its own. */
  #header-group:has(.announcement-bar-wrapper[data-announcement-sticky]) {
    display: contents;
  }

  .announcement-bar-section:has(.announcement-bar-wrapper[data-announcement-sticky]) {
    position: sticky;
    top: -1px;
    /* Same layer as .header-section, which comes later in the DOM and so still
       paints over the bar — that is what lets the mobile menu drawer, which
       lives inside the header, cover it. */
    z-index: var(--layer-sticky);
  }

  /* The z-index above makes this section a stacking context, which traps the
     9999 the wrapper takes when a dropdown opens (see below) beneath the
     header. Lift the whole section instead while one is open. */
  .announcement-bar-section:has(.announcement-bar-wrapper[data-announcement-sticky]):has(.announcement-bar__utilities [aria-expanded='true']),
  .announcement-bar-section:has(.announcement-bar-wrapper[data-announcement-sticky]):has(.announcement-bar__utilities .localization-wrapper:not([hidden])) {
    z-index: 9999;
  }

  /*
   * ASTERI -- on a transparent-header page (a hero banner), base.css pins
   * this section to `calc(var(--layer-sticky) - 1)` via
   * `body:has(.header[transparent]) #header-group > *:not(.header-section)`.
   * That selector carries an ID (#header-group), which outranks the class-only
   * 9999 rule above regardless of source order, so it silently re-traps the
   * "Hi, Name" menu (and the localization popover) beneath the header's cart
   * icon on any page with a transparent header. Matching the same
   * #header-group prefix here restores the 9999 lift specifically for that
   * case, without touching base.css's rule for every other #header-group
   * child.
   */
  body:has(.header[transparent]) #header-group > .announcement-bar-section:has(.announcement-bar__utilities [aria-expanded='true']),
  body:has(.header[transparent]) #header-group > .announcement-bar-section:has(.announcement-bar__utilities .localization-wrapper:not([hidden])) {
    z-index: 9999;
  }

  /* ==========================================================
     ASTERI — utility overlay. Sibling of the <aside>, never a child.
     ========================================================== */
  .announcement-bar-wrapper {
    position: relative;
  }
  /* The location sidebar is a native <dialog> (top layer) so it can't be
     clipped. This only guards the popover variant of the selector — and now
     also the "Hi, Name" menu, whose toggle carries aria-expanded. */
  .announcement-bar-wrapper:has(.announcement-bar__utilities [aria-expanded='true']),
  .announcement-bar-wrapper:has(.announcement-bar__utilities .localization-wrapper:not([hidden])) {
    z-index: 9999;
  }
  .announcement-bar__utilities {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--page-margin, 20px);
    background-color: transparent;
    /* Let clicks reach the announcement link underneath. */
    pointer-events: none;
    z-index: 2;
    /* Normally inherited from .header__row; the account icon needs it here. */
    --color-account-icon: var(--color-foreground);
  }
  .announcement-bar__utility {
    display: flex;
    align-items: center;
    gap: var(--gap-md, 12px);
    pointer-events: auto;
    min-width: 0;
  }
  /* The country selector, the "|" and the language toggle are now THREE flex
     siblings rather than one button, so this gap controls the spacing between
     them. Tightened so it still reads as one unit. */
  .announcement-bar__utility--start {
    gap: 8px;
  }
  /* The account links keep their width: if anything has to give, it is the
     country label, never these. */
  .announcement-bar__utility--end {
    flex-shrink: 0;
  }
  /* --- Register | Login text links (account_style: links) --- */
  .announcement-bar__account {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-subheading--family);
    font-size: var(--menu-localization-font-size, 0.875rem);
    line-height: 1;
    white-space: nowrap;
  }
  .announcement-bar__account-link {
    color: var(--color-foreground);
    text-decoration: none;
  }
  .announcement-bar__account-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .announcement-bar__account-sep {
    opacity: 0.4;
  }
  /* When the links replace it, hide the header's own account button on desktop.
     Below 750px the overlay is hidden, so the header keeps it. */
  @media screen and (min-width: 750px) {
    body:has(.announcement-bar-wrapper[data-hide-header-account]) #header-component .account-button {
      display: none;
    }
  }
  /* ==========================================================
     ASTERI — "Hi, Elie ⌄" disclosure
     ========================================================== */
  .asteri-acct {
    position: relative;
    display: flex;
    align-items: center;
  }
  .asteri-acct__toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 0;
    background: none;
    box-shadow: none;
    color: var(--color-foreground);
    font-family: var(--font-subheading--family);
    font-size: var(--menu-localization-font-size, 0.875rem);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    /* Same movement neutralisation as the language + country buttons. */
    transition: none;
    will-change: auto;
  }
  .asteri-acct__toggle:hover,
  .asteri-acct__toggle:focus,
  .asteri-acct__toggle:active {
    transform: none;
    translate: none;
    scale: none;
    rotate: none;
    box-shadow: none;
    background: none;
    color: var(--color-foreground);
  }
  .asteri-acct__toggle:hover .asteri-acct__name {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .asteri-acct__toggle:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 3px;
  }
  /* The greeting is deliberately lighter than the name — the name is the
     information, "Hi," is furniture. */
  .asteri-acct__greeting {
    opacity: 0.75;
  }
  .asteri-acct__name {
    font-weight: 600;
  }
  .asteri-acct__chev {
    flex-shrink: 0;
    /* The chevron must not mirror in RTL — it points down in both scripts. */
    transition: transform 0.18s ease;
  }
  .asteri-acct__toggle[aria-expanded='true'] .asteri-acct__chev {
    transform: rotate(180deg);
  }
  .asteri-acct__menu {
    position: absolute;
    /* Overwritten by positionAcctMenu() with the exact bar bottom; this is the
       pre-JS fallback. */
    top: calc(100% + 14px);
    inset-inline-end: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--color-border, rgb(0 0 0 / 0.1));
    border-radius: var(--style-border-radius-popover, 8px);
    background-color: var(--color-background, #fff);
    box-shadow: 0 8px 28px rgb(0 0 0 / 0.14);
    font-family: var(--font-subheading--family);
    font-size: var(--menu-localization-font-size, 0.875rem);
    text-align: start;
  }
  .asteri-acct__menu[hidden] {
    display: none;
  }
  .asteri-acct__item {
    display: block;
    padding: 9px 12px;
    border-radius: calc(var(--style-border-radius-popover, 8px) / 2);
    color: var(--color-foreground);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }
  .asteri-acct__item:hover,
  .asteri-acct__item:focus-visible {
    background-color: var(--color-foreground);
    color: var(--color-background);
    outline: none;
  }
  .asteri-acct__item--logout {
    margin-block-start: 4px;
    border-block-start: 1px solid var(--color-border, rgb(0 0 0 / 0.1));
    border-radius: 0 0 calc(var(--style-border-radius-popover, 8px) / 2)
      calc(var(--style-border-radius-popover, 8px) / 2);
    padding-block-start: 11px;
  }
  /* ==========================================================
     ASTERI — initial avatar on the header account icon.
     Signed in, the person outline becomes a filled circle with the initial,
     as on asteribeauty.com. The button keeps its own href / aria / drawer
     behaviour: only its glyph is swapped.
     ========================================================== */
  /* Deliberately minimal: only a positioning context and no text-decoration.
     Do NOT set display/width/height here — the header places this button in
     its own grid or flex row (the mobile header even keys off
     :has(shopify-account) for the search icon), and overriding its box would
     move the cart and burger with it. */
  .asteri-avatar.asteri-avatar {
    position: relative;
    text-decoration: none;
  }
  /* Hide the glyph rather than remove it, so the theme's own sizing rules
     (which measure the icon) keep working and nothing reflows.
     Doubled class = one extra step of specificity, because Shopify decides
     where it injects this section's stylesheet output relative to the theme's
     own CSS. Same convention as asteri-overrides.css. */
  .asteri-avatar.asteri-avatar > svg,
  .asteri-avatar.asteri-avatar .svg-wrapper,
  .asteri-avatar.asteri-avatar > .icon {
    visibility: hidden;
  }
  .asteri-avatar.asteri-avatar::after {
    content: attr(data-asteri-initial);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: var(--asteri-avatar-size, 26px);
    height: var(--asteri-avatar-size, 26px);
    border-radius: 50%;
    background-color: var(--asteri-avatar-bg, #6b2fb8);
    color: var(--asteri-avatar-fg, #fff);
    font-family: var(--font-subheading--family);
    font-size: calc(var(--asteri-avatar-size, 26px) * 0.46);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    pointer-events: none;
  }
  /* translate(-50%, -50%) is direction-agnostic, but inset-inline-start flips
     to `right` in RTL, so the X offset has to mirror with it. */
  [dir='rtl'] .asteri-avatar.asteri-avatar::after {
    transform: translate(50%, -50%);
  }
  /* The theme only reveals .dropdown-localization via a #header-component rule,
     which stops matching once the node is relocated. */
  .announcement-bar__utilities :is(.dropdown-localization, dropdown-localization-component) {
    display: flex;
    min-width: 0;
  }
  /* ==========================================================
     ASTERI — desktop localization label (flag + country).
     THE BUTTON MUST BE ALLOWED TO GROW. In the header this is an icon button:
     styles.css does `.header-actions__action { width: var(--button-size) }`,
     i.e. a 44px square. With a text label inside, the label is laid out
     OUTSIDE that box instead of widening it — in RTL it ran backwards under
     the "|" and the language toggle, and the flag was pushed off the page
     edge. `width: auto` is the fix. The doubled class is one extra step of
     specificity, because Shopify decides where it injects this section's
     stylesheet relative to styles.css.
     ========================================================== */
  .announcement-bar__utilities .dropdown-localization__button.dropdown-localization__button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
  }
  .announcement-bar__utilities .asteri-loc__flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 2px rgb(0 0 0 / 0.25);
    flex: 0 0 auto;
  }
  /* Last line of defence: an unmapped market with a long Arabic name truncates
     instead of overlapping. Only bites below ~800px on desktop. */
  .announcement-bar__utilities .asteri-loc__country {
    font-weight: 600;
    min-width: 0;
    max-width: min(28vw, 230px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .announcement-bar__utilities .asteri-loc__sep { opacity: 0.4; }
  /* ==========================================================
     ASTERI — language is a DIRECT toggle (mirrors .asteri-floc__lang in the
     footer). It submits the localization form to the other locale instead
     of opening the country/region sidebar. Button reset so it reads as plain
     text next to the country selector.
     ========================================================== */
  .announcement-bar__langform {
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .announcement-bar__lang {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    min-height: 0;
    background: none;
    box-shadow: none;
    color: var(--color-foreground);
    font-family: var(--font-subheading--family);
    font-size: var(--menu-localization-font-size, 0.875rem);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: none;
    will-change: auto;
  }
  .announcement-bar__lang:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    /* Same movement neutralisation as the country button below. */
    transform: none;
    translate: none;
    scale: none;
    box-shadow: none;
    background: none;
  }
  .announcement-bar__lang:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }
  .announcement-bar__lang-sep {
    opacity: 0.4;
    line-height: 1;
    font-size: var(--menu-localization-font-size, 0.875rem);
    flex: 0 0 auto;
  }
/* Kill the transition so no state change animates the button's position. */
.announcement-bar__utilities .dropdown-localization__button,
.announcement-bar__utilities [data-location-selector-open] {
  transition: none !important;
  will-change: auto !important;
}
/* Neutralise every movement source on hover/focus/active. */
.announcement-bar__utilities .dropdown-localization__button:hover,
.announcement-bar__utilities .dropdown-localization__button:focus,
.announcement-bar__utilities .dropdown-localization__button:focus-visible,
.announcement-bar__utilities .dropdown-localization__button:active,
.announcement-bar__utilities [data-location-selector-open]:hover,
.announcement-bar__utilities [data-location-selector-open]:focus,
.announcement-bar__utilities [data-location-selector-open]:focus-visible,
.announcement-bar__utilities [data-location-selector-open]:active {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  top: auto !important;
  inset-block-start: auto !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
  /* Desktop only: the header's mobile grid uses :has(shopify-account) to place
     the search icon, so the account button stays put below 750px. */
  @media screen and (max-width: 749px) {
    .announcement-bar__utilities {
      display: none;
    }
  }
  /* ==========================================================
     ASTERI — copyable code.
     Self-contained: matches the look asteri-site2.css produced, but does not
     depend on it. Scoped to .announcement-bar so it beats the theme's button
     resets, which were overriding the unscoped .asteri-ann-copy rules.
     ========================================================== */
  .announcement-bar .asteri-ann-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    /* .announcement-bar__link is position:absolute inset:0 and would
       otherwise swallow the click. */
    position: relative;
    z-index: 1;
  }
  .announcement-bar .asteri-ann-copy:hover {
    opacity: 0.8;
  }
  .announcement-bar .asteri-ann-copy:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }
  .announcement-bar .asteri-ann-copy svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  /*
     Copied state — must beat asteri-site2.css which still does:
       .asteri-ann-copy.copied .asteri-ann-code { display: none }
       .asteri-ann-copy.copied:after { content: "Copied!" }
     (and leaves the icon visible, so you get [icon][Copied!]).
     We swap the span text in JS and keep width locked; restore from data-code.
  */
  .announcement-bar .asteri-ann-copy.copied {
    text-decoration: none;
    font-weight: 600;
    gap: 0;
  }
  .announcement-bar .asteri-ann-copy.copied .asteri-ann-code {
    display: inline !important;
  }
  .announcement-bar .asteri-ann-copy.copied svg {
    display: none !important;
  }
  .announcement-bar .asteri-ann-copy.copied::after {
    content: none !important;
  }
  /* ==========================================================
     ASTERI — RTL centring fix.
     The block's alignment setting lands on the slide as
     --text-align: center, but Horizon never consumes it for the
     announcement text, so it falls back to `start`. That reads as
     LEFT in English (accidentally fine, since the box is centred)
     and RIGHT in Arabic — pushing the text ~179px off centre.
     Consume the variable so the setting is honoured in both
     directions. Change the block's alignment and this still follows.
     ========================================================== */
  .announcement-bar .announcement-bar__slide,
  .announcement-bar .announcement-bar__text {
    text-align: var(--text-align, center);
  }
  /* ==========================================================
     Theme defaults below — unchanged
     ========================================================== */
  .announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }
  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }
  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    /* Was calc(100% - var(--button-size) * 2) to leave room for the arrows.
       No arrows now, so reclaim the width. */
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
  }
  .announcement-bar__slides > * {
    grid-area: stack;
  }
  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;
    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }
  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }
  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }
  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;
    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);
      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }
  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }
  .announcement-bar__slide {
    place-content: center;
  }
  .announcement-bar__text:first-child {
    margin: 0;
  }
  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */
/* START_SECTION:header (INDEX:26) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

    /* Use -1 instead of 0 so intersection observer can track sticky state.
       ASTERI — a sticky announcement bar publishes its height as
       --sticky-announcement-height (asteri-announcement-bar.js) so the header
       comes to rest below it instead of on top of it. Unset, this stays -1px. */
    top: calc(var(--sticky-announcement-height, 0px) - 1px);
    z-index: var(--layer-sticky);
  }

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

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

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

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

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

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

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

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

  /* When top row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='top']:hover,
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover,
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

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

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

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

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

    position: relative;

    /* Overwrite color from color scheme, background is controlled by the underlays */
    background-color: transparent;

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

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

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

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

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

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

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

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

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

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

  .header__column--right {
    gap: 0.5rem;
    justify-content: flex-end;
    grid-area: right;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--button-size);  /* usually 44px */
    height: var(--button-size);

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

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

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

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

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

  /* .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  } */
 .header__columns {
    --padding-block-start: 3px;
    --padding-block-end: 3px;
  }
  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

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

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

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

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

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

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

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

  /* Optimize layout performance for hidden menus.

     `hidden` rather than `auto`: a closed panel is `visibility: hidden` and absolutely
     positioned just under the header, so its box still sits inside the viewport. `auto`
     only skips contents that are off-screen, so it kept rendering these panels — and a
     lazy <img> with a box in the viewport is fetched immediately, which is why every
     submenu image downloaded on page view. `hidden` skips the contents outright, giving
     the images no box to be measured against.

     The rule below opts a panel back in as it opens, and that is the whole mechanism —
     rendering the contents gives each image a box, so the browser requests it then. No JS
     touches the `loading` attribute, so it stays on the element where it can be seen. */
  .header-menu .menu-list__submenu {
    content-visibility: hidden;
    contain-intrinsic-size: 0px 500px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ASTERI — bump the center header logo up slightly on mobile.
     _header-logo.liquid sets --header-logo-image-height-mobile /
     --header-logo-image-width-mobile from the theme's Logo settings; scale
     both by the same factor here so it stays proportional whatever those
     settings are. */
  @media screen and (max-width: 749px) {
    .header-logo__image {
      height: calc(var(--header-logo-image-height-mobile) * 1.2);
      width: calc(var(--header-logo-image-width-mobile) * 1.2);
    }
  }
  /* ASTERI — freeze the sticky-header animation while the mobile drawer is open.
     header-drawer renders INSIDE the top header row, so the open drawer panel
     is a DOM descendant of .header even though it is position:fixed. That means
     the sticky-header rules above — .header[data-sticky-state='idle']{opacity:0}
     and view-transition-name: sticky-header — repaint/fade the whole open drawer
     whenever the sticky state toggles on scroll. Pin them while it is open. */
  .header:has(#Details-menu-drawer-container[open]) {
    opacity: 1 !important;
    transition: none !important;
    view-transition-name: none !important;
  }
/* END_SECTION:header */
/* START_SECTION:hero (INDEX:27) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

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

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

  @media screen and (min-width: 750px) {
    .hero {
      min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
    }
  }

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

    min-height: 600px;
  }

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

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

  /*
    Mobile fixed heights (custom / small / medium / large / full-screen).
    Collection banners often have a title block + transparent header: content
    min-height and --hero-height-offset were swallowing the custom value, and
    .section { min-height: auto } could stop .hero__container from inheriting.
  */
  @media screen and (max-width: 749px) {
    .hero.hero--fixed-height-mobile {
      /*
       * Skip header offset so small/custom svh values aren't cancelled out.
       * `height` is required here too (not just min-height): a percentage
       * height further down (.hero__container.section) can't resolve
       * against an ancestor whose `height` is auto, even when min-height
       * forces that ancestor to a real visual size. Without this, a hero
       * using the Small/Medium/Large mobile height with no text blocks
       * (nothing else to establish height) collapses to 0px and its image
       * never shows. Custom/Full-screen already set height explicitly
       * below; this brings Small/Medium/Large in line with them.
       */
      min-height: var(--hero-min-height-mobile);
      height: var(--hero-min-height-mobile);
    }

    .hero.hero--custom-height-mobile {
      /* Custom slider should control the banner size exactly. */
      height: var(--hero-min-height-mobile);
      min-height: var(--hero-min-height-mobile);
    }

    .hero.hero--fixed-height-mobile.hero--full-screen-mobile {
      min-height: calc(var(--hero-min-height-mobile) - var(--hero-height-offset));
      height: calc(var(--hero-min-height-mobile) - var(--hero-height-offset));
    }

    .hero.hero--fixed-height-mobile .hero__container.section {
      min-height: 100%;
      height: 100%;
    }

    .hero.hero--fixed-height-mobile .hero__media-grid {
      position: absolute;
      inset: 0;
    }

    .hero.hero--fixed-height-mobile .hero__media,
    .hero.hero--fixed-height-mobile .hero__media img {
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: cover;
      object-position: center center;
    }
  }

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

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

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

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

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

  /*
    Desktop Height = Auto + banner-only: size from the image.
    Keep this desktop-only so Mobile custom/preset heights still apply
    (previously min-height: 0 + relative media overrode --hero-min-height-mobile).
  */
  @media screen and (min-width: 750px) {
    .hero--no-blocks-auto-height {
      min-height: 0;
    }

    .hero--no-blocks-auto-height .hero__media {
      width: 100%;
      height: auto;
      aspect-ratio: var(--hero-media-aspect-ratio, auto);
    }

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

  /* Mobile Height = Auto: size from the *mobile* image so art-directed
     portrait banners fill the viewport width instead of sitting in the
     desktop landscape ratio with empty sides. */
  @media screen and (max-width: 749px) {
    .hero.hero--auto-height-mobile {
      min-height: 0;
      height: auto;
    }

    .hero.hero--auto-height-mobile .hero__container {
      min-height: 0;
      height: auto;
    }

    .hero.hero--auto-height-mobile .hero__media-grid {
      position: relative;
      inset: auto;
      width: 100%;
      height: auto;
    }

    .hero.hero--auto-height-mobile .hero__media,
    .hero.hero--auto-height-mobile .hero__media img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      aspect-ratio: var(--hero-media-aspect-ratio-mobile, auto);
      object-fit: cover;
      object-position: center center;
    }
  }

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

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

  /* Mobile/Desktop media visibility */

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

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

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

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

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

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

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

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

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

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

  .hero__breadcrumb {
    width: 100%;
    margin-block-end: 0.35rem;
    pointer-events: auto;
  }

  .hero__breadcrumb .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .hero__breadcrumb .breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
  }

  .hero__breadcrumb .breadcrumb__link,
  .hero__breadcrumb .breadcrumb__separator,
  .hero__breadcrumb .breadcrumb__text {
    color: #fff;
    font-weight: 400;
    font-size: 0.8125rem;
    font-family: 'GreyCliffRegular', sans-serif;
    text-decoration: none;
    opacity: 1;
  }

  .hero__breadcrumb .breadcrumb__link:hover {
    opacity: 0.8;
  }

  .hero__breadcrumb .breadcrumb__separator {
    opacity: 0.7;
  }

  .hero__breadcrumb .breadcrumb__text {
    opacity: 0.9;
  }

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

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

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

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

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

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

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

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

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

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */
/* START_BLOCK:_announcement (INDEX:58) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

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

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

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

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

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

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

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

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

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

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

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

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */
/* START_BLOCK:_header-logo (INDEX:87) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

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

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

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

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

  /* Language visibility — default (non-Arabic). Arabic rules live in arabic.css */
  .header-logo__image-container--lang-ar {
    display: none;
  }

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

  .header-logo__image-container--inverse.header-logo__image-container--lang-en {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */
/* START_BLOCK:_header-menu (INDEX:88) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

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

    /* Desktop: Doubly stays in the header action area, not the left column mount if unused */
    #header-component[data-menu-style='menu'] .header__column--left .doubly-wrapper:empty {
      display: none;
      min-height: 0;
    }
  }

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

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

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

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

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

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

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

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

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

    display: flex;
    height: 100%;
  }

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

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

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

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

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

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

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

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

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

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

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.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);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

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

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

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

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

    display: contents;
    white-space: normal;

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

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

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

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

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

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

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

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

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

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

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

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

  /* Fix alignment for collection image mode links without images */

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

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

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), auto);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;
    justify-content: center;

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

  .header-menu .mega-menu__grid--stories {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 48px);
    width: 100%;
  }

  .header-menu .mega-menu__grid--stories .mega-menu__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--menu-horizontal-gap);
    grid-column: unset;
    grid-template-columns: unset;
    flex: 0 0 auto;
    width: auto;
  }

  .header-menu .mega-menu__grid--stories .mega-menu__column {
    flex: 0 0 auto;
    grid-column: auto;
  }

  .header-menu .mega-menu__grid--stories .mega-menu__stories-cards {
    flex: 0 0 auto;
    min-width: 0;
    max-width: min(560px, 46vw);
    align-self: start;
  }

  .asteri-stories-mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 260px));
    gap: 22px;
    width: auto;
    max-width: 100%;
  }

  .asteri-stories-mega-menu__grid[data-stories-card-count='1'] {
    grid-template-columns: minmax(180px, 260px);
  }

  @media screen and (max-width: 989px) {
    .asteri-stories-mega-menu__grid {
      grid-template-columns: repeat(2, minmax(140px, 200px));
    }

    .header-menu .mega-menu__grid--stories .mega-menu__stories-cards {
      max-width: min(440px, 70vw);
    }
  }

  .header-menu .mega-menu__grid--stories .mega-menu__content,
  .header-menu .mega-menu__grid--stories .mega-menu__content--stories,
  .header-menu .mega-menu__grid--stories > .asteri-mm,
  .header-menu .mega-menu__grid--stories .asteri-mm {
    display: none !important;
  }

  .header-menu .mega-menu__grid--stories .asteri-mm__card {
    display: none !important;
  }

  .asteri-stories-mega-menu__card {
    display: block;
    min-width: 0;
    text-decoration: none;
    color: #14202b;
    font-family: var(--font-body--family);
  }

  .asteri-stories-mega-menu__imgwrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
  }

  .asteri-stories-mega-menu__imgwrap .asteri-stories-mega-menu__img,
  .asteri-stories-mega-menu__imgwrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }

  .asteri-stories-mega-menu__card:hover .asteri-stories-mega-menu__imgwrap img {
    transform: scale(1.04);
  }

  .asteri-stories-mega-menu__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    color: #0f2c3f;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
  }

  .asteri-stories-mega-menu__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin: 12px 0 4px;
    color: #0f2c3f;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .asteri-stories-mega-menu__meta {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .asteri-stories-mega-menu__read {
    font-size: 12px;
    color: #9aa3ad;
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
  }

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

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

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

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

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

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

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

  .mega-menu__content-list {
    display: grid;
    justify-content: start;
    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);

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

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

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

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

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

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */
/* START_BLOCK:contact-form-submit-button (INDEX:123) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */
/* START_BLOCK:contact-form (INDEX:124) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs, 6px);
  }

  .contact-form__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
    line-height: 1.3;
  }

  .contact-form__phone-row {
    display: flex;
    align-items: stretch;
    gap: var(--gap-sm, 12px);
    width: 100%;
  }

  .contact-form__country-code {
    flex: 0 0 auto;
    width: 6.5rem;
  }

  .contact-form__phone-number {
    flex: 1 1 auto;
    min-width: 0;
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300263E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-inline-end: 2rem;
    cursor: pointer;
  }

  .contact-form__input--case-type:invalid {
    color: color-mix(in srgb, var(--color-input-text) 55%, transparent);
  }

  .contact-form__input--case-type option {
    color: var(--color-input-text);
  }

  [dir='rtl'] .contact-form__input--select {
    background-position: left 0.85rem center;
    padding-inline-end: var(--padding-xl);
    padding-inline-start: 2rem;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .contact-form-success-dialog {
    {%- comment -%}
      Centering a <dialog>'s default modal position (inset: 0 + margin:
      auto) turned out to be unreliable here — it resolves to
      `position: absolute` in this browser rather than `fixed`, so it
      needs a positioned ancestor to center against, and in practice ended
      up pinned to the top of the viewport instead of centered. Centering
      it explicitly with top/left/transform sidesteps that entirely and
      works regardless of where in the page this dialog is placed.
    {%- endcomment -%}
    /* position: absolute; */
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    padding: var(--padding-4xl) var(--padding-xl);
    text-align: center;
    width: min(90vw, 34rem);
  }

  .contact-form-success-dialog__close {
    position: absolute;
    top: var(--margin-md);
    right: var(--margin-md);
    width: var(--minimum-touch-target, 44px);
    height: var(--minimum-touch-target, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  [dir='rtl'] .contact-form-success-dialog__close {
    right: auto;
    left: var(--margin-md);
  }

  .contact-form-success-dialog__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm, 12px);
  }

  .contact-form-success-dialog__icon {
    align-self: flex-start;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-foreground);
  }

  .contact-form-success-dialog__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .contact-form-success-dialog__title {
    font-family: 'OrLemmen' !important;
    font-weight: 500 !important;
    font-size: 1.75rem;
    margin: 0;
  }

  .contact-form-success-dialog__subtitle {
    font-size: 0.9375rem;
    color: var(--color-foreground);
    margin: 0;
    max-width: 28rem;
  }
/* END_BLOCK:contact-form */
/* START_BLOCK:email-signup-klaviyo (INDEX:126) */
.email-signup-klaviyo input{
    padding-top: 0;
    padding-bottom: 0;
}

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

  /* ASTERI region/language selector — sits under the consent checkbox */
  .asteri-floc-row {
    margin-top: 20px;
    width: 100%;
  }

  .asteri-floc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .asteri-floc__langform {
    margin: 0;
    display: inline-flex;
  }

  /* button reset — no background, no border, no dropdown chrome */
  .asteri-floc__field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    line-height: 1;
  }

  .asteri-floc__flag {
    width: 34px;
    height: 23px;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    flex: none;
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18);
  }

  .asteri-floc__value {
    font-size: 16px;
    letter-spacing: 0.02em;
    color: inherit;
    white-space: nowrap;
  }

  .asteri-floc__value--country {
    font-weight: 600;
  }

  .asteri-floc__sep {
    opacity: 0.4;
    font-size: 16px;
  }

  .asteri-floc__lang:hover .asteri-floc__value,
  .asteri-floc__country:hover .asteri-floc__value {
    text-decoration: underline;
  }

  .email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

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

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

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

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

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

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

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

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

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

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

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

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

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

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

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

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

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

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

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

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

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

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

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

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

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

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

  .email-signup__button.button-unstyled:hover {
    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;
  }

  .email-signup__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block-start: 12px;
    cursor: pointer;
  }

  .email-signup__consent-input {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-block-start: 2px;
    accent-color: currentcolor;
    cursor: pointer;
  }

  .email-signup__consent-text {
    font-size: 12px;
    line-height: 1.45;
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .email-signup__consent-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .email-signup__consent-link:hover {
    color: var(--color-foreground);
  }

  /* ASTERI: footer region/language selector */
  .email-signup__location {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    font-family: var(--font-body--family, inherit);
    transition: opacity 0.2s ease;
  }

  .email-signup__location:hover {
    opacity: 0.7;
  }

  .email-signup__location-flag {
    width: 34px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  }

  .email-signup__location-code {
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
  }

  .email-signup__location-sep {
    width: 1px;
    height: 1em;
    background: currentColor;
    opacity: 0.4;
  }

  .email-signup__location-lang {
    font-size: 0.9375rem;
    opacity: 0.85;
  }

  /* Newsletter thank-you popup */
  .asteri-signup-thanks {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(1040px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 0;
    border-radius: 4px;
    padding: 40px 32px 32px;
    background: #f4ece3;
    color: #111;
    text-align: center;
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.35);
  }

  .asteri-signup-thanks::backdrop {
    background: rgb(0 0 0 / 0.55);
  }

  .asteri-signup-thanks__close {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #111;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  .asteri-signup-thanks__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border: 1.5px solid #111;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
  }

  .asteri-signup-thanks__title {
    margin: 0 0 12px;
    font-family: 'OrLemmen' !important;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 200 !important;
    line-height: 1.15;
    color: #111;
  }

  .asteri-signup-thanks__body {
    margin: 0 auto 22px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #222;
  }

  .asteri-signup-thanks__list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #222;
  }

  .asteri-signup-thanks__list li {
    position: relative;
    padding-inline-start: 1.1em;
    width: fit-content;
    margin-inline: auto;
    text-align: start;
  }

  .asteri-signup-thanks__list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
  }

  .asteri-signup-thanks__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    width: min(100%, 280px);
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background: #00263e;
    color: #fff;
    font-family: 'GreyCliffBold', 'GreyCliff', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .asteri-signup-thanks__cta:hover {
    opacity: 0.92;
  }

  [dir='rtl'] .asteri-signup-thanks__title {
    font-family: 'GreyCliffBold', 'GreyCliff', sans-serif;
  }
/* END_BLOCK:email-signup-klaviyo */
/* START_BLOCK:image (INDEX:135) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .image-block--has-arabic-logo .image-block__logo {
    display: flex;
    width: 85%;
  }

  .image-block--has-arabic-logo .image-block__logo--lang-ar {
    display: none;
  }

  .image-block--has-arabic-logo .image-block__image {
    object-fit: contain;
  }
/* END_BLOCK:image */
/* START_BLOCK:menu (INDEX:139) */
.menu {
    width: 100%;
  }

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

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

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

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */
/* START_BLOCK:payment-icons (INDEX:142) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top:50px;
  }

  .payment-icons__apps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .payment-icons__app-heading {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-foreground);
    line-height: 1.4;
  }

  .payment-icons__app-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .payment-icons__app-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* padding: 7px 14px; */
    margin-right: 8px;
    color: var(--color-foreground);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    transition: opacity 0.2s ease;
  }

  .payment-icons__app-btn--placeholder {
    pointer-events: none;
  }

  .payment-icons__app-btn:hover {
    opacity: 0.85;
  }

  .payment-icons__app-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .payment-icons__app-btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .payment-icons__app-btn-icon--play svg {
    width: 16px;
    height: 16px;
  }

  .payment-icons__app-btn-label {
    white-space: nowrap;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: center;;
    /* justify-content: var(--alignment); */
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .payment-icons__row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .payment-icons__list {
      width: auto;
      margin-left: auto;
    }
  }
/* END_BLOCK:payment-icons */
/* START_BLOCK:social-links (INDEX:155) */
.social-links--list {
    width: 100%;
  }

  .social-links--list .social-links__heading {
    margin: 0;
  }

  .social-links--list .social-links__list {
    margin-block-start: var(--spacing--size);
  }

  .social-links--list .social-links__item + .social-links__item {
    margin-block-start: var(--spacing--size);
  }

  .social-links--list .social-links__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .social-links--list .social-links__icon {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  .social-links--list .social-links__label {
    line-height: 1.4;
  }

  .shopify-design-mode .social-links__item--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-links__item--disabled a {
    pointer-events: none;
  }

  .social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

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

  .social-icons__icon {
    display: none;
  }

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

    .social-icons__icon {
      display: block;
    }

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

  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */
/* START_SNIPPET:accordion-custom-component (INDEX:161) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

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

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */
/* START_SNIPPET:asteri-currency-switcher (INDEX:163) */
/* Official UAE Dirham symbol. The AED price string is printed as a bare number
     (see priceDisplay below), and the symbol is drawn here as a ::before mask so
     it inherits the price's own colour and font size — same idea as the SAR glyph
     in custom.css. !important is needed to beat the `content:none !important`
     reset that injectCss() applies to every converted price. */
  

  @supports ((-webkit-mask-image: none) or (mask-image: none)) {
    body[data-display-currency='AED'] .price:before,
    body[data-display-currency='AED'] .price.asteri-cur-x:before,
    body[data-display-currency='AED'] .compare-at-price:before,
    body[data-display-currency='AED'] .cart-totals__total-value .money:before{
      content: '' !important;
      display: inline-block;
      width: 0.78em;
      height: 0.78em;
      margin-inline-end: 0.22em;
      vertical-align: -0.05em;
      flex: none;
      background-color: currentColor !important;
      background-image: none !important;
      -webkit-mask-image: var(--aed-symbol);
      mask-image: var(--aed-symbol);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
  }
/* END_SNIPPET:asteri-currency-switcher */
/* START_SNIPPET:asteri-location-selector (INDEX:164) */
.asteri-location-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(430px, 92vw);
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background-color: var(--color-background);
    color: var(--color-foreground);
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }

  [dir='rtl'] .asteri-location-drawer,
  html[lang^='ar'] .asteri-location-drawer,
  html.is-arabic .asteri-location-drawer {
    transform: translateX(100%);
  }

  /* Open state. The direction-scoped selectors below MUST be listed so the
     "open" rule out-ranks the RTL closed rule above (which is otherwise more
     specific than a bare `.asteri-location-drawer[open]` and would keep the
     panel shoved off-screen in Arabic — showing only the backdrop). */
  .asteri-location-drawer[open],
  [dir='rtl'] .asteri-location-drawer[open],
  html[lang^='ar'] .asteri-location-drawer[open],
  html.is-arabic .asteri-location-drawer[open] {
    transform: translateX(0);
  }

  /* Slide-in animation on open */
  @starting-style {
    .asteri-location-drawer[open] {
      transform: translateX(-100%);
    }

    [dir='rtl'] .asteri-location-drawer[open],
    html[lang^='ar'] .asteri-location-drawer[open],
    html.is-arabic .asteri-location-drawer[open] {
      transform: translateX(100%);
    }
  }

  .asteri-location-drawer::backdrop {
    background-color: rgb(0 0 0 / 0.45);
  }

  .asteri-location-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--padding-2xl, 32px) var(--padding-xl, 24px);
  }

  .asteri-location-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-md, 16px);
    margin-block-end: var(--margin-xl, 24px);
  }

  .asteri-location-drawer__title {
    margin: 0 0 var(--margin-2xs, 6px);
  }

  .asteri-location-drawer__subtitle {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.7));
  }

  .asteri-location-drawer__close {
    cursor: pointer;
    padding: var(--padding-2xs, 6px);
    color: var(--color-foreground);
  }

  .asteri-location-drawer__close .svg-wrapper svg {
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
  }

  .asteri-location-drawer__list {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    scrollbar-width: thin;
  }

  .asteri-location-drawer__row {
    display: flex;
    align-items: center;
    gap: var(--gap-md, 16px);
    padding: var(--padding-md, 16px) var(--padding-sm, 12px);
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
    border-radius: 0;
  }

  .asteri-location-drawer__row.is-current {
    border: var(--style-border-width, 1px) solid var(--color-foreground);
    border-radius: var(--style-border-radius-inputs, 8px);
  }

  .asteri-location-drawer__row.is-current + .asteri-location-drawer__row {
    border-block-start: none;
  }

  .asteri-location-drawer__flag {
    flex-shrink: 0;
    width: 34px;
    height: 24px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.08) inset;
  }

  .asteri-location-drawer__code {
    flex: 1;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .asteri-location-drawer__languages {
    display: flex;
    align-items: center;
    gap: var(--gap-sm, 12px);
    flex-shrink: 0;
  }

  .asteri-location-drawer__lang {
    cursor: pointer;
    padding: var(--padding-2xs, 4px) var(--padding-2xs, 6px);
    font-size: var(--font-size-md, 1rem);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.6));
    transition: color 0.15s ease;
  }

  .asteri-location-drawer__lang:hover,
  .asteri-location-drawer__lang.is-active {
    color: var(--color-foreground);
  }

  .asteri-location-drawer__lang.is-active {
    font-weight: 600;
  }

  .asteri-location-drawer__divider {
    width: 1px;
    height: 1em;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-25, 0.25));
  }
/* END_SNIPPET:asteri-location-selector */
/* START_SNIPPET:background-media (INDEX:171) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:buy-buttons-styles (INDEX:179) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .add-to-cart-button {
    height: 40px;
    text-transform: var(--button-text-case-primary);
    width: 100%;
  }

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .pickup-location__h4 {
    margin: 0;
  }

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

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

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

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

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

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

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

  .volume-pricing__table {
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */
/* START_SNIPPET:cart-bubble (INDEX:181) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    background-color: rgb(216, 173, 21);
    inset: 0;
    /* background-color: var(--color-primary-button-background); */
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */
/* START_SNIPPET:cart-items-component (INDEX:184) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .cart-items-component:not([data-drawer]) {
    display: block;
    max-width: 100%;
    overflow-x: clip;
  }

  .cart-items-component__page {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .cart-items-component:not([data-drawer]) .section {
    width: 100%;
    min-width: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }

  /* Asteri cart page */
  .cart-items-component:not([data-drawer]) {
    --asteri-cart-bg: #f9f3ee;
    --asteri-cart-card: #ffffff;
    --asteri-cart-text: #111111;
    --asteri-cart-muted: #6f6f6f;
    --asteri-cart-line: #e7e1db;
    --asteri-cart-accent: #c8235e;
    /* --asteri-cart-perks-border: #c9a6a0; */
    --asteri-font-body: 'GreyCliff', sans-serif;
    --asteri-font-body-regular: 'GreyCliffRegular', sans-serif;
    --asteri-font-bold: 'GreyCliffBold', sans-serif;
    --asteri-font-display: 'OrLemmen', serif;
    font-family: var(--asteri-font-body);
    letter-spacing: 0.05em;
  }

  .cart-items-component:not([data-drawer]) .section-background {
    background: var(--asteri-cart-bg);
  }

  .cart-items-component:not([data-drawer]) .cart-page {
    background: var(--asteri-cart-bg);
    color: var(--asteri-cart-text);
    padding-block: 1.5rem 3rem;
    width: 100%;
    min-width: 0;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding-top: 108px;
  }

  .cart-items-component:not([data-drawer]) .cart-page__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--padding-xl) var(--padding-5xl);
    width: 100%;
    min-width: 0;
  }

  .cart-items-component:not([data-drawer]) .cart-page--empty {
    align-items: center;
    text-align: center;
  }

  .cart-page__title{
    margin-bottom: 30px;
  }

  .cart-items-component:not([data-drawer]) .cart-page--empty .cart-page__title,
  .cart-items-component:not([data-drawer]) .cart-page--empty .cart-page__content,
  .cart-items-component:not([data-drawer]) .cart-page--empty .cart-page__items {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cart-items-component:not([data-drawer]) .cart-page--empty .cart-page__items {
    background: transparent;
    padding-inline: 0;
  }

  .cart-items-component:not([data-drawer]) .cart-page--empty .cart-items__wrapper {
    align-items: center;
    text-align: center;
  }

  .cart-items-component:not([data-drawer]) .cart-page--empty .cart-items__empty-button {
    align-self: center;
  }

  .cart-items-component:not([data-drawer]) .cart-page__items {
    background: transparent;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .cart-items-component:not([data-drawer]) .cart-page__summary,
  .cart-items-component:not([data-drawer]) .cart-summary,
  .cart-items-component:not([data-drawer]) .cart-summary__inner,
  .cart-items-component:not([data-drawer]) .section-background + .section .cart-page__summary .cart-summary {
    background: var(--asteri-cart-bg);
  }

  .cart-items-component:not([data-drawer]) .cart-title h1 {
    font-family: var(--asteri-font-display) !important;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--asteri-cart-text);
  }

  .cart-items-component:not([data-drawer]) .cart-title .cart-bubble {
    display: none;
  }

  .cart-items-component:not([data-drawer]) .cart-title__inline-count {
    display: inline;
    font-family: inherit !important;
    font-weight: inherit;
  }

  .cart-items-component:not([data-drawer]) .cart-items--dividers .cart-items__table-row {
    border: 1px solid #E2E8F0;
    /* border-bottom: none; */
    margin-bottom: 0;
    /* padding-bottom: 0; */
    margin-top: 0;
  }

  .cart-items-component:not([data-drawer]) .cart-items__table,
  .cart-items-component:not([data-drawer]) .cart-items__table tbody {
    display: block;
    width: 100%;
  }

  .cart-items-component:not([data-drawer]) .cart-items__table,
  .cart-items-component:not([data-drawer]) .cart-items__table-row,
  .cart-items-component:not([data-drawer]) .cart-form {
    max-width: 100%;
    min-width: 0;
  }

  .cart-items-component:not([data-drawer]) .cart-item-card {
    position: relative;
    overflow: hidden;
    --cart-item-price-width: 6.5rem;

    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    grid-template-areas:
      'media details'
      'media quantity';
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: start;
    padding: 1.25rem;
    margin: 0;
    background: var(--asteri-cart-card);
    border: 1px solid var(--asteri-cart-line);
  }

  .cart-items-component:not([data-drawer]) .cart-items__media {
    width: 6.75rem;
    max-width: 6.75rem;
  }

  .cart-items-component:not([data-drawer]) .cart-items__media-container {
    aspect-ratio: 173 / 187;
    /* border: 1px solid #efefef; */
    background: #fff;
  }

  .cart-items-component:not([data-drawer]) .cart-items__details {
    grid-area: details;
    color: var(--asteri-cart-text);
    padding-inline-end: 2rem;
  }

  .cart-items-component:not([data-drawer]) .cart-items__info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .cart-items-component:not([data-drawer]) .cart-items__product-info {
    flex: 1;
    min-width: 0;
  }

  .cart-items-component:not([data-drawer]) .cart-items__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--asteri-font-display) !important;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: 0.02em;
    margin: 0;
    text-decoration: none;
    color: var(--asteri-cart-text);
  }

  .cart-items-component:not([data-drawer]) .cart-items__title:hover {
    text-decoration: underline;
  }

  .cart-items-component:not([data-drawer]) .cart-items__variants {
    display: none;
  }

  .cart-items-component:not([data-drawer]) .cart-items__variant-panel {
    display: block;
    margin-block-start: 0.35rem;
  }

  .cart-items-component:not([data-drawer]) .cart-items__variant-option {
    font-family: var(--asteri-font-body-regular);
    font-size: 0.875rem;
    color: var(--asteri-cart-muted);
    line-height: 1.4;
    margin: 0;
  }

  .cart-items-component:not([data-drawer]) .cart-items__unit-price-wrapper--header {
    display: none;
  }

  .cart-items-component:not([data-drawer]) .cart-items__quantity {
    grid-area: quantity;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }

  .cart-items-component:not([data-drawer]) .cart-items__quantity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }

  .cart-items-component:not([data-drawer]) .cart-items__quantity-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
  }

  .cart-items-component:not([data-drawer]) .cart-items__quantity-label {
    display: block;
    font-family: var(--asteri-font-body-regular);
    font-size: 0.875rem;
    color: var(--asteri-cart-muted);
    white-space: nowrap;
  }

  .cart-items-component:not([data-drawer]) .cart-items__quantity-controls {
    display: flex;
    align-items: center;
  }

  .cart-items-component:not([data-drawer]) .cart-items .quantity-selector-wrapper {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .cart-items-component:not([data-drawer]) .cart-items .quantity-selector {
    --quantity-selector-width: auto;

    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    flex: 0 0 auto;
  }

  .cart-items-component:not([data-drawer]) .cart-items .quantity-selector button {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    border: 1px solid #111;
    border-radius: 50%;
    font-family: var(--asteri-font-body);
    font-size: 1rem;
    line-height: 1;
    color: var(--asteri-cart-text);
    background: #fff;
    box-shadow: none;
    padding: 0;
  }

  .cart-items-component:not([data-drawer]) .cart-items .quantity-selector .svg-wrapper {
    display: none;
  }

  .cart-items-component:not([data-drawer]) .cart-items .quantity-minus::after {
    content: '-';
  }

  .cart-items-component:not([data-drawer]) .cart-items .quantity-plus::after {
    content: '+';
  }

  .cart-items-component:not([data-drawer]) .cart-items .quantity-selector input {
    width: 1.25rem;
    max-width: 1.25rem;
    min-width: 1.25rem;
    font-family: var(--asteri-font-bold);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .cart-items-component:not([data-drawer]) .cart-items__line-price {
    flex-shrink: 0;
    text-align: end;
    font-size: 0.875rem;
    color: var(--asteri-cart-text);
    white-space: nowrap;
  }

  .cart-items-component:not([data-drawer]) .cart-items__line-price .price,
  .cart-items-component:not([data-drawer]) .cart-summary-page .price {
    /* font-family: var(--asteri-font-bold); */
    font-weight: 700;
  }

  .cart-items-component:not([data-drawer]) .cart-items__line-price-compare {
    display: block;
    font-family: var(--asteri-font-body-regular);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--asteri-cart-muted);
  }

  .cart-items-component:not([data-drawer]) .cart-items__price {
    display: none;
  }

  .cart-items-component:not([data-drawer]) .cart-items__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    width: auto;
    justify-content: flex-start;
  }

  .cart-items-component:not([data-drawer]) .cart-items__edit,
  .cart-items-component:not([data-drawer]) .cart-items__change {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--asteri-font-bold);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    color: var(--asteri-cart-text);
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    cursor: pointer;
  }

  .cart-items-component:not([data-drawer]) .cart-items__edit:hover,
  .cart-items-component:not([data-drawer]) .cart-items__change:hover {
    opacity: 0.75;
    background: none;
  }

  .cart-items-component:not([data-drawer]) .cart-items__change.is-loading {
    text-decoration: none;
    pointer-events: none;
    opacity: 1;
  }

  .cart-items-component:not([data-drawer]) .cart-items__change .cart-items__change-spinner {
    display: none;
    width: 0.85rem;
    height: 0.85rem;
    border: 1.5px solid rgb(17 17 17 / 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: cart-items-change-spin 0.7s linear infinite;
  }

  .cart-items-component:not([data-drawer]) .cart-items__change.is-loading .cart-items__change-label {
    opacity: 0.55;
  }

  .cart-items-component:not([data-drawer]) .cart-items__change.is-loading .cart-items__change-spinner {
    display: inline-block;
  }

  .cart-items-component:not([data-drawer]) .cart-items__remove {
    position: absolute;
    top: 24px;
    right: 28px;
    width: auto;
    height: auto;
    padding: 0;
    /* border: 1px solid #111; */
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    color: var(--asteri-cart-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cart-items-component:not([data-drawer]) .cart-items__remove-svg {
    display: none;
  }

  .cart-items-component:not([data-drawer]) .cart-items__remove-icon {
    display: inline;
    font-size: 20px;
    line-height: 1;
  }

  /* Order summary sidebar */
  .cart-items-component:not([data-drawer]) .cart-summary-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 1.25rem; */
  }

  .cart-items-component:not([data-drawer]) .cart-summary-page__title {
    margin: 0;
    font-family: var(--asteri-font-bold) !important;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--asteri-cart-text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 30px;
  }

  .cart-items-component:not([data-drawer]) .cart-summary-page__lines {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0 30px .5rem 30px;
    /* border-bottom: 1px solid var(--asteri-cart-line); */
  }

  .cart-items-component:not([data-drawer]) .cart-summary-page__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--asteri-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--asteri-cart-text);
  }

  .cart-items-component:not([data-drawer]) .cart-summary-page__line--muted {
    font-family: var(--asteri-font-body-regular);
    font-weight: 400;
    color: var(--asteri-cart-muted);
  }

  .cart-items-component:not([data-drawer]) .cart-summary-page__line--total {
    padding-top: 0.35rem;
    /* font-family: var(--asteri-font-bold); */
    font-size: 1rem;
    /* font-weight: 700; */
  }

  .cart-items-component:not([data-drawer]) .cart-summary-page__note {
    font-weight: 400;
    color: var(--asteri-cart-muted);
  }

  .cart-items-component:not([data-drawer]) .cart-summary-page__discount-label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
  }

  .cart-items-component:not([data-drawer]) .cart-summary-page__line--discount .price {
    color: var(--asteri-cart-text);
  }

  .cart-items-component:not([data-drawer]) .cart-perks {
    border: 2px solid rgb(214, 147, 138);
    border-radius: 0.5rem;
    padding: 1rem;
  }

  .cart-items-component[data-drawer] .cart-perks--drawer {
    background: #f9f3ee;
    border: none;
    border-radius: 0.5rem;
    padding: 1rem;
  }

  .cart-items-component .cart-perks__title {
    margin: 0 0 0.35rem;
    font-family: var(--asteri-font-bold);
    font-weight: 700;
    font-size: 0.875rem;
  }

  .cart-items-component .cart-perks__text {
    margin: 0 0 0.75rem;
    font-family: var(--asteri-font-body-regular);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--asteri-cart-text);
  }

  .cart-items-component .cart-perks__bars {
    margin-top: 0.25rem;
  }

  .cart-items-component .cart-perks__bar-combined {
    position: relative;
    padding-top: 2.5rem;
  }

  .cart-items-component .cart-perks__milestone {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    z-index: 2;
  }

  .cart-items-component .cart-perks__milestone--gift {
    right: 0;
    left: auto;
    transform: none;
  }

  .cart-items-component .cart-perks__milestone img {
    display: block;
    opacity: 0.45;
  }

  .cart-items-component .cart-perks__milestone--active img {
    opacity: 1;
    filter: brightness(0);
  }

  .cart-items-component .cart-perks__track-wrap {
    position: relative;
  }

  .cart-items-component .cart-perks__track {
    height: 4px;
    background: #e5ddd6;
    border-radius: 999px;
    overflow: hidden;
  }

  .cart-items-component .cart-perks__fill {
    height: 100%;
    background: #319795;
    border-radius: inherit;
  }

  /* Arabic: gift on left — fill anchored to physical right, grows left toward gift */
  .cart-items-component .cart-perks--rtl .cart-perks__track {
    position: relative;
  }

  .cart-items-component .cart-perks--rtl .cart-perks__fill {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
  }

  .cart-items-component .cart-perks--rtl .cart-perks__milestone--delivery {
    left: auto;
    transform: translateX(50%);
  }

  .cart-items-component .cart-perks--rtl .cart-perks__milestone--gift {
    right: auto;
    left: 0;
    transform: none;
  }

  .cart-items-component .cart-perks--rtl .cart-perks__dot--delivery {
    left: auto;
    transform: translate(50%, -50%);
  }

  .cart-items-component .cart-perks--rtl .cart-perks__dot--gift {
    right: auto;
    left: 0;
    transform: translate(0, -50%);
  }

  .cart-items-component .cart-perks__dot {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e5ddd6;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .cart-items-component .cart-perks__dot--gift {
    right: 0;
    left: auto;
    transform: translate(0, -50%);
  }

  .cart-items-component .cart-perks__dot--active {
    background: #000;
  }
  .cart-items-component:not([data-drawer]) .cart-installments {
    padding: 1rem;
    border: 1px solid gray;
    border-radius: 4px;
  }

  .cart-installments summary:hover {
    color: inherit;
  }
  .cart-installments__summary{
     padding-block:0px;
    }
    
    .cart-installments__summary span{
    font-family: var(--asteri-font-bold);
     font-size: 15px;
    }

  .cart-items-component:not([data-drawer]) .cart-installments__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--asteri-font-body);
    font-size: 0.875rem;
    font-weight: 500;
  }

  .cart-installments__summary svg{
    width: 1em;
    height: 1em;
    line-height: 1em;
    flex-shrink: 0;
    color: currentcolor;
  }

  .cart-items-component:not([data-drawer]) .cart-installments__summary::-webkit-details-marker {
    display: none;
  }

  .cart-items-component:not([data-drawer]) .cart-installments__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.75rem;
  }

  .cart-items-component:not([data-drawer]) .cart-installments__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--asteri-font-body-regular);
    font-size: 0.8125rem;
  }
  .cart-installments__row img{
    width: 40px;
  }

  .cart-items-component:not([data-drawer]) .cart-summary-page__promo-title {
    margin: 0;
    margin-top: 40px;
    font-family: var(--asteri-font-bold) !important;
    font-size: 20px !important;
    font-weight: 700;
    color: var(--asteri-cart-text);
  }

  .cart-items-component:not([data-drawer]) .cart-actions--page {
    border: 0;
    margin: 0;
  }

  .cart-items-component:not([data-drawer]) .cart-discount__intro {
    margin: 0 0 0.75rem;
    font-size: 16px;
    color: var(--asteri-cart-muted);
  }

  .cart-items-component:not([data-drawer]) .cart-discount__summary {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--asteri-cart-text);
    text-decoration: none;
  }

  .cart-items-component:not([data-drawer]) .cart-discount__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--asteri-cart-text);
    text-decoration: underline;
  }

  .cart-items-component:not([data-drawer]) .cart__ctas--page .cart__checkout-button {
    background: var(--asteri-cart-accent);
    border-color: var(--asteri-cart-accent);
    color: #fff;
    font-family: var(--asteri-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border-radius: 999px;
    min-height: 3rem;
    
  }

  .cart-items-component:not([data-drawer]) .cart-payment-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    margin-right: auto;
    margin-left: auto;
  }

  .cart-items-component:not([data-drawer]) .cart-payment-icons img {
    display: block;
    max-height: 22px;
    width: auto;
    object-fit: contain;
  }

  .cart-items-component:not([data-drawer]) .cart-summary__inner {
    align-items: stretch;
    padding: 0;
    gap: 1.25rem;
  }

  @container cart-items (min-width: 720px) {
    .cart-items-component:not([data-drawer]) .cart-item-card {
      grid-template-columns: 6.75rem minmax(0, 1fr);
      grid-template-areas:
        'media details'
        'media quantity';
    }

    .cart-items-component:not([data-drawer]) .cart-items__quantity-group {
      justify-content: flex-start;
    }
  }

  @media screen and (min-width: 750px) {
    .cart-items-component:not([data-drawer]) .cart-payment-icons{
      max-width: 245px;
    }
    .cart-items-component:not([data-drawer]) .cart-page__content {
      grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--sidebar-width), 100%));
      gap: 2rem;
      align-items: start;
      margin-top: 0 !important;
    }

    .cart-items-component:not([data-drawer]) .cart-page__summary,
    .cart-items-component:not([data-drawer]) .cart-summary,
    .cart-items-component:not([data-drawer]) .cart-summary__inner {
      min-width: 0;
      max-width: 100%;
    }

    .cart-items-component:not([data-drawer]) .cart-summary--extend .cart-summary__inner {
      width: 100%;
    }

    .cart-items-component:not([data-drawer]) .cart-page__items {
      gap: 1.25rem;
    }

    .cart-items-component:not([data-drawer]) .cart-page__summary {
      padding-top: 0;
      position: sticky;
      top: calc(var(--header-height, 0px) + var(--sticky-announcement-height, 0px) + 1rem);
    }

    .cart-items-component:not([data-drawer]) .cart-item-card {
      grid-template-columns: 6.75rem minmax(0, 1fr);
      grid-template-areas:
        'media details'
        'media quantity';
      padding: 18px 30px 32px 30px;
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-items-component:not([data-drawer]) .cart-page__content {
      grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--sidebar-width), 100%));
    }
  }

  /* Asteri cart drawer */
  .cart-items-component[data-drawer] {
    --asteri-cart-card: #ffffff;
    --asteri-cart-text: #111111;
    --asteri-cart-muted: #6f6f6f;
    --asteri-cart-line: #e7e1db;
    --asteri-font-body: 'GreyCliff', sans-serif;
    --asteri-font-body-regular: 'GreyCliffRegular', sans-serif;
    --asteri-font-bold: 'GreyCliffBold', sans-serif;
    --asteri-font-display: 'OrLemmen', serif;
  }

  .cart-items-component[data-drawer] .cart-items__table,
  .cart-items-component[data-drawer] .cart-items__table tbody {
    display: block;
    width: 100%;
  }

  .cart-items-component[data-drawer] .cart-items--dividers .cart-items__table-row {
    border: 1px solid #e2e8f0;
    border-top: none;
    margin-bottom: 0;
    margin-top: 0;
  }

  .cart-items-component[data-drawer] .cart-items--dividers .cart-items__table-row:first-child {
    border-top: 1px solid #e2e8f0;
    border-radius: 1.2rem 1.2rem 0 0;
  }

  .cart-items-component[data-drawer] .cart-items--dividers .cart-items__table-row:last-child {
    border-radius: 0 0 1.2rem 1.2rem;
  }

  .cart-items-component[data-drawer] .cart-items--dividers .cart-items__table-row:only-child {
    border-radius: 1.2rem;
  }

  .cart-items-component[data-drawer] .cart-items__table-row--full-width-variants {
    grid-template-columns: 6.75rem minmax(0, 1fr);
    grid-template-rows: unset;
    grid-template-areas:
      'media details'
      'media quantity';
  }

  .cart-items-component[data-drawer] .cart-items__table-row--full-width-variants .cart-items__details {
    display: block;
  }

  .cart-items-component[data-drawer] .cart-items__table-row--full-width-variants .cart-items__price {
    display: none;
  }

  .cart-items-component[data-drawer] .cart-item-card {
    position: relative;
    overflow: hidden;
    --cart-item-price-width: 6.5rem;

    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    grid-template-areas:
      'media details'
      'media quantity';
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: start;
    padding: 1.25rem;
    margin: 0;
    background: var(--asteri-cart-card);
  }

  .cart-items-component[data-drawer] .cart-items__media {
    width: 6.75rem;
    max-width: 6.75rem;
  }

  .cart-items-component[data-drawer] .cart-items__media-container {
    aspect-ratio: 173 / 187;
    border: 1px solid #efefef;
    background: #fff;
  }

  .cart-items-component[data-drawer] .cart-items__details {
    grid-area: details;
    color: var(--asteri-cart-text);
    padding-inline-end: 2rem;
  }

  .cart-items-component[data-drawer] .cart-items__info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .cart-items-component[data-drawer] .cart-items__product-info {
    flex: 1;
    min-width: 0;
  }

  .cart-items-component[data-drawer] .cart-items__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--asteri-font-display) !important;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: 0.02em;
    margin: 0;
    text-decoration: none;
    color: var(--asteri-cart-text);
  }

  .cart-items-component[data-drawer] .cart-items__variants {
    display: none;
  }

  .cart-items-component[data-drawer] .cart-items__variant-panel {
    display: block;
    margin-block-start: 0.35rem;
  }

  .cart-items-component[data-drawer] .cart-items__variant-option {
    font-family: var(--asteri-font-body-regular);
    font-size: 0.875rem;
    color: var(--asteri-cart-muted);
    line-height: 1.4;
    margin: 0;
  }

  .cart-items-component[data-drawer] .cart-items__unit-price-wrapper--header {
    display: none;
  }

  .cart-items-component[data-drawer] .cart-items__quantity {
    grid-area: quantity;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
  }

  .cart-items-component[data-drawer] .cart-items__quantity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
  }

  .cart-items-component[data-drawer] .cart-items__quantity-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
  }

  .cart-items-component[data-drawer] .cart-items__quantity-label {
    display: block;
    font-family: var(--asteri-font-body-regular);
    font-size: 0.875rem;
    color: var(--asteri-cart-muted);
    white-space: nowrap;
  }

  .cart-items-component[data-drawer] .cart-items__quantity-controls {
    display: flex;
    align-items: center;
  }

  .cart-items-component[data-drawer] .cart-items .quantity-selector-wrapper {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .cart-items-component[data-drawer] .cart-items .quantity-selector {
    --quantity-selector-width: auto;

    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    flex: 0 0 auto;
  }

  .cart-items-component[data-drawer] .cart-items .quantity-selector button {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    border: 1px solid #111;
    border-radius: 50%;
    font-family: var(--asteri-font-body);
    font-size: 1rem;
    line-height: 1;
    color: var(--asteri-cart-text);
    background: #fff;
    box-shadow: none;
    padding: 0;
  }

  .cart-items-component[data-drawer] .cart-items .quantity-selector .svg-wrapper {
    display: none;
  }

  .cart-items-component[data-drawer] .cart-items .quantity-minus::after {
    content: '-';
  }

  .cart-items-component[data-drawer] .cart-items .quantity-plus::after {
    content: '+';
  }

  .cart-items-component[data-drawer] .cart-items .quantity-selector input {
    width: 1.25rem;
    max-width: 1.25rem;
    min-width: 1.25rem;
    font-family: var(--asteri-font-bold);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .cart-items-component[data-drawer] .cart-items__line-price {
    flex-shrink: 0;
    text-align: end;
    font-size: 0.875rem;
    color: var(--asteri-cart-text);
    white-space: nowrap;
  }

  .cart-items-component[data-drawer] .cart-items__line-price .price {
    font-weight: 700;
  }

  .cart-items-component[data-drawer] .cart-items__line-price-compare {
    display: block;
    font-family: var(--asteri-font-body-regular);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--asteri-cart-muted);
  }

  .cart-items-component[data-drawer] .cart-items__price {
    display: none;
  }

  .cart-items-component[data-drawer] .cart-items__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    width: auto;
    justify-content: flex-start;
  }

  .cart-items-component[data-drawer] .cart-items__edit {
    display: none;
  }

  .cart-items-component[data-drawer] .cart-items__change {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--asteri-font-bold);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    color: var(--asteri-cart-text);
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    cursor: pointer;
  }

  .cart-items-component[data-drawer] .cart-items__change:hover {
    opacity: 0.75;
    background: none;
  }

  .cart-items-component[data-drawer] .cart-items__change.is-loading {
    text-decoration: none;
    pointer-events: none;
    opacity: 1;
  }

  .cart-items-component[data-drawer] .cart-items__change .cart-items__change-spinner {
    display: none;
    width: 0.85rem;
    height: 0.85rem;
    border: 1.5px solid rgb(17 17 17 / 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: cart-items-change-spin 0.7s linear infinite;
  }

  .cart-items-component[data-drawer] .cart-items__change.is-loading .cart-items__change-label {
    opacity: 0.55;
  }

  .cart-items-component[data-drawer] .cart-items__change.is-loading .cart-items__change-spinner {
    display: inline-block;
  }

  .cart-items-component.bogos-gift-changing {
    position: relative;
    pointer-events: none;
  }

  .cart-items-component.bogos-gift-changing::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgb(255 255 255 / 0.45);
    pointer-events: none;
  }

  .bogos-gift-slider-view.is-loading {
    position: relative;
    min-height: 7.5rem;
  }

  .bogos-gift-slider-view.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgb(255 255 255 / 0.55);
  }

  .bogos-gift-slider-view.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.75rem 0 0 -0.75rem;
    border: 2px solid rgb(17 17 17 / 0.15);
    border-top-color: #c8235e;
    border-radius: 50%;
    animation: cart-items-change-spin 0.7s linear infinite;
  }

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

  .cart-items-component[data-drawer] .cart-items__remove {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    color: var(--asteri-cart-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cart-items-component[data-drawer] .cart-items__remove-svg {
    display: none;
  }

  .cart-items-component[data-drawer] .cart-items__remove-icon {
    display: inline;
    font-size: 20px;
    line-height: 1;
  }

  /* ASTERI -- shrink the drawer's product card on mobile: smaller image,
     tighter padding/gaps, so each line item takes noticeably less vertical
     space. Desktop drawer keeps the original, more spacious sizing above. */
  @media screen and (max-width: 749px) {
    .cart-items-component[data-drawer] .cart-items__table-row--full-width-variants {
      grid-template-columns: 5rem minmax(0, 1fr);
    }

    .cart-items-component[data-drawer] .cart-item-card {
      grid-template-columns: 5rem minmax(0, 1fr);
      column-gap: 0.75rem;
      row-gap: 0.5rem;
      padding: 0.875rem;
    }

    .cart-items-component[data-drawer] .cart-items__media {
      width: 5rem;
      max-width: 5rem;
    }

    .cart-items-component[data-drawer] .cart-items__details {
      padding-inline-end: 1.5rem;
    }

    .cart-items-component[data-drawer] .cart-items__title {
      font-size: 1rem;
    }

    .cart-items-component[data-drawer] .cart-items__quantity {
      gap: 0.4rem;
    }

    .cart-items-component[data-drawer] .cart-items__quantity-row {
      gap: 0.75rem;
    }

    .cart-items-component[data-drawer] .cart-items__remove {
      top: 0.875rem;
      right: 0.875rem;
    }
  }
/* END_SNIPPET:cart-items-component */
/* START_SNIPPET:cart-products (INDEX:187) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

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

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

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

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

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

  .cart-items__table * {
    margin: 0;
  }

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

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

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

    .cart-items__details {
      display: contents;
    }

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

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

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__set-accordion {
    margin-block-start: 0.5rem;
    width: 100%;
  }

  .cart-items__details .cart-items__set-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    cursor: pointer;
    font-size: var(--font-size--xs);
    font-weight: 600;
    color: var(--asteri-cart-text, var(--color-foreground));
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .cart-items__set-toggle::-webkit-details-marker {
    display: none;
  }

  .cart-items__set-toggle-label--hide {
    display: none;
  }

  .cart-items__set-accordion[open] .cart-items__set-toggle-label--show {
    display: none;
  }

  .cart-items__set-accordion[open] .cart-items__set-toggle-label--hide {
    display: inline;
  }

  .cart-items__set-chevron {
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg);
    translate: 0 -0.1em;
    transition: transform 0.15s ease;
  }

  .cart-items__set-accordion[open] .cart-items__set-chevron {
    transform: rotate(-135deg);
    translate: 0 0.1em;
  }

  .cart-items__set-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
  }

  .cart-items__set-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
  }

  .cart-items__set-item-media {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    background: var(--color-background);
  }

  .cart-items__set-item-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-items__set-item-image--placeholder {
    background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  }

  .cart-items__set-item-info {
    min-width: 0;
    flex: 1;
  }

  .cart-items__details .cart-items__set-item-title {
    margin: 0;
    font-size: var(--font-size--xs);
    font-weight: 600;
    line-height: 1.35;
    color: var(--asteri-cart-text, var(--color-foreground));
  }

  .cart-items__set-item-qty {
    font-weight: 600;
  }

  .cart-items__details .cart-items__set-item-shade {
    margin: 0.15rem 0 0;
    font-size: var(--font-size--xs);
    font-weight: 400;
    color: var(--asteri-cart-muted, var(--color-foreground));
  }

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

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

  .cart-items__title--static {
    cursor: default;
    pointer-events: none;
  }

  .cart-items__media-container--static {
    cursor: default;
    pointer-events: none;
  }

  .cart-items__table-row--bogos-gift .cart-items__quantity-group {
    display: none;
  }

  .cart-items__table-row--bogos-gift .cart-items__quantity-row {
    justify-content: flex-end;
  }

  .cart-items__table-row--bogos-gift .cart-items__line-price {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-inline-start: auto;
  }

  .cart-items__table-row--bogos-gift .cart-items__line-price-values {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-align: end;
  }

  .cart-items__table-row--bogos-gift .cart-items__line-price-compare {
    display: block;
  }

  .cart-items__free-gift {
    display: inline-block;
    flex-shrink: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #00263e;
    border: 1px solid #dea9a1;
    background: #f8f4f0;
    padding: 5px 10px;
  }

  .cart-items__title .cart-items__title-mf,
  .cart-items__title .pdp-mf {
    display: inline;
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant-panel {
    display: none;
  }

  .cart-items__variant-option {
    margin: 0;
    font-size: var(--font-size--sm);
  }

  .cart-items__info-row {
    display: block;
  }

  .cart-items__quantity-row {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .cart-items__quantity-group {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    flex-wrap: wrap;
  }

  .cart-items__quantity-label {
    display: none;
  }

  .cart-items__actions {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-inline-start: auto;
  }

  .cart-items__edit {
    display: none;
  }

  .cart-items__remove-icon {
    display: none;
  }

  .cart-items__unit-price-wrapper--header {
    display: none;
  }

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

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

  .cart-drawer .cart-items__quantity {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: fit-content;
  }

  .cart-drawer .cart-items__actions {
    margin-inline-start: 0;
    width: auto;
  }

  .cart-drawer .cart-items__quantity-row {
    width: auto;
  }

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__property {
    display: block;
  }

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

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

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

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

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

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

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

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

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

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

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

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */
/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:207) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */
/* START_SNIPPET:group (INDEX:210) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */
/* START_SNIPPET:header-actions (INDEX:211) */
.asteri-progress-bar-drawer-wrap {
    margin-inline: 20px;
    background: #FAF4EE;
    border-radius: 12px;
    padding:16px;
    margin-bottom: 28px;
  }
  .header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  .account-button__link {
    min-width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
    text-decoration: none;
    line-height: normal;
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text .account-button__link {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);
    --cart-drawer-width: 600px;

    /* @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    } */
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: #ffffff;

    @media screen and (min-width: 750px) {
      width: var(--cart-drawer-width);
      max-width: 95vw;
    }
  }

  .cart-drawer__dialog[open]:not(.dialog-closing) {
    animation: move-and-fade 0.5s var(--ease-out-quad) forwards;
  }

  .cart-drawer__dialog::backdrop {
    /* stylelint-disable-next-line declaration-no-important */
    backdrop-filter: blur(12px) !important;
    background: rgb(0 0 0 / 0.48);
    animation: none !important;
  }

  .cart-drawer__dialog[open]::backdrop {
    /* stylelint-disable-next-line declaration-no-important */
    backdrop-filter: blur(12px) !important;
    background: rgb(0 0 0 / 0.48);
    animation: none !important;
  }

  .cart-drawer__dialog.dialog-closing::backdrop {
    /* stylelint-disable-next-line declaration-no-important */
    backdrop-filter: blur(12px) !important;
    background: rgb(0 0 0 / 0.48);
    opacity: 0;
    animation: none !important;
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: #ffffff;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    mask-image: unset !important;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
    font-family: 'OrLemmen', serif !important;
    font-weight: 300;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .cart-drawer__perks {
    flex-shrink: 0;
    padding-inline: var(--cart-drawer-padding);
    padding-bottom: 1rem;

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

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

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

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__heading {
    margin-bottom: var(--margin-md);
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__items {
    flex: 0 1 auto;
    min-height: auto;
    width: 100%;
  }
  /* .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  } */

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

    position: static;
    bottom: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: var(--gap-xl); */
    gap:8px;
    padding: var(--cart-drawer-summary-padding);
    margin-top: 0;
    flex-shrink: 0;
    background-color: #ffffff;
    mask-image: none;
    /*
     * min-height (not height) reserves the same space from first paint so
     * the summary doesn't jump once its async content (e.g. Shopify's
     * dynamic checkout wallet buttons) finishes loading, but still lets the
     * box grow instead of clipping content on a day it needs more than this
     * (installments open, an extra payment icon row, wrapped button text in
     * another locale). 185px matches the measured rendered height of the
     * leanest real content (KWD market: total line + Check out + View bag,
     * no installments/extra icons) -- adjust here if that content changes.
     */
    min-height: 185px;

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

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow-y: visible;
  }

  .cart-drawer__dialog[cart-summary-sticky='true'] .cart-drawer__summary {
    position: sticky;
    bottom: 0;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__summary .cart__checkout-button {
    background: #c8235e;
    border-color: #c8235e;
    color: #fff;
    font-family: 'GreyCliffBold', sans-serif !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    min-height: 2rem;
  }

  .cart-drawer__summary .cart__checkout-button:hover {
    background: transparent;
    border-color: #c8235e;
    color: #c8235e;
  }

  .cart-drawer__summary .cart__view-bag-button {
    width: 100%;
    min-height: 3rem;
    display: grid;
    place-content: center;
    background: transparent;
    color: #00263e;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px #00263e;
    font-family: 'GreyCliffBold', sans-serif !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition:unset;
  }

  .cart-drawer__summary .cart__view-bag-button:hover {
    background: #c8235e;
    color: #fff;
    border-color:#c8235e;
    box-shadow: inset 0 0 0 1.5px #c8235e;
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items-list {
    overflow: visible;
    width: 100%;
    flex: 0 0 auto;
    min-height: auto;
    border: none;
    border-radius: 0;
    padding:0 20px;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: auto;
    padding-inline: var(--cart-drawer-padding);
    overflow: visible;
    padding: 0px;

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

  .cart-drawer__items > .bogos-gift-slider-view {
    flex: 0 0 auto;
    width: 100%;
    margin-block-start: 1rem;

  }

  .cart-drawer__items-list .cart-items__table-row {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .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__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer__header {
    background-color: #ffffff;
    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;
    flex-shrink: 0;

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

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;

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

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

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

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

    position: relative;
  }

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

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

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

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

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

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

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

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

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

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:212) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: 27px;
    height: 27px;
  }

  .header__icon--summary .header-drawer-icon svg {
    width: 100%;
    height: 100%;
  }

  /* Close (X) icons: the top drawer-panel close button and the
     submenu back-panel close button both reuse .menu-drawer__close-button.
     .menu-drawer svg further below hardcodes --icon-size-xs directly on
     every <svg> inside the drawer with equal specificity, so this needs an
     extra class to reliably win regardless of source order. */
  .menu-drawer .menu-drawer__close-button .header-drawer-icon,
  .menu-drawer .menu-drawer__close-button svg {
    width: 26px;
    height: 26px;
  }

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

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

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

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

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

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

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

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

  .menu-drawer__navigation {
    padding: 0;

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

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-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;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

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

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  /* .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  } */

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

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

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

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

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

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

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

  /* Fix alignment for collection image mode links without images in drawer */

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

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

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-family: 'GreyCliffRegular';
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(0, 38, 62);
  }

  .menu-drawer__menu-item--has-toggle {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .menu-drawer__menu-item-link {
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 3rem);
    color: inherit;
    text-decoration: none;
    flex: 0 1 auto;
    min-width: 0;
  }

  .menu-drawer__menu-item-hitarea {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0.75rem;
    min-height: 100%;
    cursor: pointer;
  }

  .menu-drawer__list-item--deep {
    border-bottom: 1px solid rgb(179, 190, 197);
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-top: auto;
    /* margin-block: auto var(--padding-sm); */
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__utility-links svg{
      width: 24px;
      height:24px;
  }

  /* .asteri-df__ic already sets 30px inline above, but
     .menu-drawer__utility-links svg (one class + one type = higher
     specificity than a lone .asteri-df__ic class) was silently winning and
     shrinking both the account and store-locator icons back down to 24px.
     This selector adds a second class so it reliably wins instead. */
  .menu-drawer__utility-links .asteri-df__ic {
    width: 30px;
    height: 30px;
  }

  .menu-drawer__localization-row {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
    flex-wrap: wrap;
  }

  .menu-drawer__localization-row .doubly-drawer-slot {
    display: flex;
    align-items: center;
  }

  .menu-drawer__localization-row .doubly-drawer-slot .doubly-nice-select,
  .menu-drawer__localization-row .doubly-drawer-slot select.currency-switcher {
    margin: 0;
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
  /* ==========================================================
     ASTERI — mobile drawer fixes (verified against Horizon v0.6)
     ========================================================== */

  /* 1. FULL-SCREEN DRAWER.
     snippets/theme-styles-variables.liquid defines:
         --drawer-width: 95vw;
         --drawer-max-width: 500px;
     .menu-drawer consumes both, so the panel deliberately stops 5vw short of
     the right edge — that is the gap. Override both on mobile. width:100%
     resolves against the viewport here because .menu-drawer is position:fixed,
     which is safer than 100vw (that would include the scrollbar gutter).
     border-right / box-shadow are off-screen at full width, so drop them. */
  @media screen and (max-width: 749px) {
    .menu-drawer {
      width: 100%;
      max-width: 100%;
      border-right: none;
      box-shadow: none;
    }
  }

  /* 2. SCROLL FLICKER.
     --drawer-height is 100dvh, and .menu-drawer__submenu / __backdrop also
     hardcode 100dvh. dvh tracks the DYNAMIC viewport: on mobile, scrolling up
     slides the browser address bar back in, dvh shrinks, and the fixed drawer
     is re-laid-out mid-gesture every frame — that is the flicker.
     svh is the stable small-viewport unit and never changes as browser chrome
     shows/hides. Browsers too old for svh are also too old for dvh, so the
     original 100dvh above stays as the automatic fallback.
     overscroll-behavior stops the scroll chaining into the page behind, which
     is what makes the address bar reappear in the first place. */
  @media screen and (max-width: 749px) {
    .menu-drawer,
    .menu-drawer__submenu,
    .menu-drawer__backdrop {
      height: 100svh;
    }

    .menu-drawer,
    .menu-drawer__submenu,
    .menu-drawer__inner-submenu {
      overscroll-behavior: contain;
    }
  }
/* END_SNIPPET:header-drawer */
/* START_SNIPPET:predictive-search-styles (INDEX:236) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

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

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

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

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

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

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

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

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

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

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

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

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

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

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:product-badges-styles (INDEX:248) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:262) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

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

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

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:269) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

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

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */
/* START_SNIPPET:quick-add-styles (INDEX:271) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */
/* START_SNIPPET:resource-card (INDEX:273) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */
/* START_SNIPPET:search-modal (INDEX:278) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

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

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }
#snize-instant-search-results{
  width:100%;
}
  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: none;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;
    

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

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

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

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

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

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

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

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

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

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

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

  .search-input:hover {
    background-color: transparent;
  }

  /*
   * The blue x that appears once the field has text is the browser's own clear
   * button, which `type="search"` opts into. It sits inside the field next to the
   * theme's close-modal button, so the two read as a pair of conflicting controls.
   *
   * Kept as its own rule rather than grouped with the -ms- selector below: a
   * selector list is all-or-nothing, so one pseudo-element the browser does not
   * recognise would throw away the whole rule.
   */
  .search-input::-webkit-search-cancel-button,
  .search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  /* Legacy Edge and IE draw their own, under a different name. */
  .search-input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

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

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

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

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

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

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

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

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

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

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

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

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */
/* START_SNIPPET:search (INDEX:279) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

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

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      /* margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1); */
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */
/* START_SNIPPET:section (INDEX:280) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

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

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }

  .section-content-with-decorative {
    display: grid;
    align-items: center;
    width: 100%;
    column-gap: clamp(1.5rem, 4vw, 4rem);
  }

  .section-content-with-decorative--end .section-decorative-image {
    order: 2;
  }

  .section-decorative-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    opacity: var(--decorative-image-opacity, 0.4);
    pointer-events: none;
    user-select: none;
    left:-4%;
    bottom: -28%;
    width: 17%;
    position: absolute;
  }

  .section-decorative-image__media {
    display: block;
    width: 100%;
    max-width: var(--decorative-image-max-width, 100%);
    height: auto;
    object-fit: cover;
  }

  .section-decorative-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }

 

  @media screen and (max-width: 749px) {
    .section-content-with-decorative {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 1.5rem;
    }

    .section-content-with-decorative--end .section-decorative-image {
      order: 0;
    }

    .section-decorative-image__media {
      max-width: min(var(--decorative-image-max-width, 70%), 220px);
    }

    .section-content-with-decorative--hide-mobile .section-decorative-image {
      display: none;
    }
  }
/* END_SNIPPET:section */
/* START_SNIPPET:skip-to-content-link (INDEX:282) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:slideshow-styles (INDEX:288) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    min-height: var(--slide-min-height);
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    overscroll-behavior-x: none;
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

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

  /*
   * Testing: cursor never renders on touch, so this was pure cost with no visual benefit
   * on mobile — but an unscoped "grab" cursor on the actual scroll ancestor of every
   * button in the carousel is exactly the kind of "this looks draggable" signal that
   * makes iOS Safari require a priming tap before the click on a descendant fires. Not
   * confirmed as the fix.
   */
  @media (hover: hover) and (pointer: fine) {
    slideshow-slides {
      cursor: var(--cursor);
    }
  }

  /* Horizontal drag is handled in JS so infinite carousels can wrap on the last slide */
  slideshow-component[infinite]:not([disabled='true']) slideshow-slides {
    touch-action: pan-y pinch-zoom;
  }

  /*
   * Testing alongside the cursor fix above: tapdebug showed a second, separate failure
   * mode on this button specifically — the browser cancelling the touch over a few px of
   * ordinary finger drift even though the carousel's own scrollLeft never changed. pan-y
   * stops this button from ever being treated as a valid horizontal-pan start. Not
   * confirmed.
   */
  slideshow-slide .product-card-add-to-bag__button {
    touch-action: pan-y;
  }

  /* Firefox starts a native link/image drag, which cancels pointermove and kills swipe. */
  slideshow-slides img,
  slideshow-slides a,
  slideshow-slides .slide__link {
    -webkit-user-drag: none;
    user-select: none;
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning]) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  /*
   * :hover scoped to real pointer devices only (iOS synthesizes :hover on tap). One instance of
   * the Add to Bag first-tap bug, not the full fix.
   */
  @media (pointer: fine) {
    slideshow-component:hover > slideshow-container > slideshow-slides > slideshow-slide {
      content-visibility: visible;
    }
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

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

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */
/* START_SNIPPET:text (INDEX:305) */
:root {
    --text-align-default: left;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .product-title__full-name {
    margin: 0;
  }

  .product-title__full-name pdp-metafield-content,
  .product-title__full-name .pdp-mf {
    display: inline;
  }
/* END_SNIPPET:text */