/** Shopify CDN: Minification failed

Line 571:9 Expected identifier but found whitespace
Line 571:11 Unexpected "{"
Line 571:20 Expected ":"
Line 571:60 Expected ":"
Line 572:11 Expected identifier but found whitespace
Line 572:13 Unexpected "{"
Line 572:22 Expected ":"
Line 572:64 Expected ":"
Line 573:10 Expected identifier but found whitespace
Line 573:12 Unexpected "{"
... and 18 more hidden warnings

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

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

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

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

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

  .announcement-bar__slide {
    /* Sequential crossfade, not a simultaneous one. Both slides sit in the
       same grid cell, so fading them over the same 0.5s window left both at
       ~50% opacity mid-transition with their text visibly overlapping — which
       reads as a muddy, unsmooth fade (and is worse for Glass Panel, where the
       pills are different widths). The outgoing slide now clears first, then
       the incoming one fades in after it, so only one message is ever legible.
       visibility switches instantly at the right moment rather than being
       eased, which is what it actually needs. 2026-08-02. */
    transition: opacity 0.32s ease-in 0.2s, visibility 0s linear 0.2s;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease-out 0s, visibility 0s linear 0.2s;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .announcement-bar__slide,
    .announcement-bar__slide[aria-hidden='true'] {
      transition: opacity 0.01s linear, visibility 0s linear;
    }
  }

  @media screen and (max-width: 749px) {
    /* One line on mobile, always (Sanjay, 2026-08-02). Long messages such as
       the corporate-gifting one wrapped to three lines and tripled the bar's
       height. Marquee Strip is excluded from the ellipsis because it scrolls
       its overflow instead of clipping it — it only needs the nowrap. */
    .announcement-bar__text {
      white-space: nowrap;
      max-width: 100%;
    }
    .announcement-bar:not(.announcement-bar--m-marquee-strip) .announcement-bar__text {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* Marquee Strip drops the floating-island treatment on mobile — a
       full-bleed scrolling strip is the whole point of the style, and an inset
       rounded capsule fights it by clipping the scroll runway. Tint and blur
       are kept, so it still reads as glass, just edge to edge. */
    .announcement-bar--m-marquee-strip[data-glass-shape="island"] {
      /* All sides, not just inline: the .is-hero-anchored island rule sets a
         14px top margin and outranks the mobile island rule, so zeroing only
         margin-inline left the strip floating 14px below the hero's top edge
         instead of pinned to it. */
      margin: 0 !important;
      border-radius: 0 !important;
    }
    /* Marquee switches the slider to flex-direction: column, where
       align-items governs the HORIZONTAL axis — so with no justify-content the
       text sat flush to the top of the bar rather than centred in it
       (measured: slide 49-68 inside a 49-79 slider). */
    .announcement-bar--m-marquee-strip .announcement-bar__slider {
      justify-content: center;
    }
  }

  .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;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .announcement-bar__slide .announcement-bar__text {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

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

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

  /* Brand strip typography — visual treatment only, colours come from section
     settings (see inline <style> generated when use_brand_colors is on). */
  .announcement-bar--brand .announcement-bar__text,
  .announcement-bar--brand .announcement-bar__text * {
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .announcement-bar--brand .slideshow-control { opacity: 0.7; }
  .announcement-bar--brand .slideshow-control:hover { opacity: 1; }

  /* Per-breakpoint text size and row height overrides */
  .announcement-bar__text { font-size: var(--ab-text-desktop, 14px); }
  .announcement-bar[style*="--ab-height-desktop"] .announcement-bar__slider {
    min-height: var(--ab-height-desktop);
  }
  @media screen and (min-width: 750px) and (max-width: 1023px) {
    .announcement-bar__text { font-size: var(--ab-text-tablet, 13px); }
    .announcement-bar[style*="--ab-height-tablet"] .announcement-bar__slider {
      min-height: var(--ab-height-tablet);
    }
  }
  @media screen and (max-width: 749px) {
    .announcement-bar__text { font-size: var(--ab-text-mobile, 10px); }
    .announcement-bar[style*="--ab-height-mobile"] .announcement-bar__slider {
      min-height: var(--ab-height-mobile);
    }
  }

  /* ─────────────────────────────────────────────────────────────────────────────
     VARIANTS — now independently selectable per breakpoint via the
     announcement-bar--d- / --t- / --m- class prefixes instead of one shared
     per-variant class.

     2026-08-02: the previous wording here spelled those prefixes with a
     trailing star ("--d-" plus star, slash, "--t-" plus star …). That star
     immediately followed by a slash is a CSS comment TERMINATOR, so the
     comment ended mid-sentence and the remaining prose — including a literal
     brace — was parsed as CSS. The malformed rule that produced swallowed the
     entire @media block below it, which is why Marquee Strip and Dual Split
     silently did nothing while Glass Panel (further down, after the parser
     recovered) worked fine. Never write a star-slash sequence inside a CSS
     comment, even when describing class names.
     ───────────────────────────────────────────────────────────────────────────── */

  @media screen and (min-width: 1024px) {
    .announcement-bar--d-marquee-strip .announcement-bar__slider { flex-direction: column; }
    .announcement-bar--d-marquee-strip .announcement-bar__slides {
      display: flex; width: calc(100% + 48px); margin: 0; padding: 0 24px; overflow: hidden;
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .announcement-bar--d-marquee-strip .announcement-bar__slide {
      flex-shrink: 0; white-space: nowrap; display: inline-block;
      opacity: 1 !important; visibility: visible !important; animation: marquee-scroll 35s linear infinite;
    }
    .announcement-bar--d-marquee-strip .announcement-bar__slide:not(:first-child) { margin-left: 40px; }
    .announcement-bar--d-marquee-strip .announcement-bar__slide:not(:first-child)::before {
      content: '·'; display: inline-block; margin-right: 40px; opacity: 0.4;
    }
    .announcement-bar--d-marquee-strip slideshow-arrows { display: none !important; }

    .announcement-bar--d-dual-split .announcement-bar__slider { display: flex; flex-direction: row; width: 100%; }
    .announcement-bar--d-dual-split .announcement-bar__slides {
      display: flex; flex-direction: row; width: 100%; margin: 0; max-width: none;
    }
    .announcement-bar--d-dual-split .announcement-bar__slide {
      flex: 1; text-align: center; padding: 12px 20px; opacity: 1 !important; visibility: visible !important;
      border-right: 1px solid var(--color-border, rgba(0,0,0,0.08)); background: transparent;
    }
    .announcement-bar--d-dual-split .announcement-bar__slide:last-child { border-right: none; }
    .announcement-bar--d-dual-split slideshow-arrows { display: none !important; }
    .announcement-bar--d-dual-split .announcement-bar__text { margin: 0; white-space: normal; }
  }

  @media screen and (min-width: 750px) and (max-width: 1023px) {
    .announcement-bar--t-marquee-strip .announcement-bar__slider { flex-direction: column; }
    .announcement-bar--t-marquee-strip .announcement-bar__slides {
      display: flex; width: calc(100% + 48px); margin: 0; padding: 0 24px; overflow: hidden;
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .announcement-bar--t-marquee-strip .announcement-bar__slide {
      flex-shrink: 0; white-space: nowrap; display: inline-block;
      opacity: 1 !important; visibility: visible !important; animation: marquee-scroll 35s linear infinite;
    }
    .announcement-bar--t-dual-split .announcement-bar__slider { display: flex; flex-direction: row; width: 100%; }
    .announcement-bar--t-dual-split .announcement-bar__slides {
      display: flex; flex-direction: row; width: 100%; margin: 0; max-width: none;
    }
    .announcement-bar--t-dual-split .announcement-bar__slide {
      flex: 1; text-align: center; padding: 12px 20px; opacity: 1 !important; visibility: visible !important;
      border-right: 1px solid var(--color-border, rgba(0,0,0,0.08)); background: transparent;
    }
    .announcement-bar--t-dual-split .announcement-bar__slide:last-child { border-right: none; }
  }

  @media screen and (max-width: 749px) {
    .announcement-bar--m-marquee-strip .announcement-bar__slider { flex-direction: column; }
    .announcement-bar--m-marquee-strip .announcement-bar__slides {
      display: flex; width: calc(100% + 24px); margin: 0; padding: 0 12px; overflow: hidden;
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .announcement-bar--m-marquee-strip .announcement-bar__slide {
      flex-shrink: 0; white-space: nowrap; display: inline-block;
      opacity: 1 !important; visibility: visible !important; animation: marquee-scroll 35s linear infinite;
    }
    /* Dual Split is intentionally NOT offered on mobile — 3 flex columns
       don't fit a 390px viewport. If style_variant_mobile is set to
       dual-split anyway, fall back to Centered Pill's default (no class
       styling applied) rather than rendering broken squeezed columns. */
  }

  @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
  @media (prefers-reduced-motion: reduce) {
    .announcement-bar--d-marquee-strip .announcement-bar__slide,
    .announcement-bar--t-marquee-strip .announcement-bar__slide,
    .announcement-bar--m-marquee-strip .announcement-bar__slide { animation: none; }
  }

  /* ─────────────────────────────────────────────────────────────────────────────
     VARIANT: glass-panel — floating frosted pill-groups instead of a solid bar.
     Independent of the background_style:glass toggle (Task 5) — this is a
     structural layout choice, not just a finish.

     Round 3, Fix H: each breakpoint's rules now live inside their OWN
     @media query (desktop/tablet/mobile classes are all present in the DOM
     regardless of viewport — style_variant_desktop/tablet/mobile just add
     their own --d-/--t-/--m- class unconditionally), matching the pattern
     already used by marquee-strip/dual-split above. Previously these three
     selector groups were combined, unscoped by width, so selecting Glass
     Panel on ONE breakpoint changed the LAYOUT (flex-wrap, pill shape,
     arrows hidden) at ALL three breakpoints even when the other two stayed
     on a different style_variant.
     ───────────────────────────────────────────────────────────────────────────── */
  @media screen and (min-width: 1024px) {
    /* Round 6, Fix N (Sanjay, 2026-08-02: "don't add additional row 1 for
       hardcoded and 1 for festive, instead have fade in fade out") — Glass
       Panel originally showed every message as a permanently-visible pill
       wrapped into its own row (the .slider/.slides flex-wrap override
       below, now removed, plus opacity/visibility:!important on every
       slide). Sanjay wants Glass Panel to rotate one message at a time like
       every other style, just pill-shaped instead of a full-width bar — so
       this no longer touches .slider/.slides layout at all (the base
       grid-stack single-slide mechanism handles the fade), and only styles
       whichever slide is currently visible. */
    .announcement-bar--d-glass-panel .announcement-bar__slides {
      justify-items: center;
    }
    .announcement-bar--d-glass-panel .announcement-bar__slide {
      /* currentColor-derived, not a fixed white — a fixed rgba(255,255,255,…)
         is invisible against light presets (ivory-gold/champagne/winter-amber/
         sage-whisper), since white-on-near-white has no contrast (final-review
         Fix 5). Building translucency from whatever text colour is already
         active works against any scheme, dark or light. */
      background: color-mix(in srgb, currentColor 12%, transparent);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
      border-radius: 999px;
      padding: 6px 16px;
      width: auto;
      max-width: calc(100% - 32px);
    }
  }

  @media screen and (min-width: 750px) and (max-width: 1023px) {
    /* Round 6, Fix N — see the desktop block above for the full rationale. */
    .announcement-bar--t-glass-panel .announcement-bar__slides {
      justify-items: center;
    }
    .announcement-bar--t-glass-panel .announcement-bar__slide {
      background: color-mix(in srgb, currentColor 12%, transparent);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
      border-radius: 999px;
      padding: 6px 16px;
      width: auto;
      max-width: calc(100% - 32px);
    }
  }

  @media screen and (max-width: 749px) {
    /* Round 6, Fix N — see the desktop block above for the full rationale. */
    .announcement-bar--m-glass-panel .announcement-bar__slides {
      justify-items: center;
    }
    .announcement-bar--m-glass-panel .announcement-bar__slide {
      background: color-mix(in srgb, currentColor 12%, transparent);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
      border-radius: 999px;
      padding: 6px 16px;
      width: auto;
      max-width: calc(100% - 32px);
    }
  }

  /* ── background_style: glass — layers a frosted finish on top of
     whichever style_variant is active. Does NOT change layout, only
     the fill (unlike the glass-panel style_variant, which is a distinct
     layout). See Task 8 for the additional glass-over-hero positioning
     that applies specifically to the festive row. */
  .announcement-bar--glass {
    background: transparent !important;
  }
  .announcement-bar--glass .announcement-bar__slide,
  .announcement-bar--glass .announcement-bar__slides {
    background: color-mix(in srgb, currentColor 12%, transparent);
    -webkit-backdrop-filter: blur(var(--ab-glass-blur, 12px));
    backdrop-filter: blur(var(--ab-glass-blur, 12px));
  }

  /* Auto-offer row — inherits the bar's own colour scheme (currentColor),
     never hardcoded, so it matches whatever scheme/brand colours are active. */
  .sdf-announce-offer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-size: var(--type-micro);
    font-weight: 600;
    border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  }
/* END_SECTION:header-announcements */
/* START_SECTION:product-information (INDEX:50) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

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

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

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

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

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

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

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

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

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

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

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

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

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

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

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

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

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

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

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

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

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

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

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

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

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */
/* START_SECTION:sindhi-festive-floater (INDEX:112) */
.sff {
    position: fixed;
    z-index: 8000;
    left: {{ section.settings.offset_left | default: 20 }}px;
    bottom: {{ section.settings.offset_bottom | default: 24 }}px;
    width: {{ section.settings.badge_size | default: 60 }}px;
    height: {{ section.settings.badge_size | default: 60 }}px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
    text-decoration: none;
    display: block;
  }
  .sff--circle { border-radius: 50%; }
  .sff--ribbon {
    width: auto;
    min-width: 140px;
    height: 40px;
    border-radius: 4px 16px 16px 4px;
    clip-path: polygon(0% 50%, 6% 0%, 100% 0%, 100% 100%, 6% 100%);
  }
  .sff__poster, .sff__video {
    width: 100%; height: 100%; object-fit: cover;
  }
  @media screen and (max-width: 749px) {
    .sff {
      bottom: calc({{ section.settings.offset_bottom_mobile | default: 80 }}px + env(safe-area-inset-bottom, 0px));
      left: {{ section.settings.offset_left_mobile | default: 16 }}px;
      width: {{ section.settings.badge_size_mobile | default: 48 }}px;
      height: {{ section.settings.badge_size_mobile | default: 48 }}px;
    }
    .sff--ribbon { width: auto; min-width: 110px; height: 34px; }
  }
  .sff:focus-visible { outline: 3px solid var(--gold, #ab8744); outline-offset: 3px; }
/* END_SECTION:sindhi-festive-floater */
/* START_SECTION:sindhi-footer-compliance (INDEX:113) */
.sp-footer-compliance {
    padding: 24px 20px 16px;
    font-size: 12.5px;
    font-family: var(--font-body--family, -apple-system, sans-serif);
    line-height: 1.5;
  }

  .fc__contact-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
    padding: 12px 0;
    text-align: center;
  }

  .fc__contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--fc-text);
    font-size: 12px;
  }

  .fc__link {
    color: var(--fc-text);
    text-decoration: none;
    transition: color 0.2s;
  }

  .fc__link:hover {
    color: var(--fc-gold);
  }

  .fc__compliance-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    padding: 10px 0;
  }

  .fc__compliance-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--fc-text);
    white-space: nowrap;
    letter-spacing: 0.03em;
  }

  .fc__row {
    padding: 12px 0;
  }

  .fc__row-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
  }

  .fc__logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 20px;
  }

  .fc__logo-item {
    display: flex;
    align-items: center;
  }

  .fc__logo-text {
    font-size: 11.5px;
    color: var(--fc-text);
    white-space: nowrap;
    padding: 3px 8px;
    border: 1px solid var(--fc-border);
    border-radius: 3px;
  }

  .fc__logo-text--small {
    font-size: 11px;
  }

  .fc__logo-text--badge {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }

  .fc__seo {
    padding: 16px 0 8px;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
  }

  .fc__seo-inner {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(.16,1,.3,1);
  }

  .fc__seo-inner.open {
    max-height: 600px;
  }

  .fc__seo-text {
    font-size: 12px;
    line-height: 1.7;
    text-align: left;
    padding-bottom: 12px;
  }

  .fc__seo-toggle {
    background: none;
    border: none;
    color: var(--fc-gold);
    font-size: 11.5px;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
    letter-spacing: 0.04em;
  }

  .fc__seo-toggle:hover {
    text-decoration: underline;
  }

  .fc__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .fc__icon--sm {
    width: 12px;
    height: 12px;
  }

  .fc__copyright {
    text-align: center;
    font-size: 11.5px;
    padding: 12px 0 4px;
    letter-spacing: 0.02em;
  }

  @media screen and (min-width: 750px) {
    .sp-footer-compliance {
      padding: 28px 40px 20px;
    }
  }
/* END_SECTION:sindhi-footer-compliance */
/* START_SECTION:sindhi-footer (INDEX:114) */
.sindhi-footer {
  background: var(--sf-bg);
  color: var(--sf-text);
  font-family: var(--font-body--family, sans-serif);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ── Top ornamental rule ─────────────────────────────────────────────────────── */
.sf__top-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 40px;
}
.sf__top-rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--sf-accent), transparent);
  opacity: 0.4;
}
.sf__top-rule-emblem {
  color: var(--sf-accent);
  font-size: 14px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Inner grid ──────────────────────────────────────────────────────────────── */
.sf__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 48px 32px;
  padding: 52px 40px 48px;
}

/* ── Brand column ────────────────────────────────────────────────────────────── */
.sf__col--brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sf__logo-img {
  width: 130px;
  height: auto;
  mix-blend-mode: screen;
}
.sf__logo-text {
  font-family: var(--font-heading--family, serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--sf-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sf__tagline {
  font-size: 12.5px;
  color: var(--sf-text);
  line-height: 1.6;
  max-width: 220px;
  margin: 0;
}
.sf__since {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-accent);
  font-weight: 500;
  margin: 0;
}
.sf__social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
/* Social links — Horizon's section-scoped `a` rule wins on specificity (0,1,1) and
   clobbers our class-only colour. Prefix with .sindhi-footer (0,2,0) + !important on
   color so currentColor on the inner <svg> resolves correctly. Documented per Rule 20. */
.sindhi-footer .sf__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--sf-accent) 45%, transparent);
  color: var(--sf-accent) !important;
  background: color-mix(in srgb, var(--sf-accent) 6%, transparent);
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.18s;
}
.sindhi-footer .sf__social-link svg {
  display: block;
  color: inherit;
}
.sindhi-footer .sf__social-link:hover {
  border-color: var(--sf-accent);
  color: var(--sf-bg) !important;
  background: var(--sf-accent);
  transform: translateY(-1px);
}
.sindhi-footer .sf__social-link:focus-visible {
  outline: 2px solid var(--sf-accent);
  outline-offset: 2px;
}

/* ── Nav columns ─────────────────────────────────────────────────────────────── */
.sf__col--nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sf__col-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0 0 14px;
  cursor: default;
  width: 100%;
  text-align: left;
  pointer-events: none; /* desktop: not a toggle */
}
.sf__col-heading {
  font-family: var(--font-heading--family, serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sf-heading);
}
.sf__col-chevron {
  display: none; /* hidden on desktop */
  transition: transform 0.2s ease;
  color: var(--sf-text);
  opacity: 0.6;
}
.sf__col-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Menu links — Horizon's section-scoped `a` rule (0,1,1) overrides class-only colour.
   Prefix with .sindhi-footer (0,2,0) + !important on every state. Documented per Rule 20. */
.sindhi-footer .sf__link {
  color: var(--sf-link, var(--sf-text)) !important;
  text-decoration: none;
  font-size: 13.5px;
  transition: color 0.16s ease;
  display: block;
  padding: 1px 0;
}
.sindhi-footer .sf__link:hover  { color: var(--sf-link-hover, var(--sf-heading)) !important; }
.sindhi-footer .sf__link:active { color: var(--sf-link-pressed, var(--sf-link-hover, var(--sf-heading))) !important; }
.sindhi-footer .sf__link--active,
.sindhi-footer [aria-current="page"].sf__link {
  color: var(--sf-link-active, var(--sf-accent)) !important;
  font-weight: 600;
}
.sindhi-footer .sf__link:focus-visible {
  outline: 2px solid var(--sf-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.sf__link--empty {
  font-size: 11px;
  opacity: 0.4;
  font-style: italic;
}

/* ── Bottom bar ──────────────────────────────────────────────────────────────── */
.sf__bottom {
  border-top: 1px solid var(--sf-border);
}
.sf__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  gap: 16px;
  flex-wrap: wrap;
}
.sf__copyright {
  font-size: 11.5px;
  color: var(--sf-text);
  opacity: 0.6;
  margin: 0;
  letter-spacing: 0.02em;
}
.sf__payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sf__payment-chip {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sf-text);
  opacity: 0.55;
  border: 1px solid var(--sf-border);
  border-radius: 4px;
  padding: 2px 7px;
}

/* ── Mobile accordion (< 768px) ─────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .sindhi-footer {
    /* Push content above the fixed bottom nav bar (64px) + safe area */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .sf__inner {
    grid-template-columns: 1fr;
    padding: 32px 20px 28px;
    gap: 0;
  }
  .sf__col--brand {
    padding-bottom: 28px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--sf-border);
  }
  .sf__col--nav {
    border-bottom: 1px solid var(--sf-border);
  }
  .sf__col-toggle {
    pointer-events: auto;
    cursor: pointer;
    padding: 16px 0;
  }
  .sf__col-chevron { display: block; }
  .sf__col-toggle[aria-expanded="true"] .sf__col-chevron {
    transform: rotate(180deg);
  }
  .sf__col-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(.16,1,.3,1), padding 0.3s;
    padding-bottom: 0;
  }
  .sf__col-links.open {
    max-height: 400px;
    padding-bottom: 16px;
  }
  .sf__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .sf__inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px 24px;
    padding: 40px 24px 36px;
  }
  .sf__col--brand {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--sf-border);
    padding-bottom: 28px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 40px;
    align-items: flex-start;
  }
  .sf__col-toggle { pointer-events: none; }
  .sf__col-chevron { display: none; }
}
/* END_SECTION:sindhi-footer */
/* START_SECTION:sindhi-header (INDEX:125) */
/* ─────────────────────────────────────────────────────────────────────────────
   Sindhi Header v2 — White / Gold Luxury
   ───────────────────────────────────────────────────────────────────────────── */

.sh-sentinel {
  /* Off-layout marker for the sticky IntersectionObserver. Absolute so it
     never affects layout; given real height so a zero-area target doesn't
     confuse the observer. Used by the transparent-overlay variant; ~90px
     means the header turns solid only after the user scrolls past the top. */
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 90px;
  pointer-events: none;
}

.sh {
  background-color: var(--sh-bg);
  color: var(--sh-text);
  width: 100%;
  position: relative;
  z-index: 200;
}

/* ── Logo row (desktop, cream background, scrolls away) ────────────────────── */

.sh__logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 24px 14px;
  background: var(--sh-logo-row-bg);
  border-bottom: 1px solid var(--sh-border);
}

.sh__logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.sh__logo-img {
  width: var(--sh-logo-w);
  height: auto;
  display: block;
  /* multiply: removes white PNG background on light (cream/white) headers */
  mix-blend-mode: multiply;
}

.sh__logo-text {
  font-family: var(--font-heading--family, Georgia, serif);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sh-text);
  text-decoration: none;
  text-transform: uppercase;
}

/* ── Nav row (sticky white bar) ────────────────────────────────────────────── */

.sh__nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 24px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 201;
  background-color: var(--sh-bg);
  border-bottom: 1px solid var(--sh-border);
  transition: box-shadow 0.25s ease;
}

.sh[data-stuck="true"] .sh__nav-row {
  box-shadow: 0 2px 20px rgba(61, 43, 30, 0.08), 0 1px 4px rgba(0,0,0,0.04);
}

/* Transparent mode (homepage) */
.sh--transparent .sh__logo-row,
.sh--transparent .sh__nav-row {
  background-color: transparent;
  border-bottom-color: transparent;
}
.sh[data-transparent="true"][data-stuck="true"] .sh__nav-row {
  background-color: var(--sh-bg);
  border-bottom-color: var(--sh-border);
}

/* ── Left / Right columns ───────────────────────────────────────────────────── */

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

.sh__col--left { gap: 10px; }
.sh__col--right { gap: 10px; }
/* Normalise all icon buttons + the Horizon header-actions cart button to the same height/alignment */
.sh__col--right .sh__icon-btn,
.sh__col--right .header-actions,
.sh__col--right .header-actions__cart,
.sh__col--right cart-icon,
.sh__col--right button,
.sh__col--right a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 40px;
  line-height: 1;
  vertical-align: middle;
}
.sh__col--right svg {
  display: block;
}

/* ── Compact logo (mobile always; desktop only when stuck) ─────────────────── */

.sh__logo-compact {
  display: none;
  text-decoration: none;
  align-items: center;
}

.sh__logo-compact-img {
  width: var(--sh-compact-w);
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

.sh__logo-text--compact {
  font-size: 16px;
  letter-spacing: 0.06em;
}

@media screen and (min-width: 1024px) {
  .sh[data-stuck="true"] .sh__logo-compact {
    display: flex;
  }
}

/* ── Hamburger (mobile only) ────────────────────────────────────────────────── */

.sh__hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sh-text);
  padding: 10px 8px 10px 0;
  min-width: 44px;
  min-height: 44px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}

.sh__hamburger-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sh__hamburger:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Desktop navigation ─────────────────────────────────────────────────────── */

.sh__nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
  height: 100%;
}

.sh-nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.sh-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 15px;
  height: 100%;
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sh-text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  position: relative;
}

.sh-nav__link:hover,
.sh-nav__link:focus-visible {
  color: var(--sh-accent);
  border-bottom-color: var(--sh-accent);
}

.sh-nav__link:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: -4px;
  border-radius: 2px;
}

.sh-nav__link--active {
  color: var(--sh-accent);
  border-bottom-color: var(--sh-accent);
}

.sh-nav__chevron {
  transition: transform 0.18s ease;
  opacity: 0.6;
  margin-top: 1px;
}

.sh-nav__item--has-sub:hover .sh-nav__chevron,
.sh-nav__item--has-sub:focus-within .sh-nav__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Dropdown ───────────────────────────────────────────────────────────────── */

.sh-nav__dropdown {
  position: absolute;
  top: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 200px;
  background: var(--sh-dd-bg);
  color: var(--sh-dd-text);
  border-radius: 6px;
  box-shadow: 0 12px 40px color-mix(in srgb, var(--dark-chocolate) 12%, transparent), 0 2px 8px rgba(0,0,0,0.06);
  padding: 6px 0;
  z-index: 10;
  border-top: 3px solid var(--sh-accent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.sh-nav__item--has-sub:hover .sh-nav__dropdown,
.sh-nav__item--has-sub:focus-within .sh-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Hover bridge to prevent gap flicker */
.sh-nav__item--has-sub::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.sh-nav__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sh-nav__dropdown-link {
  display: block;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--sh-dd-text);
  text-decoration: none;
  transition: background-color 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}

.sh-nav__dropdown-link:hover,
.sh-nav__dropdown-link:focus-visible {
  background-color: #FAF6EE;
  color: var(--sh-accent);
}

.sh-nav__dropdown-link:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: -2px;
}

.sh-nav__dropdown-link--active {
  font-weight: 600;
  color: #3E2723;
}

/* ── Icon buttons ───────────────────────────────────────────────────────────── */

.sh__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sh-text);
  padding: 10px 8px;
  min-width: 40px;
  min-height: 44px;
  border-radius: 4px;
  transition: color 0.18s ease, background-color 0.18s ease;
  text-decoration: none;
}

.sh__icon-btn:hover {
  color: var(--sh-accent);
  background-color: rgba(167, 131, 80, 0.07);
}

.sh__icon-btn:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 2px;
}

/* Horizon header-actions colour adaptation */
.sh .header-actions__action,
.sh cart-icon,
.sh .account-button__icon,
.sh .account-button__text {
  color: var(--sh-text) !important;
}

/* The Horizon cart control picks up a solid (white) fill from its color
   scheme — strip it across the whole cart subtree (the drawer-component
   wrapper is the actual culprit) so only the cart glyph + count bubble show. */
.sh header-actions,
.sh cart-drawer-component,
.sh .cart-drawer,
.sh .header-actions__action,
.sh .header-actions__cart-icon,
.sh .header-actions__cart-icon--has-cart,
.sh cart-icon,
.sh .action__cart,
.sh .account-button {
  background: none !important;
  background-color: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile drawer — white/cream, light theme
   ───────────────────────────────────────────────────────────────────────────── */

.sh-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(300px, 86vw);
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  margin: 0;
  border: none;
  border-right: 1px solid var(--sh-border, #E8E0D0);
  background: #FFFFFF;
  color: var(--dark-chocolate);
  box-shadow: 4px 0 40px rgba(61, 43, 30, 0.14);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-drawer:not([open]) { display: none; }

.sh-drawer::backdrop {
  background: color-mix(in srgb, var(--dark-chocolate) 35%, transparent);
  backdrop-filter: blur(2px);
}

.sh-drawer__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Drawer header */
.sh-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #E8E0D0;
  position: sticky;
  top: 0;
  background: #FFFFFF;
  z-index: 1;
}

.sh-drawer__logo {
  display: flex;
  text-decoration: none;
}

.sh-drawer__logo-img {
  width: 120px;
  height: auto;
  mix-blend-mode: multiply;
}

.sh-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dark-chocolate);
  padding: 10px;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sh-drawer__close:hover {
  background-color: #FAF6EE;
  color: var(--sh-accent, #ab8744);
}

.sh-drawer__close:focus-visible {
  outline: 2px solid var(--sh-accent, #ab8744);
  outline-offset: 2px;
}

/* Drawer nav links */
.sh-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  flex: 1;
}

.sh-drawer__link {
  display: block;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-chocolate);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.sh-drawer__link:hover,
.sh-drawer__link.is-active {
  color: var(--sh-accent, #ab8744);
  background-color: #FAF6EE;
  border-left-color: var(--sh-accent, #ab8744);
}

.sh-drawer__link:focus-visible {
  outline: 2px solid var(--sh-accent, #ab8744);
  outline-offset: -2px;
}

/* Accordion */
.sh-drawer__accordion {
  border-left: 3px solid transparent;
}

.sh-drawer__accordion[open] {
  border-left-color: var(--sh-accent, #ab8744);
  background-color: #FAF6EE;
}

.sh-drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-chocolate);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}

.sh-drawer__summary::-webkit-details-marker { display: none; }
.sh-drawer__summary:hover { color: var(--sh-accent, #ab8744); }

.sh-drawer__summary:focus-visible {
  outline: 2px solid var(--sh-accent, #ab8744);
  outline-offset: -2px;
}

.sh-drawer__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.55;
}

.sh-drawer__accordion[open] .sh-drawer__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.sh-drawer__children {
  display: flex;
  flex-direction: column;
  padding: 2px 0 8px;
}

.sh-drawer__child-link {
  display: block;
  padding: 9px 24px 9px 34px;
  font-size: 13px;
  color: var(--dark);
  text-decoration: none;
  transition: color 0.15s ease;
  border-left: none;
}

.sh-drawer__child-link:hover,
.sh-drawer__child-link.is-active {
  color: var(--sh-accent, #ab8744);
}

.sh-drawer__child-link:focus-visible {
  outline: 2px solid var(--sh-accent, #ab8744);
  outline-offset: -2px;
}

/* Quick links (phone / WhatsApp) */
.sh-drawer__quick-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 24px;
  border-top: 1px solid #E8E0D0;
  margin-top: 4px;
}

.sh-drawer__quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 13px;
  color: var(--dark-chocolate);
  text-decoration: none;
  transition: color 0.15s ease;
}

.sh-drawer__quick-link:hover { color: var(--sh-accent, #ab8744); }

.sh-drawer__quick-link--wa:hover { color: #25D366; }

.sh-drawer__quick-link:focus-visible {
  outline: 2px solid var(--sh-accent, #ab8744);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Language switcher */
.sh-drawer__locale {
  padding: 12px 24px;
  border-top: 1px solid #E8E0D0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sh-drawer__locale-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #6B6B6B;
}

.sh-drawer__locale-select {
  background: #FAF6EE;
  color: var(--dark-chocolate);
  border: 1px solid #E8E0D0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  appearance: none;
}

.sh-drawer__locale-select:focus-visible {
  outline: 2px solid var(--sh-accent, #ab8744);
  outline-offset: 2px;
}

/* Trust strip at bottom of drawer */
.sh-drawer__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 14px 24px 24px;
  border-top: 1px solid #E8E0D0;
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dark-chocolate);
}

/* Mobile bottom navigation bar moved to the standalone
   "SP: Mobile Bottom Nav" section (sindhi-mobile-bottom-nav.liquid). */

/* ── Drawer search bar (inside drawer, below header) ──────────────────────── */

.sh-drawer__search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sh-border, #E8E0D0);
  background: var(--sh-logo-row-bg, #faf8f5);
  position: relative;
}
.sh-drawer__search-pill {
  display: flex;
  flex-direction: column;
  background: var(--sh-bg, #ffffff);
  border: 1px solid var(--sh-border, #e8e0d0);
  border-radius: 24px;
  overflow: visible;
  position: relative;
}
.sh-drawer__search-form {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  cursor: text;
}
.sh-drawer__search-icon { color: #8c8c8c; flex-shrink: 0; }
.sh-drawer__search-input-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.sh-drawer__search-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--sh-text, #1a1a1a);
  font-family: inherit;
  padding: 0;
}
/* Hide native placeholder — we use the rotating overlay instead */
.sh-drawer__search-input::-webkit-search-cancel-button { display: none; }

/* ── Rotating keyword placeholder ────── */
.sh-drawer__search-rph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  color: #8c8c8c;
  font-size: 13px;
  font-family: inherit;
  transition: opacity 0.2s ease;
}
.sh-drawer__search-rph-prefix { opacity: 0.55; }
.sh-drawer__search-rph[hidden] { display: none; }
/* Slide-in animation on keyword swap */
.sh-drawer__search-rph.dsh-rph--animating [data-dsh-rph-word] {
  animation: dsh-rph-in 0.28s ease forwards;
}
@keyframes dsh-rph-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Recent searches panel ────────── */
.sh-drawer__recent-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--sh-bg, #ffffff);
  border: 1px solid var(--sh-border, #e8e0d0);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 10px 12px 8px;
  z-index: 200;
}
.sh-drawer__recent-panel[hidden] { display: none; }
.sh-drawer__recent-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sh-drawer__recent-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8c8c8c;
}
.sh-drawer__recent-clear {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: var(--sh-accent, #ab8744);
  cursor: pointer;
  font-family: inherit;
}
.sh-drawer__recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sh-drawer__recent-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sh-logo-row-bg, #f7f0e3);
  border: 1px solid var(--sh-border, #e8e0d0);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  font-size: 12px;
  color: var(--sh-text, #1a1a1a);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sh-drawer__recent-chip svg { flex-shrink: 0; opacity: 0.55; }
.sh-drawer__recent-chip-x {
  background: none;
  border: none;
  padding: 0 0 0 4px;
  font-size: 14px;
  line-height: 1;
  color: #8c8c8c;
  cursor: pointer;
  font-family: inherit;
}

/* ── Drawer social links ──────────────────────────────────────────────────── */
.sh-drawer__social {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 6px;
  border-top: 1px solid #E8E0D0;
}
.sh-drawer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #faf8f5;
  border: 1px solid #e8e0d0;
  color: #3E2723;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sh-drawer__social-link:hover {
  background: #f7f0e3;
  color: #ab8744;
}
.sh-drawer__social-label {
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8c8c8c;
  margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile layout
   ───────────────────────────────────────────────────────────────────────────── */

@media screen and (max-width: 1023px) {
  .sh__logo-row { display: none; }
  .sh__nav      { display: none; }
  .sh__hamburger { display: flex; }

  /* Nav row — 3-col layout: [hamburger] [centred logo] [icons-right] */
  .sh__nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 56px;
    position: relative; /* needed for absolute-centred logo */
  }

  /* Logo compact — absolutely centred in the nav bar on mobile */
  .sh__logo-compact {
    display: flex !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: auto;
    max-width: 46vw; /* won't overlap hamburger / cart icons */
    overflow: hidden;
  }

  .sh__logo-compact-img {
    width: auto;
    max-width: 120px;
    height: 36px;
    object-fit: contain;
  }

  /* Text fallback on mobile — smaller, no wrap */
  .sh__logo-text--compact {
    font-size: 13px !important;
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 44vw;
  }

  /* Mobile header — keep search, wishlist, account, cart all visible AND aligned */
  .sh__col--right { gap: 4px; }
  .sh__col--right .sh__icon-btn,
  .sh__col--right .header-actions,
  .sh__col--right .header-actions__cart,
  .sh__col--right cart-icon,
  .sh__col--right a,
  .sh__col--right button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
  }
  .sh__col--right svg { display: block; width: 19px; height: 19px; }
  .sh__icon-btn--search { display: inline-flex !important; }
  .sh__icon-btn--wishlist { display: inline-flex; }

  /* Mobile-header element visibility (merchant toggles). Applies to the
     compact mobile/tablet header — glass or solid — independent of pinning. */
  .sh.mh-hide-logo .sh__logo-compact,
  .sh.mh-hide-menu .sh__hamburger,
  .sh.mh-hide-search .sh__icon-btn--search,
  .sh.mh-hide-wishlist .sh__icon-btn--wishlist,
  .sh.mh-hide-account .account-button,
  .sh.mh-hide-cart cart-drawer-component,
  .sh.mh-hide-cart .action__cart {
    display: none !important;
  }

  /* Pinned-state visibility — additional hiding applied ONLY once the header
     is actually pinned/scrolled (the .mh--pinned-on class is toggled by JS on
     scroll). At the top of the page the general toggles above apply and these
     do NOT, so an icon enabled in the general set still shows at rest. */
  .sh.mh--pinned-on.mh-phide-logo .sh__logo-compact,
  .sh.mh--pinned-on.mh-phide-menu .sh__hamburger,
  .sh.mh--pinned-on.mh-phide-search .sh__icon-btn--search,
  .sh.mh--pinned-on.mh-phide-wishlist .sh__icon-btn--wishlist,
  .sh.mh--pinned-on.mh-phide-account .account-button,
  .sh.mh--pinned-on.mh-phide-cart cart-drawer-component,
  .sh.mh--pinned-on.mh-phide-cart .action__cart {
    display: none !important;
  }
}

@media screen and (min-width: 1024px) {
  .sh__hamburger    { display: none; }
  .sh__logo-compact { display: none; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sh__nav-row,
  .sh-nav__dropdown,
  .sh-drawer {
    transition: none;
  }
}
/* ─────────────────────────────────────────────────────────────────────
   VARIANT: left-logo-horizontal — logo on left, nav on right
   ───────────────────────────────────────────────────────────────────── */
.sh--left-logo-horizontal .sh__logo-row { display: none !important; }
.sh--left-logo-horizontal .sh__nav-row { padding-block: 12px; }
.sh--left-logo-horizontal .sh__col--left { flex: 0 0 auto; }
.sh--left-logo-horizontal .sh__nav { margin-left: auto; }
.sh--left-logo-horizontal .sh__col--right { flex: 0 0 auto; }
.sh--left-logo-horizontal .sh__hamburger { display: none; }
.sh--left-logo-horizontal .sh__logo-compact { display: inline-flex; }
@media (max-width: 1023px) {
  .sh--left-logo-horizontal .sh__hamburger { display: inline-flex; }
  .sh--left-logo-horizontal .sh__nav { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   VARIANT: transparent-overlay — header floats over hero, sticks dark
   ───────────────────────────────────────────────────────────────────── */
/* Anchor the absolutely-positioned overlay header to its OWN section slot
   (which sits below the announcement + utility bars in the header group),
   not the page top. Without a positioned ancestor the header was anchoring
   to the viewport top and covering the announcement / utility / nav bars. */
.sindhi-header-section:has(.sh--transparent-overlay) {
  position: relative;
}
.sh--transparent-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent !important;
  border-bottom: 0 !important;
}
.sh--transparent-overlay .sh__logo-row,
.sh--transparent-overlay .sh__nav-row {
  background: transparent !important;
  color: var(--cream, #FFF8F0) !important;
}
.sh--transparent-overlay .sh__logo-text,
.sh--transparent-overlay .sh-nav__link,
.sh--transparent-overlay .sh__icon-btn {
  color: var(--cream, #FFF8F0) !important;
}
.sh--transparent-overlay[data-stuck="true"] {
  position: sticky;
  background: var(--dark-chocolate, #3E2723) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.sh--transparent-overlay[data-stuck="true"] .sh__logo-text,
.sh--transparent-overlay[data-stuck="true"] .sh-nav__link,
.sh--transparent-overlay[data-stuck="true"] .sh__icon-btn {
  color: var(--cream, #FFF8F0) !important;
}
/* Logo moves into the nav row, left-aligned (no centered logo row in overlay) */
.sh--transparent-overlay .sh__logo-row { display: none !important; }
@media (min-width: 1024px) {
  .sh--transparent-overlay .sh__logo-compact {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
    max-width: none;
  }
  /* Over a hero image the badge should render as-is, not multiplied */
  .sh--transparent-overlay .sh__logo-compact-img { mix-blend-mode: normal; }
  .sh--transparent-overlay .sh__col--left { flex: 0 0 auto; gap: 16px; }
  .sh--transparent-overlay .sh__nav { justify-content: center; }
}
@media (max-width: 1023px) {
  /* Transparent overlay is a DESKTOP treatment only. On mobile/tablet the
     header returns to normal flow with a solid bar so it doesn't float as a
     translucent strip over content. If a mobile glass shape is selected, the
     #sindhi-header glass rules win (higher specificity) and take over. */
  .sh--transparent-overlay {
    position: relative;
    background: var(--sh-bg) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--sh-border) !important;
  }
  .sh--transparent-overlay .sh__nav-row {
    background: var(--sh-bg) !important;
    color: var(--sh-text) !important;
  }
  .sh--transparent-overlay .sh-nav__link,
  .sh--transparent-overlay .sh__icon-btn,
  .sh--transparent-overlay .sh__hamburger,
  .sh--transparent-overlay .sh__logo-text { color: var(--sh-text) !important; }
}
/* END_SECTION:sindhi-header */
/* START_SECTION:sindhi-pdp-video-floater (INDEX:146) */
.spvf-trigger {
    position: fixed;
    z-index: 9200;
    right: var(--spvf-offset-right);
    bottom: var(--spvf-offset-bottom);
    border: none;
    padding: 0;
    background: #000;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
  }
  .spvf-trigger--card {
    width: var(--spvf-trigger-width);
    height: var(--spvf-trigger-height);
    border-radius: 12px;
  }
  .spvf-trigger--ring {
    width: var(--spvf-trigger-width);
    height: var(--spvf-trigger-width);
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--gold, #ab8744), var(--burgundy, #722F37), var(--gold-light, #d4b978), var(--gold, #ab8744));
    animation: spvf-ring-spin 3.5s linear infinite;
    padding: 3px;
  }
  @keyframes spvf-ring-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .spvf-trigger--ring { animation: none; }
  }
  .spvf-trigger__poster, .spvf-trigger__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  .spvf-trigger--ring .spvf-trigger__poster,
  .spvf-trigger--ring .spvf-trigger__video {
    border-radius: 50%;
    border: 2px solid #fff;
  }
  .spvf-trigger__play {
    position: relative; z-index: 1;
    width: 0; height: 0;
    border-left: 8px solid #fff;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
  .spvf-trigger__label {
    position: relative; z-index: 1;
    font-size: 8px; color: #fff; text-transform: uppercase; letter-spacing: 0.06em;
  }
  .spvf-trigger:focus-visible { outline: 3px solid var(--gold, #ab8744); outline-offset: 3px; }

  @media screen and (max-width: 749px) {
    .spvf-trigger {
      bottom: calc(var(--spvf-offset-bottom-m) + env(safe-area-inset-bottom, 0px));
      right: var(--spvf-offset-right-m);
    }
  }

  .spvf-popup {
    position: fixed; inset: 0; z-index: 9400;
    background: rgba(15,15,15,0.6);
    display: flex; align-items: center; justify-content: center;
  }
  .spvf-popup[hidden] { display: none; }
  .spvf-popup__card {
    width: min(320px, 90vw);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--cream-warm, #fdfbf7);
    border-radius: 14px;
    position: relative;
  }
  .spvf-popup__close {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.55); color: #fff; font-size: 16px; cursor: pointer;
  }
  .spvf-popup__video-wrap { background: #000; }
  .spvf-popup__video { width: 100%; display: block; max-height: 55vh; }
  .spvf-popup__body { padding: 16px; }
  .spvf-popup__title { font-weight: 700; margin: 0 0 10px; }
  .spvf-popup__error { color: var(--burgundy, #722F37); font-size: 13px; margin: 0 0 10px; }
  .spvf-popup__atc {
    width: 100%; border: none; border-radius: 8px; padding: 12px;
    background: var(--gold, #ab8744); color: var(--cream, #FFF8F0);
    font-weight: 700; cursor: pointer;
  }
  .spvf-popup__atc:disabled { opacity: 0.5; cursor: not-allowed; }
/* END_SECTION:sindhi-pdp-video-floater */
/* START_BLOCK:_announcement (INDEX:193) */
.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:_festive_announcement (INDEX:220) */
.festive-announcement-slide__text--desktop {
    display: none;
  }
  .festive-announcement-slide__text--mobile { display: block; }
  .festive-announcement-slide__mobile-link {
    display: flex;
    align-items: center;
    /* NOT width:100% — the announcement bar's slides track is CSS Grid
       "auto"-sized, and text-overflow:ellipsis doesn't reduce an element's
       max-content contribution to that calculation (only its rendered
       truncation once a width IS constrained) -- percentage width here
       just inherits the grid's own circular over-wide sizing. A viewport-
       relative max-width breaks the circularity so ellipsis has something
       real to truncate against (found live, 2026-07-31: "Click Here" was
       getting pushed off-screen by an unconstrained collection name).
       @media (min-width:750px) below returns to natural width — desktop
       uses the separate pill row, this link only exists on mobile. */
    max-width: min(80vw, 340px);
    margin-inline: auto;
    width: 100%;
    min-width: 0;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
  }
  /* Collection name truncates first — "Click Here ›" is the actual call to
     action and must never be the part that gets clipped when a long
     collection name doesn't fit a single mobile line (Sanjay, 2026-07-31). */
  .festive-announcement-slide__mobile-collection {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .festive-announcement-slide__mobile-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .festive-announcement-slide__mobile-tagline { font-weight: 600; }
  .festive-announcement-slide__mobile-sep { opacity: 0.6; }
  .festive-announcement-slide__mobile-link:hover,
  .festive-announcement-slide__mobile-link:focus-visible {
    text-decoration: underline;
  }

  @media screen and (min-width: 750px) {
    .festive-announcement-slide__text--desktop {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 10px;
    }
    .festive-announcement-slide__text--mobile { display: none; }
  }
  .festive-announcement-slide__msg { font-weight: 600; }
  .festive-announcement-slide__pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.85em;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    opacity: 0.92;
    white-space: nowrap;
  }
  .festive-announcement-slide__pill:hover,
  .festive-announcement-slide__pill:focus-visible {
    opacity: 1;
  }
  .festive-announcement-slide__pill-img {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-right: 5px;
    flex-shrink: 0;
    vertical-align: middle;
  }
  /* Round 2, Fix B: position:relative lives on the WRAP, not the button —
     the button and dropdown are now siblings (see markup), not parent/child.
     A <button> containing an <a href> is invalid HTML, and ARIA prunes a
     role=button element's descendants from the accessibility tree, so the
     dropdown's links were being announced as part of one inert "More,
     button" leaf and were completely unreachable to screen readers even
     though the button itself was keyboard-focusable. Siblings inside a
     shared positioned wrapper fixes both problems at once. */
  .festive-announcement-slide__more-wrap {
    position: relative;
    display: inline-flex;
  }
  .festive-announcement-slide__pill--more {
    /* Reset native <button> chrome so it still looks like the other pills,
       not a browser default button (final-review Fix 3 — the trigger was a
       <span>, unreachable by keyboard; a <button> is natively focusable and
       keyboard-activatable with no JS needed). font-family/line-height only
       (round 2, Fix D) — the shorthand `font: inherit` also resets
       font-size, beating the 0.85em set on .festive-announcement-slide__pill
       below in source order and rendering "More" at full body size. */
    background: none;
    border: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
  }
  .festive-announcement-slide__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--cream-warm, #fdfbf7);
    border: 1px solid var(--gray-light, #e8e8e8);
    border-radius: 10px;
    padding: 8px;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    z-index: 5;
    min-width: 160px;
  }
  .festive-announcement-slide__dropdown a {
    display: flex;
    align-items: center;
    color: var(--dark-chocolate, #3E2723);
    text-decoration: none;
    font-size: 0.85em;
    white-space: nowrap;
    padding: 4px 6px;
    border-radius: 6px;
  }
  .festive-announcement-slide__dropdown a:hover { background: rgba(0,0,0,0.04); }
  @media (hover: hover) {
    .festive-announcement-slide__more-wrap:hover .festive-announcement-slide__dropdown {
      display: flex;
    }
  }
  /* Unconditional (not inside @media (hover: hover)) — keyboard users on
     touch devices that don't match hover:hover still need a way to reach
     collections 3+. Tabbing to the <button> and activating focus reveals
     the dropdown same as hover does (final-review Fix 3, WCAG floor).
     :focus-within targets the WRAP (round 2, Fix B) — the button and
     dropdown are siblings now, so :focus-within on the button alone would
     never match (the dropdown's own focus isn't a descendant of the button). */
  .festive-announcement-slide__more-wrap:focus-within .festive-announcement-slide__dropdown {
    display: flex;
  }

  /* Style 1 (default) — hairline outline, transparent fill */
  .festive-announcement-slide__pill--outline {
    border: 1px solid currentColor;
  }
  .festive-announcement-slide__pill--outline:hover,
  .festive-announcement-slide__pill--outline:focus-visible {
    text-decoration: underline;
  }

  /* Style 2 — solid tinted fill, no border. Tint derives from currentColor
     (never a hardcoded hex) so it stays correct across every festive_nav_
     color_theme the announcement bar can be set to. */
  .festive-announcement-slide__pill--solid {
    border: 1px solid transparent;
    background: color-mix(in srgb, currentColor 16%, transparent);
  }
  .festive-announcement-slide__pill--solid:hover,
  .festive-announcement-slide__pill--solid:focus-visible {
    background: color-mix(in srgb, currentColor 26%, transparent);
  }

  /* Style 3 — underline only, no pill shape. Quieter, editorial option for
     merchants who find the pill border too busy alongside the message. */
  .festive-announcement-slide__pill--underline {
    border-radius: 0;
    padding: 2px 2px;
    border-bottom: 1px solid currentColor;
  }
  .festive-announcement-slide__pill--underline:hover,
  .festive-announcement-slide__pill--underline:focus-visible {
    opacity: 1;
  }

  /* Shorter mobile row (single line, no wrap) means less height is needed —
     tighten the bar's own padding on mobile while a campaign is active
     (Sanjay, 2026-07-31). Outside a campaign the bar keeps its normal
     padding; this only applies when this block actually renders. */
  @media screen and (max-width: 749px) {
    .announcement-bar { --padding-block-start: 4px; --padding-block-end: 4px; }
  }

  /* .festive-announcement-slide itself has no position set elsewhere in
     this file, so it needs position:relative here for the absolutely-
     positioned .festive-announcement-slide__fx overlay below to anchor
     to this slide instead of the nearest OTHER positioned ancestor
     (.announcement-bar__slider, which would misplace it). */
  .festive-announcement-slide {
    position: relative;
  }
  .festive-announcement-slide__fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .festive-announcement-slide__fx--confetti span {
    position: absolute;
    top: -10px;
    width: 5px;
    height: 8px;
    background: var(--gold-light, #d4b978);
    animation: sfa-confetti-fall 2.6s linear infinite;
  }
  .festive-announcement-slide__fx--confetti span:nth-child(odd) { background: var(--burgundy, #722F37); }
  .festive-announcement-slide__fx--confetti span:nth-child(1) { left: 6%; animation-delay: 0s; }
  .festive-announcement-slide__fx--confetti span:nth-child(2) { left: 18%; animation-delay: .4s; }
  .festive-announcement-slide__fx--confetti span:nth-child(3) { left: 30%; animation-delay: .9s; }
  .festive-announcement-slide__fx--confetti span:nth-child(4) { left: 42%; animation-delay: .2s; }
  .festive-announcement-slide__fx--confetti span:nth-child(5) { left: 54%; animation-delay: 1.3s; }
  .festive-announcement-slide__fx--confetti span:nth-child(6) { left: 66%; animation-delay: .6s; }
  .festive-announcement-slide__fx--confetti span:nth-child(7) { left: 78%; animation-delay: 1.6s; }
  .festive-announcement-slide__fx--confetti span:nth-child(8) { left: 88%; animation-delay: 1.0s; }
  .festive-announcement-slide__fx--confetti span:nth-child(9) { left: 95%; animation-delay: .7s; }
  @keyframes sfa-confetti-fall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(48px) rotate(340deg); opacity: 0.9; }
  }

  .festive-announcement-slide__fx--sparkle span {
    position: absolute;
    bottom: 4px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold-light, #d4b978);
    box-shadow: 0 0 5px 1.5px color-mix(in srgb, var(--gold-light, #d4b978) 70%, transparent);
    animation: sfa-spark-drift 3.2s ease-in infinite;
  }
  .festive-announcement-slide__fx--sparkle span:nth-child(1) { left: 10%; animation-delay: 0s; }
  .festive-announcement-slide__fx--sparkle span:nth-child(2) { left: 26%; animation-delay: .7s; }
  .festive-announcement-slide__fx--sparkle span:nth-child(3) { left: 42%; animation-delay: 1.4s; }
  .festive-announcement-slide__fx--sparkle span:nth-child(4) { left: 58%; animation-delay: .3s; }
  .festive-announcement-slide__fx--sparkle span:nth-child(5) { left: 74%; animation-delay: 1.9s; }
  .festive-announcement-slide__fx--sparkle span:nth-child(6) { left: 90%; animation-delay: 1.0s; }
  @keyframes sfa-spark-drift {
    0% { transform: translate(0,0) scale(0.6); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translate(12px,-30px) scale(1); opacity: 0; }
  }

  .festive-announcement-slide__fx--shimmer {
    background: linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--gold-light, #d4b978) 35%, transparent) 50%, transparent 60%);
    background-size: 250% 100%;
    animation: sfa-shimmer-move 3s ease-in-out infinite;
  }
  @keyframes sfa-shimmer-move {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .festive-announcement-slide__fx--confetti span,
    .festive-announcement-slide__fx--sparkle span,
    .festive-announcement-slide__fx--shimmer { animation: none; }
  }

  /* Glass LOOK — applies whenever background_style is glass, regardless
     of whether a hero is found to anchor to (see sindhi-festive-glass-
     overlay.js). This alone is what Task 5's toggle already does for the
     message row; here it's the same treatment for the festive row. */
  .festive-announcement-slide--glass {
    background: transparent !important;
  }
  /* Hero-anchored positioning — added ONLY by sindhi-festive-glass-overlay.js
     after it has actually moved this element inside .sindhi-hero (which is
     given position:relative by the same script, only if it wasn't already
     positioned). Zero added page height, because the element is a real DOM
     child of the hero now, not a page-flow sibling several sections away. */
  .festive-announcement-slide--glass.is-hero-anchored {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 12px;
    z-index: 3;
    /* Own glass surface ONLY while floating free of the bar. Inside the bar the
       parent's own Shape already paints the surface, so a second border here
       rendered as a pill nested inside the bar's capsule, boxing the festive
       row (Sanjay, 2026-08-03). var(--ab-glass-blur) is copied from the bar's
       merchant-set glass_intensity by sindhi-festive-glass-overlay.js; the 10px
       fallback covers a script-load failure. currentColor-derived, not a
       hardcoded rgba, so it follows the active tint. */
    -webkit-backdrop-filter: blur(var(--ab-glass-blur, 10px));
    backdrop-filter: blur(var(--ab-glass-blur, 10px));
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    border-radius: 10px;
    /* display/align/justify/text-align: restores the centering that the
       announcement-bar__slide class used to provide before the overlay
       script removed that class from this now-relocated node. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Floated text intentionally does NOT inherit the merchant's colour-
       scheme text colour — once relocated it sits over an arbitrary hero
       image/gradient instead of the bar's own calibrated background, so
       the scheme's text colour (tuned for contrast against the bar) has no
       guarantee of reading against whatever hero is behind it. --cream-warm
       is a deliberate, fixed choice for legibility over a typically-dark
       hero overlay, not a scheme-dependent value (round 2's colour-copying
       JS step that used to override this has been removed entirely). */
    color: var(--cream-warm, #fdfbf7);
  }
/* END_BLOCK:_festive_announcement */
/* START_BLOCK:_product-details (INDEX:235) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

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

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

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

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

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */
/* START_BLOCK:sindhi-pdp-description (INDEX:285) */
.spb-desc {
    display: block;
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: var(--type-body, 0.9375rem);
    line-height: var(--type-body-line, 1.6);
    color: var(--dark-soft, #4a4a4a);
  }

  .spb-desc__body {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: var(--spb-clamp, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .spb-desc__body[data-expanded="true"] {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  /* Gradient fade mask — references cream token so it works on cream/cream-warm bg */
  .spb-desc__body:not([data-expanded="true"])::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 4em;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--cream, #FFF8F0) 0%, transparent) 0%,
      color-mix(in srgb, var(--cream, #FFF8F0) 80%, transparent) 55%,
      var(--cream, #FFF8F0) 100%
    );
    pointer-events: none;
  }

  .spb-desc__toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 5px 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold, #ab8744);
    transition: color 180ms;
  }

  .spb-desc__toggle:hover { color: var(--gold-hover, #977435); }

  .spb-desc__toggle:focus-visible {
    outline: 2px solid var(--gold, #ab8744);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .spb-desc__chevron {
    transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
    flex: 0 0 11px;
  }

  .spb-desc__toggle[aria-expanded="true"] .spb-desc__chevron {
    transform: rotate(180deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .spb-desc__chevron { transition: none; }
  }
/* END_BLOCK:sindhi-pdp-description */
/* START_BLOCK:sindhi-pdp-eyebrow (INDEX:286) */
.spb-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: var(--type-eyebrow, 11px);
    font-weight: var(--type-eyebrow-weight, 600);
    letter-spacing: var(--type-eyebrow-ls, 0.14em);
    text-transform: uppercase;
    color: var(--spb-eyebrow-color, var(--gold, #ab8744));
    line-height: 1;
  }

  .spb-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
  }
/* END_BLOCK:sindhi-pdp-eyebrow */
/* START_BLOCK:sindhi-pdp-rating (INDEX:288) */
.spb-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
  }

  .spb-rating__stars {
    display: inline-flex;
    gap: 1px;
    color: #D4A843;
    font-size: 14px;
    line-height: 1;
  }

  .spb-rating__half {
    opacity: 0.55;
  }

  .spb-rating__value {
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--dark, #1a1a1a);
  }

  .spb-rating__count {
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: 12px;
    font-weight: 400;
    color: var(--dark-soft, #4a4a4a);
  }
/* END_BLOCK:sindhi-pdp-rating */
/* START_BLOCK:sindhi-pdp-trust-strip (INDEX:289) */
/* ── Base ─────────────────────────────────────────────────────────────── */
  .spb-trust { display: block; }

  .spb-trust__pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--forest, #1d6f2e);
    flex: 0 0 7px;
    animation: spb-pulse 1.8s ease-in-out infinite;
  }
  .spb-trust__pulse--gold { background: var(--gold, #ab8744); }

  @keyframes spb-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(0.82); }
  }
  @media (prefers-reduced-motion: reduce) {
    .spb-trust__pulse { animation: none; }
  }

  /* ── Style: stacked (default) ─────────────────────────────────────────── */
  .spb-trust--stacked {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .spb-trust__urgency {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: var(--type-micro, 12px);
    font-weight: 600;
    color: var(--dark, #1a1a1a);
    letter-spacing: 0.01em;
  }

  .spb-trust__delivery {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: var(--type-micro, 11.5px);
    font-weight: 500;
    color: var(--dark-soft, #4a4a4a);
    padding-top: 6px;
    border-top: 1px solid var(--gray-light, #e8e8e8);
    line-height: 1.4;
  }
  .spb-trust__delivery-icon {
    flex: 0 0 14px;
    color: var(--forest, #1d6f2e);
    margin-top: 1px;
  }

  .spb-trust__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    padding: 8px 12px;
    background: var(--badge-bg, var(--cream, #FFF8F0));
    border: 1px solid var(--badge-border, var(--gray-light, #e8e8e8));
    border-radius: 8px;
  }
  .spb-trust__badge {
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: var(--type-micro, 11px);
    font-weight: 600;
    color: var(--dark, #1a1a1a);
    white-space: nowrap;
  }
  .spb-trust__sep {
    width: 1px; height: 13px;
    background: var(--gray-light, #e8e8e8);
    flex: 0 0 1px;
  }

  /* ── Style: compact ───────────────────────────────────────────────────── */
  .spb-trust--compact { display: block; }

  .spb-trust__compact-track {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 7px 12px;
    background: var(--gold-pale, #f7f0e3);
    border: 1px solid color-mix(in srgb, var(--gold, #ab8744) 20%, transparent);
    border-radius: 8px;
    white-space: nowrap;
  }
  .spb-trust__compact-track::-webkit-scrollbar { display: none; }

  .spb-trust__compact-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: var(--type-micro, 11px);
    font-weight: 600;
    color: var(--dark, #1a1a1a);
    flex-shrink: 0;
  }
  .spb-trust__compact-pill--urgency { color: var(--dark, #1a1a1a); }
  .spb-trust__compact-pill--badge   { color: var(--dark-soft, #4a4a4a); }

  .spb-trust__compact-sep {
    font-size: 10px;
    color: var(--gray, #8c8c8c);
    padding: 0 6px;
    flex-shrink: 0;
  }

  /* ── Style: premium ───────────────────────────────────────────────────── */
  .spb-trust--premium { display: flex; flex-direction: column; gap: 8px; }

  .spb-trust__prem-urgency {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: var(--type-micro, 11.5px);
    font-weight: 600;
    color: var(--dark, #1a1a1a);
    letter-spacing: 0.01em;
  }

  .spb-trust__prem-card {
    background: var(--dark-chocolate, #3E2723);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .spb-trust__prem-delivery {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: var(--type-micro, 11.5px);
    font-weight: 500;
    color: color-mix(in srgb, var(--gold-light, #d4b978) 85%, white);
    line-height: 1.45;
  }
  .spb-trust__prem-delivery svg {
    flex: 0 0 14px;
    color: var(--gold, #ab8744);
    margin-top: 1px;
  }

  .spb-trust__prem-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    padding-top: 9px;
    border-top: 1px solid color-mix(in srgb, var(--gold, #ab8744) 30%, transparent);
  }
  .spb-trust__prem-badge {
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: var(--type-micro, 10.5px);
    font-weight: 600;
    color: var(--gold-light, #d4b978);
    white-space: nowrap;
    letter-spacing: 0.03em;
  }
  .spb-trust__prem-vsep {
    width: 1px; height: 12px;
    background: color-mix(in srgb, var(--gold, #ab8744) 35%, transparent);
    flex: 0 0 1px;
    margin: 0 9px;
  }

  /* ── Mobile tweaks ────────────────────────────────────────────────────── */
  @media (max-width: 749px) {
    .spb-trust__delivery,
    .spb-trust__prem-delivery { font-size: 10.5px; }
    .spb-trust__badges        { padding: 7px 10px; gap: 4px 6px; }
    .spb-trust__badge,
    .spb-trust__compact-pill  { font-size: 10px; }
    .spb-trust__prem-card     { padding: 11px 12px; }
  }
/* END_BLOCK:sindhi-pdp-trust-strip */
/* START_BLOCK:sindhi-pdp-usp-chips (INDEX:290) */
.spb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
  }

  .spb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body--family, 'DM Sans', sans-serif);
    font-size: 11px;
    font-weight: 500;
    color: var(--chip-fg, var(--dark, #1a1a1a));
    background: var(--chip-bg, var(--gold-pale, #f7f0e3));
    border: 1px solid var(--chip-border, transparent);
    padding: 5px 10px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
  }

  @media (max-width: 749px) {
    .spb-chips {
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .spb-chips::-webkit-scrollbar { display: none; }

    .spb-chip {
      scroll-snap-align: start;
      flex: 0 0 auto;
    }
  }
/* END_BLOCK:sindhi-pdp-usp-chips */
/* START_SNIPPET:background-media (INDEX:300) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:buy-buttons-styles (INDEX:305) */
.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: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

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

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

  .product__pickup-availabilities {
    width: 100%;
  }

  .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:307) */
.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;
    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:308) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

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

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

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

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

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

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

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

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */
/* START_SNIPPET:cart-products (INDEX:309) */
.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__details * {
    font-size: var(--font-size--sm);
  }

  .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__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

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

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

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

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

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

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

  .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:314) */
.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:group (INDEX:325) */
.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:326) */
.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;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @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: var(--color-background);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

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

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .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--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

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

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

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

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

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

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

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

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

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

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

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

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

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

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

    @media screen and (min-width: 750px) {
      padding-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:product-information-content (INDEX:367) */
.product-information {
    gap: var(--gap) 0;
  }

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

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

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

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:368) */
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:product-media-gallery-content (INDEX:369) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

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

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

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

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */
/* START_SNIPPET:product-media (INDEX:370) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */
/* START_SNIPPET:quantity-selector (INDEX:371) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */
/* START_SNIPPET:quick-add-modal-styles (INDEX:372) */
#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:resource-card (INDEX:376) */
.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:393) */
/* 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;
    }
  }

  /* The "View all" footer is position:absolute + bottom:0 (out of flow), so it
     floats over the last row of results/suggestions unless the scrollable
     content reserves room for it — most visible on mobile, where the footer
     has no background gradient to visually separate it from the list below. */
  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__content {
    padding-bottom: calc(var(--minimum-touch-target) + var(--padding-lg) * 2);
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

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

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

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

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

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

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

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

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

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* 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;
  }

  .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:section (INDEX:395) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

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

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */
/* START_SNIPPET:skip-to-content-link (INDEX:433) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:slideshow-arrow (INDEX:435) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */
/* START_SNIPPET:slideshow-arrows (INDEX:436) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */
/* START_SNIPPET:slideshow-styles (INDEX:439) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

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

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

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

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */
/* START_SNIPPET:text (INDEX:450) */
: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);
  }
/* END_SNIPPET:text */
/* START_SNIPPET:variant-main-picker (INDEX:459) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */