/** Shopify CDN: Minification failed

Line 4327:59 Expected identifier but found "variant-option__button-label("
Line 4332:59 Expected identifier but found "variant-option__button-label("
Line 4335:59 Expected identifier but found "variant-option__button-label("
Line 4345:59 Expected identifier but found "variant-option__button-label("
Line 4348:59 Expected identifier but found "variant-option__button-label("
Line 4910:3 Unexpected "}"

**/
/* START_SECTION:footer (INDEX:22) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: start;
    max-width: 100%;
    margin-inline: auto;
    padding-left: 80px;
    width: 100%;
    box-sizing: border-box;
  }
@media screen and (min-width: 1700px){
  .footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 100px !important;
    align-items: start;
    max-width: 100%;
    margin-inline: auto;
    padding-left: 80px;
    width: 100%;
    box-sizing: border-box;
  }}
  .footer-content > * {
    text-align: left;
  }

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

  .footer-content nav,
  .footer-content ul {
    text-align: left;
  }

  @media screen and (max-width: 749px) {
    .footer-content {
      padding-inline: 20px;
    }
    .footer-content {
    contain: content;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
    max-width: 100%;
    margin-inline: auto;
    padding-left: 0px;
    width: 100%;
    box-sizing: border-box;
}
#shopify-section-sections--22424562139361__section_YNTBDL .text-block > *{
  font-size:10px !important;
}

    /* Mobile is always single column, everything stacked and centered —
       heading, then its links, then the next group, top to bottom —
       matching the reference design (Terms of use / About / Contact /
       Community stacked, centered). This applies regardless of the
       "Mobile layout" setting saved on the section, so existing sections
       don't need to be re-saved in the theme editor. */
    .footer-content,
    .footer-content--mobile-stack,
    .footer-content--mobile-grid {
      grid-template-columns: 1fr !important;
      grid-auto-flow: row !important;
      row-gap: 35px !important;
      column-gap: 0 !important;
      text-align: center;
    }

    .footer-content > *,
    .footer-content--mobile-stack > *,
    .footer-content--mobile-grid > * {
      text-align: center;
    }

    .footer-content .menu__heading__default {
      text-align: center;
    }

    .footer-content nav,
    .footer-content ul {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* 1. "Terms of use" (and other) headings: +1pt on mobile */
    .footer-content .menu__heading__default {
      font-size: calc(1em + 1pt);
    }

    /* 2. The 4 links under each heading: +1.5pt on mobile */
    .footer-content nav a,
    .footer-content ul li,
    .footer-content ul li a {
      font-size: calc(1em + 1.5pt);
    }

    /* 4. Logo: smaller + centered on mobile
       NOTE: selectors below are best-guess based on common logo-block
       markup ("logo" in the class name). If your theme's logo block uses
       different class names, tell me the exact class and I will adjust. */
    .footer-content [class*="logo"] {
      display: flex;
      justify-content: center;
      text-align: center;
      width: 100%;
    }
    .footer-content [class*="logo"] img,
    .footer-content [class*="logo"] svg {
      max-width: 120px;
      width: 60%;
      height: auto;
      margin-inline: auto;
    }

    /* Product page only: extra breathing room above the footer content
       on mobile. Scoped to .footer-content--product-page (added via the
       request.page_type == 'product' check above) so every other page
       keeps its existing (unset / 0) mobile padding-top exactly as
       before. */
    .footer-content--product-page {
      padding-right: 0!important;
      padding-top: 60px;
    }
  }

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

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

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

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

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

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
  @media screen and (min-width: 1700px){
#shopify-section-sections--22424562139361__footer_m9NzUG body, #shopify-section-sections--22424562139361__footer_m9NzUG .paragraph:not(.button), #shopify-section-sections--22424562139361__footer_m9NzUG .paragraph > *, #shopify-section-sections--22424562139361__footer_m9NzUG .text-block.paragraph :is(h1, #shopify-section-sections--22424562139361__footer_m9NzUG h2, #shopify-section-sections--22424562139361__footer_m9NzUG h3, #shopify-section-sections--22424562139361__footer_m9NzUG h4, #shopify-section-sections--22424562139361__footer_m9NzUG h5, #shopify-section-sections--22424562139361__footer_m9NzUG h6){    font-size:20px !important;
  }
  #shopify-section-sections--22424562139361__footer_m9NzUG h3, #shopify-section-sections--22424562139361__footer_m9NzUG .h3, #shopify-section-sections--22424562139361__footer_m9NzUG .h3.h3, #shopify-section-sections--22424562139361__footer_m9NzUG .text-block.h3 > *, #shopify-section-sections--22424562139361__footer_m9NzUG .text-block.h3 :is(h1, #shopify-section-sections--22424562139361__footer_m9NzUG h2, #shopify-section-sections--22424562139361__footer_m9NzUG h3, #shopify-section-sections--22424562139361__footer_m9NzUG h4, #shopify-section-sections--22424562139361__footer_m9NzUG h5, #shopify-section-sections--22424562139361__footer_m9NzUG h6) {
    font-family: "Atkinson Hyperlegible";
    font-size: 25px !important;
    letter-spacing: 0.1rem;
}
.footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
      padding-left: 100px;
      padding-top:70px
    }
}
/* END_SECTION:footer */
/* START_SECTION:header (INDEX:24) */
/* ============================================================
     HOMEPAGE HEADER HIDE (original hide_on_homepage setting)
     NOT applied when ens-scroll-header is active
  ============================================================ */
  body.template-index:not(.ens-scroll-header) #header-group,
  body.template-index:not(.ens-scroll-header) .header-section:has(> #header-component) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body.template-index:not(.ens-scroll-header) {
    --transparent-header-offset-boolean: 0 !important;
    --header-height: 0px !important;
    --header-group-height: 0px !important;
  }
  body.template-index:not(.ens-scroll-header) .header-section:has(> #header-component) + .shopify-section {
    margin-top: 0 !important;
  }
  body.template-index:not(.ens-scroll-header) main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: 0px !important;
    }
  }

  /* ============================================================
     SCROLL-REVEAL HEADER — homepage only
  ============================================================ */
  #header-component[data-scroll-reveal='true'] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    margin: 0 !important;
    contain: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0.55s;
  }

  #header-component[data-scroll-reveal='true'].ens-header-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }

  body:has(#header-component[data-scroll-reveal='true']) #header-group,
  .header-section:has(> #header-component[data-scroll-reveal='true']) {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    contain: none !important;
    transform: none !important;
  }

  body:has(#header-component[data-scroll-reveal='true']) {
    --header-height: 0px !important;
    --header-group-height: 0px !important;
    --transparent-header-offset-boolean: 0 !important;
    padding-top: 0 !important;
  }

  body:has(#header-component[data-scroll-reveal='true']) main > .shopify-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ============================================================
     GLOBAL TRANSITION BASE
  ============================================================ */
  #header-component,
  #header-component a,
  #header-component button,
  #header-component svg,
  #header-component .svg-wrapper,
  #header-component .header-logo,
  #header-component .header-logo__image,
  #header-component .header-logo__image--primary,
  #header-component .header-logo__image--inverse,
  #header-component .menu-list__link,
  #header-component .header-actions__action,
  #header-component header-actions,
  #header-component .button,
  #header-component .button-secondary,
  #header-component .custom-menu-icon-img,
  #header-component .custom-icon-menu-wrap {
    /* SPEED FIX: 0.75s read as sluggish. Dropped to 0.28s with a
       "fast-out, slow-in" curve (cubic-bezier(0.4,0,0.2,1)) instead
       of the old slow-in/slow-out curve — it snaps into motion
       immediately and eases to a stop, which reads as quick without
       looking like a hard cut. */
    transition:
      color        0.28s cubic-bezier(0.4, 0, 0.2, 1),
      fill         0.28s cubic-bezier(0.4, 0, 0.2, 1),
      stroke       0.28s cubic-bezier(0.4, 0, 0.2, 1),
      opacity      0.28s cubic-bezier(0.4, 0, 0.2, 1),
      filter       0.28s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  #header-component svg {
    color: inherit;
    fill: currentColor;
  }

  /* ============================================================
     WHOLE-HEADER FALLBACK
  ============================================================ */
  #header-component[data-header-text='light'] {
    --color-foreground: 238 238 238;
    --color-foreground-rgb: 238, 238, 238;
    --color-border: 238 238 238;
    --color-border-rgb: 238, 238, 238;
    --color-account-icon: rgb(238, 238, 238);
    color: #eeeeee;
  }
  #header-component[data-header-text='dark'] {
    --color-foreground: 0 0 0;
    --color-foreground-rgb: 0, 0, 0;
    --color-border: 0 0 0;
    --color-border-rgb: 0, 0, 0;
    --color-account-icon: rgb(0, 0, 0);
    color: #000000;
  }

  /* ============================================================
     PER-ELEMENT ADAPTIVE — LOGO
  ============================================================ */
  #header-component .header-logo__image--primary,
  #header-component .header-logo__image--inverse {
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), filter 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  #header-component .header-logo:not([data-adaptive-color]) .header-logo__image--primary {
    opacity: 1;
  }
  #header-component .header-logo:not([data-adaptive-color]) .header-logo__image--inverse {
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }

  #header-component .header-logo[data-adaptive-color='light'] .header-logo__image--primary {
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }
  #header-component .header-logo[data-adaptive-color='light'] .header-logo__image--inverse {
    opacity: 1;
    position: relative;
    pointer-events: auto;
  }
  #header-component .header-logo[data-adaptive-color='light'] .header-logo__image:not(.header-logo__image--primary):not(.header-logo__image--inverse) {
    filter: invert(1);
  }

  #header-component .header-logo[data-adaptive-color='dark'] .header-logo__image--primary {
    opacity: 1;
    filter: none;
    position: relative;
    pointer-events: auto;
  }
  #header-component .header-logo[data-adaptive-color='dark'] .header-logo__image--inverse {
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }
  #header-component .header-logo[data-adaptive-color='dark'] .header-logo__image:not(.header-logo__image--primary):not(.header-logo__image--inverse) {
    filter: none;
  }

  /* ============================================================
     PER-ELEMENT ADAPTIVE — NAV LINKS
  ============================================================ */
  #header-component .menu-list__link[data-adaptive-color='dark'] {
    color: #000000 !important;
    --color-foreground: 0 0 0;
  }
  #header-component .menu-list__link[data-adaptive-color='light'] {
    color: #eeeeee !important;
    --color-foreground: 238 238 238;
  }

  /* ============================================================
     PER-ELEMENT ADAPTIVE — SEARCH ACTION
     RESTORED (from the mix-blend-mode experiment): mix-blend-mode
     can't work on these elements because they live inside
     #header-component, which has position:fixed + z-index for the
     scroll-reveal — that combination creates its own stacking
     context, and mix-blend-mode can only blend against content
     painted within that SAME stacking context (i.e. other things
     inside the header, which is transparent), never the real page
     behind the fixed header. Result was flat, non-adapting white
     on every background. Back to reading data-adaptive-color,
     which the JS pixel-sampling system in the script above sets
     correctly regardless of stacking context.
  ============================================================ */
  #header-component .search-action[data-adaptive-color='dark'] {
    --color-foreground: 0 0 0;
    --color-foreground-rgb: 0, 0, 0;
    color: #000000 !important;
  }
  #header-component .search-action[data-adaptive-color='light'] {
    --color-foreground: 238 238 238;
    --color-foreground-rgb: 238, 238, 238;
    color: #eeeeee !important;
  }
  #header-component .search-action[data-adaptive-color] svg,
  #header-component .search-action[data-adaptive-color] .svg-wrapper {
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
  }

  /* ============================================================
     PER-ELEMENT ADAPTIVE — ACTION ICONS (ACCOUNT / BAG)
     RESTORED for the same reason as SEARCH ACTION above.
  ============================================================ */
  #header-component header-actions[data-adaptive-color='dark'],
  #header-component .header-actions[data-adaptive-color='dark'] {
    --color-foreground: 0 0 0;
    --color-foreground-rgb: 0, 0, 0;
    --color-account-icon: #000000;
    color: #000000 !important;
  }
  #header-component header-actions[data-adaptive-color='light'],
  #header-component .header-actions[data-adaptive-color='light'] {
    --color-foreground: 238 238 238;
    --color-foreground-rgb: 238, 238, 238;
    --color-account-icon: #eeeeee;
    color: #eeeeee !important;
  }
  #header-component header-actions[data-adaptive-color] svg,
  #header-component header-actions[data-adaptive-color] .svg-wrapper,
  #header-component .header-actions[data-adaptive-color] svg,
  #header-component .header-actions[data-adaptive-color] .svg-wrapper {
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
  }

  /* Keep bag count always white, regardless of adaptive color,
     so the number stays legible against either a light or dark
     bubble background. */
  #header-component header-actions[data-adaptive-color] .cart-count,
  #header-component header-actions[data-adaptive-color] .cart-count__amount,
  #header-component header-actions[data-adaptive-color] [data-testid='cart-count'],
  #header-component .header-actions[data-adaptive-color] .cart-count,
  #header-component .header-actions[data-adaptive-color] .cart-count__amount,
  #header-component .header-actions[data-adaptive-color] [data-testid='cart-count'] {
    color: #ffffff !important;
  }

  /* ============================================================
     CUSTOM MENU ICON — never adapted
     Always renders exactly as uploaded, regardless of the
     whole-header fallback or any adaptive state.
  ============================================================ */
  #header-component .custom-menu-icon-img,
  #header-component .custom-icon-menu-wrap .custom-menu-icon-img,
  #header-component[data-header-text='light'] .custom-menu-icon-img,
  #header-component[data-header-text='dark'] .custom-menu-icon-img,
  #header-component .custom-icon-menu-wrap[data-adaptive-color] .custom-menu-icon-img {
    filter: none !important;
  }

  /* ============================================================
     CLOSE CONTROL — cross now appears in TWO places when the menu
     is open:
       1) the hamburger trigger itself swaps to a × in place (this
          block) — driven purely by aria-expanded, which the click
          toggle script above already sets, so no JS change needed
       2) the panel's own dedicated close button, top-right (kept
          as-is below)
     Both call the same closeMenu() path, so either one works.
  ============================================================ */
  .custom-icon-megamenu-trigger .custom-menu-icon-close {
    display: none;
  }

  .custom-icon-megamenu-trigger[aria-expanded='true'] .custom-menu-icon-img {
    display: none !important;
  }

  .custom-icon-megamenu-trigger[aria-expanded='true'] .custom-menu-icon-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #424242;
  }

  .custom-icon-megamenu-trigger[aria-expanded='true'] .custom-menu-icon-close svg {
    width: 20px;
    height: 20px;
  }

  @media screen and (max-width: 749px) {
    .custom-icon-megamenu-trigger[aria-expanded='true'] .custom-menu-icon-close {
      width: 20px;
      height: 20px;
    }
    .custom-icon-megamenu-trigger[aria-expanded='true'] .custom-menu-icon-close svg {
      width: 16px;
      height: 16px;
    }
  }

  /* Dedicated close button rendered inside the panel itself — a real
     part of the panel's box, not the header trigger repositioned.
     Positioned top-RIGHT, unified across all breakpoints. */
  .custom-icon-megamenu__close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: none;
    border: none;
    padding: 6px;
    margin: -6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #424242;
    z-index: 2;
  }

  .custom-icon-megamenu__close .svg-wrapper {
    width: 20px;
    height: 20px;
  }

  .custom-icon-megamenu__close:hover {
    opacity: 0.7;
  }

  /* ============================================================
     ACCOUNT ICON — plain inheritance, no independent transition
     BLINK FIX: this used to read `var(--color-account-icon,
     currentColor)` and carried its own `color` transition (via
     the shared #header-component selector list above). That
     meant two independently-animating things — the parent
     header-actions element transitioning its own color, AND this
     element transitioning towards a custom-property value that
     was itself changing every frame — chasing a moving target
     with two separate easing curves. For one frame per flip the
     two could disagree, which is exactly the single-frame "blink"
     visible on scroll. Plain `color: inherit` with NO transition
     of its own removes both problems: there is now exactly one
     place the color is decided (header-actions, or the
     data-header-text fallback above it), and this element simply
     shows whatever that ancestor is currently rendering, frame
     for frame, with no second animation to fall out of sync.

     NOTE: header-actions itself is now colored via mix-blend-mode
     (see BLEND-MODE ADAPTIVE above), so this rule's `color: inherit`
     picks up the blended white fill automatically — no change
     needed here.
  ============================================================ */
  #header-component shopify-account,
  #header-component .account-button,
  #header-component [data-testid='account-icon'],
  #header-component a.account-button {
    color: inherit;
    transition: none !important;
  }
  #header-component shopify-account svg,
  #header-component .account-button svg,
  #header-component a.account-button svg {
    color: inherit;
    fill: currentColor;
    transition: none !important;
  }

  /* ============================================================
     BASE HEADER STYLES
  ============================================================ */
  body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0;
  }

  .header {
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

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

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

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

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

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

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

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);
    --closed-underlay-height: 0px;
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-overlay);

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

    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

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

  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

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

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

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }
  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }
  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  .header__underlay {
    position: absolute;
    inset: 0;
  }
  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }
  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }
  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0);
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__row {
    --color-account-icon: var(--color-foreground);
    position: relative;
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      z-index: var(--layer-heightened);
    }
  }

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

  @media screen and (max-width: 380px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
    .custom-icon-megamenu__close {
    position: absolute;
    top: 13px !important;
    left: -230px !important;
    /* background: none; */
    border: none;
    padding: 6px;
    margin: -6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #424242;
    z-index: 2;
}
  }
@media screen and (max-width: 749px){
.custom-icon-megamenu__close {
    position: absolute;
    top: 13px !important;
    left: -270px ;
    /* background: none; */
    border: none;
    padding: 6px;
    margin: -6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #424242;
    z-index: 2;
}
}
  .header__column {
    display: flex;
    align-items: center;

    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

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

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

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

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

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }
@media screen and (min-width: 1700px){
  .header__column--right {
    gap: 5.5rem;
    justify-content: flex-end;
    grid-area: right;
  }
  
}
  .header__columns {
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);
    --header-mobile-bookend: 44px;

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

    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);
        grid-template-areas: 'left right';
      }
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);
      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }
      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }
      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }
      .search-action {
        grid-area: leftB;
      }
      header-actions {
        grid-area: rightB;
      }
    }
  }

  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);
    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }
    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }
    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }
    .search-action {
      grid-area: leftB;
    }
    header-actions {
      grid-area: rightB;
    }
  }

  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    letter-spacing: 0.02em;

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

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

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

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

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

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

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

  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

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

  /* ============================================================
     CUSTOM ICON MENU LAYOUT STYLES
  ============================================================ */
  #header-component:has(.custom-icon-menu-wrap) .header__columns {
    --header-template-columns: 1fr auto 1fr !important;
    grid-template-areas: 'left center right' !important;
    /* Reduced from the default clamp(24px–40px) so the logo sits
       closer to the hamburger/custom icon trigger on desktop. */
    grid-gap: 10px !important;

    @media screen and (max-width: 749px) {
      --header-template-columns: 60px 1fr 60px !important;
      grid-template-areas: 'left center right' !important;
      padding-inline: 15px !important;
    }
  }

  #header-component:has(.custom-icon-menu-wrap) .header__column {
    display: flex !important;

    @media screen and (max-width: 749px) {
      display: flex !important;
    }
  }

  #header-component:has(.custom-icon-menu-wrap) .header__column--left {
    grid-area: left;
    justify-content: flex-start;
    align-items: center;
  }

  #header-component:has(.custom-icon-menu-wrap) .header__column--center {
    grid-area: center;
    justify-content: center;
  }

  #header-component:has(.custom-icon-menu-wrap) .search-action {
    display: flex !important;
    grid-area: unset !important;
  }

  #header-component:has(.custom-icon-menu-wrap) .header__column--right .search-action {
    position: static !important;
  }

  #header-component:has(.custom-icon-menu-wrap) .header__column--right {
    grid-area: right;
    justify-content: flex-end;
  }

  .custom-icon-menu-wrap {
    position: relative;
    display: flex;
    align-items: center;
    top:-4px;
  }

  .custom-icon-megamenu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* ============================================================
     HAMBURGER IMAGE SIZE — homepage vs. all other pages
     Driven by --custom-menu-icon-img-size, set on #header-component
     in Liquid above: 80px on the homepage, 40px everywhere else.
     Falls back to 80px if the variable is somehow unset.
  ============================================================ */
  .custom-menu-icon-img {
    display: block;
    object-fit: cover;
    width: var(--custom-menu-icon-img-size, 80px) !important;
    height: var(--custom-menu-icon-img-size, 80px) !important;
    cursor: pointer;
  }

  /* ============================================================
     CUSTOM ICON MEGAMENU — click-driven, no hover
     UNIFIED: the panel now uses the SAME width, padding, and
     typography on desktop as on mobile (previously desktop got a
     28%-width sidebar with larger type and different close-button
     placement — that split is removed so "hamburger view" is
     identical at every breakpoint, per request).

     `top: 0` + `height: 100%` — panel opens flush with the top of
     the viewport, same as the cart/bag drawer, with no gap left
     for the header row above it.
  ============================================================ */
  .custom-icon-megamenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 86%;
    min-width: 0;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    overflow-y: auto;
    background-color: var(--color-background);
    z-index: calc(var(--layer-overlay, 400) + 10);

    pointer-events: none;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    &.is-open {
      pointer-events: all;
      transform: translateX(0);
    }
  }

  /* Panel stays comfortably narrow once there's real room for it —
     same breakpoint mobile already used to cap its own width, just
     no longer gated to only apply under 750px. */
  @media screen and (min-width: 480px) {
    .custom-icon-megamenu {
      width: 380px;
    }
  }

  .custom-icon-megamenu__inner {
    padding: 72px 28px 28px 28px;
  }

  /* ============================================================
     SECONDARY LIST (SEARCH / ACCOUNT / BAG / TERMS OF USE etc.)
     now renders identically on every breakpoint — see the
     header-menu snippet's .cid-mobile-bottom rules, which are no
     longer gated to max-width:749px, so desktop shows the same
     secondary menu as mobile.
  ============================================================ */

  /* ============================================================
     MOBILE HEADER LAYOUT (custom-icon layout only)
     UNCHANGED — per request, mobile keeps its icon-only layout
     exactly as it already renders. Nothing in this
     @media (max-width: 749px) block was touched.
  ============================================================ */
  @media screen and (max-width: 749px) {

    /* Single-row grid: hamburger | logo | search | bag  (account removed on mobile)
       Columns are now fixed px widths (instead of auto) so the hamburger
       column exactly equals the combined search + bag column width —
       this is what keeps the logo visually centered rather than optically
       off-center toward the two icons on the right.

       CENTERING FIX: even with equal-width bookend columns, the logo is
       now taken out of grid flow entirely and centered against the row
       itself (see .header__column--center / .header-logo rules below) —
       that removes any residual dependency on the two side columns being
       pixel-identical, which is what caused the logo to still read as
       slightly off-center. `position: relative` here gives the absolutely
       positioned logo something to center against. */
    #header-component:has(.custom-icon-menu-wrap) .header__columns {
      position: relative !important; /* NEW — anchor for centered logo */
      --header-template-columns: auto 1fr auto auto !important;
      grid-template-columns: auto 1fr auto auto !important;
      grid-template-areas: 'ham center search bag' !important;
      align-items: center !important;
      /* Reduced from 12px so the logo sits closer to the hamburger icon */
      column-gap: 4px !important;
      /* Equal spacing from each corner: the hamburger's distance from the
         left edge now exactly matches the bag icon's distance from the
         right edge (both 24px). Previously this was 14px on the right vs
         24px on the left via a separate padding-left override. */
      padding-inline: 24px !important;
    }

    /* Let column children become direct grid items */
    #header-component:has(.custom-icon-menu-wrap) .header__column {
      display: contents !important;
    }

    /* Custom-icon trigger sits in the hamburger slot on mobile too */
    #header-component:has(.custom-icon-menu-wrap) .custom-icon-menu-wrap {
      display: flex !important;
      grid-area: ham !important;
      justify-self: start !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 20px !important;
      min-height: 20px !important;
    }

    /* Smaller tap target + icon on mobile */
    #header-component:has(.custom-icon-menu-wrap) button.custom-icon-megamenu-trigger {
      width: 20px !important;
      height: 20px !important;
      max-width: 20px !important;
      max-height: 20px !important;
      -webkit-tap-highlight-color: transparent !important;
      padding-top: 5px !important;
    }

    /* object-fit: contain (not cover) so the uploaded icon renders with the
       same proportions/shape as on desktop — cover was cropping/distorting it,
       which is why it looked like a different icon on mobile.
       width/height are pinned to match the 20x20 tap target exactly (see
       button.custom-icon-megamenu-trigger above) so the icon can never
       overflow its own button and bleed into the side padding — that
       overflow (previously 30x30 rendered inside a 20x20 button) was what
       made the hamburger sit visually closer to the left edge than the
       bag icon sits to the right edge, even though both had the same
       24px container padding. */
    #header-component:has(.custom-icon-menu-wrap) .custom-icon-megamenu-trigger img.custom-menu-icon-img {
      width: 30px !important;
      height: 30px !important;
      max-width: 30px !important;
      max-height: 30px !important;
      object-fit: cover !important;
    }

    /* Panel becomes a near-full-width slide-in drawer on mobile */
    #header-component:has(.custom-icon-menu-wrap) .custom-icon-megamenu {
      width: 86% !important;
      min-width: 0 !important;
    }

    #header-component:has(.custom-icon-menu-wrap) .custom-icon-megamenu__inner {
      padding: 72px 28px 28px 28px !important;
    }

    /* Smaller type inside the panel on mobile — same hierarchy as desktop */
    #header-component:has(.custom-icon-menu-wrap) .cid-dropdown__menu-title,
    #header-component:has(.custom-icon-menu-wrap) .cid-dropdown__section-title {
      font-size: 11px !important;
      margin-bottom: 12px !important;
    }

    #header-component:has(.custom-icon-menu-wrap) .cid-dropdown__link {
      font-size: 11px !important;
    }

    #header-component:has(.custom-icon-menu-wrap) .cid-dropdown__link--toplevel {
      font-size: 13px !important;
    }

    #header-component:has(.custom-icon-menu-wrap) .cid-dropdown__link--soon {
      font-size: 11px !important;
    }

    #header-component:has(.custom-icon-menu-wrap) .cid-dropdown__badge {
      font-size: 10px !important;
    }

    /* Search — right side, just before the bag icon */
    #header-component:has(.custom-icon-menu-wrap) .search-action {
      grid-area: search !important;
      justify-self: center !important;
      position: static !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      pointer-events: auto !important;
      z-index: 70 !important;
      /* More breathing room between search and bag icons */
      margin-right: 8px !important;
    }

    /* Smaller search icon on mobile — max-width/height added because the
       .svg-wrapper (not just the svg) was carrying the real rendered size
       in some markup paths, so both layers are pinned here. */
    #header-component:has(.custom-icon-menu-wrap) .search-action .svg-wrapper,
    #header-component:has(.custom-icon-menu-wrap) .search-action svg {
      width: 16px !important;
      height: 16px !important;
      max-width: 16px !important;
      max-height: 16px !important;
    }

    /* Logo — centered against the header row itself, not against the
       grid's left/right columns (see .header__columns position:relative
       above). This keeps the logo visually centered regardless of any
       width mismatch between the hamburger and search+bag columns. */
    #header-component:has(.custom-icon-menu-wrap) .header__column--center,
    #header-component:has(.custom-icon-menu-wrap) .header-logo {
      grid-area: unset !important;
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      justify-self: unset !important;
    }
    #header-component:has(.custom-icon-menu-wrap) .header-logo,
    #header-component:has(.custom-icon-menu-wrap) .header-logo__image {
      max-height: 24px !important;
      width: auto !important;
      max-width: 150px !important;
      object-fit: contain !important;
      margin-right: 0;
      margin-left: 0;
    }

    /* ── Bag — far right (account removed on mobile) ── */
    #header-component:has(.custom-icon-menu-wrap) header-actions {
      grid-area: bag !important;
      justify-self: end !important;
      display: flex !important;
      align-items: center !important;
      gap: 0 !important;
      /* Extra breathing room between the search icon and the bag icon —
         column-gap on .header__columns above is shared by every column
         (ham/center/search/bag), so this margin adds space ONLY on the
         search→bag side without pushing the logo off-center. Increased
         from 10px for more visual separation between the two icons. */
      margin-left: 8px !important;
      pointer-events: auto !important;
      z-index: 10 !important;
      /* Smaller mobile bag icon (header-actions.liquid reads this custom
         property) — reduced from 24px. */
      --ens-mobile-bag-icon-size: 16px !important;
    }

    /* Belt-and-braces: force the actual <img> too, in case the CSS variable
       gets overridden elsewhere upstream. */
    #header-component:has(.custom-icon-menu-wrap) header-actions .custom-bag-icon-img {
      width: 16px !important;
      height: 16px !important;
      max-width: 16px !important;
      max-height: 16px !important;
    }

    /* Cart count badge — scaled up slightly and repositioned so it still
       sits neatly on the corner of the now-larger 24px bag icon. */
    #header-component:has(.custom-icon-menu-wrap) header-actions {
      --cart-bubble-size: 14px !important;
    }
    #header-component:has(.custom-icon-menu-wrap) header-actions .cart-bubble {
      top: -3px !important;
      right: -3px !important;
    }
    #header-component:has(.custom-icon-menu-wrap) header-actions .cart-bubble__text {
      font-size: 7px !important;
      padding-left:1px;
      padding-top:1px;

    }

    /* Cart count bubble — always overlay the bag icon's corner (not a
       separate flex item). The "text" actions-display-style theme setting
       normally pulls this bubble out into the flow next to "BAG", which is
       why it was showing up as its own floating dot on mobile. Force it
       back into an absolute-positioned badge here, and hide it completely
       when the cart is empty so mobile matches the reference (no dot). */
    #header-component:has(.custom-icon-menu-wrap) header-actions .header-actions__cart-icon {
      position: relative !important;
      display: inline-flex !important;
    }
    #header-component:has(.custom-icon-menu-wrap) header-actions .cart-bubble {
      position: absolute !important;
        top: 3px !important;
        right: -7px !important;
        transform: none !important;
    }
    #header-component:has(.custom-icon-menu-wrap) header-actions .cart-bubble:has(.cart-bubble__text-count:empty) {
      display: none !important;
    }

    /* Uniform tap target for all icon buttons — matches the reduced icon
       sizes above */
    #header-component:has(.custom-icon-menu-wrap) .search-action,
    #header-component:has(.custom-icon-menu-wrap) header-actions > * {
      min-width: 16px !important;
      min-height: 16px !important;
      align-items: center !important;
      justify-content: center !important;
    }

    /* ── Bag — fully tappable on mobile ── */
    #header-component:has(.custom-icon-menu-wrap) header-actions a[href*="/cart"],
    #header-component:has(.custom-icon-menu-wrap) header-actions .cart-button,
    #header-component:has(.custom-icon-menu-wrap) header-actions [data-testid='cart-icon-bubble'] {
      pointer-events: auto !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: transparent !important;
      position: relative !important;
      z-index: 10 !important;
    }

    /* ── Outline (stroke) icons — search and bag ── */
    #header-component:has(.custom-icon-menu-wrap) .search-action svg,
    #header-component:has(.custom-icon-menu-wrap) header-actions svg,
    #header-component:has(.custom-icon-menu-wrap) .header-actions svg {
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 1.5px !important;
      vector-effect: non-scaling-stroke;
    }

    /* Keep bag-count badge solid */
    #header-component:has(.custom-icon-menu-wrap) header-actions .cart-count,
    #header-component:has(.custom-icon-menu-wrap) header-actions .cart-count *,
    #header-component:has(.custom-icon-menu-wrap) header-actions [data-testid='cart-count'],
    #header-component:has(.custom-icon-menu-wrap) header-actions [data-testid='cart-count'] * {
      fill: currentColor !important;
      stroke: none !important;
    }

    /* ============================================================
       ACCOUNT ICON — removed entirely on mobile.
       Desktop keeps the account icon untouched; this media query
       only ever applies below the 750px breakpoint.
    ============================================================ */
    #header-component:has(.custom-icon-menu-wrap) header-actions {
      overflow: visible !important;
    }
    #header-component:has(.custom-icon-menu-wrap) shopify-account,
    #header-component:has(.custom-icon-menu-wrap) header-actions shopify-account,
    #header-component:has(.custom-icon-menu-wrap) .account-button,
    #header-component:has(.custom-icon-menu-wrap) a.account-button,
    #header-component:has(.custom-icon-menu-wrap) .header-actions__action--account,
    #header-component:has(.custom-icon-menu-wrap) header-actions a[href*="/account"],
    #header-component:has(.custom-icon-menu-wrap) [data-testid='account-icon'] {
      display: none !important;
      visibility: hidden !important;
      width: 0 !important;
      height: 0 !important;
      pointer-events: none !important;
    }

    /* Close cross position now matches desktop exactly (see the
       non-media .custom-icon-megamenu__close rule above) — no
       breakpoint-specific override needed any more. */
  }

  /* ============================================================
     1920px FLUID SCALING
  ============================================================ */
  @media screen and (min-width: 750px) {
    body {
      --header-height: clamp(60px, calc(60px + 30 * ((100vw - 1280px) / 640)), 90px);
      --header-group-height: var(--header-height);
    }
  }

  @media screen and (min-width: 750px) {
    .header {
      --header-padding: clamp(12px, calc(12px + 8 * ((100vw - 1280px) / 640)), 20px);
    }

    .header.header--compact {
      --header-padding: clamp(6px, calc(6px + 4 * ((100vw - 1280px) / 640)), 10px);
    }

    .header:not(.header--compact) .header__row--bottom .header__columns {
      --padding-block-start: clamp(8px, calc(8px + 6 * ((100vw - 1280px) / 640)), 14px);
      --padding-block-end:   clamp(8px, calc(8px + 6 * ((100vw - 1280px) / 640)), 14px);
    }
  }

  @media screen and (min-width: 750px) {
    .header__columns {
      grid-gap: clamp(24px, calc(24px + 16 * ((100vw - 1280px) / 640)), 40px);
    }

    .header__column--left,
    .header__column--center {
      gap: clamp(16px, calc(16px + 16 * ((100vw - 1280px) / 640)), 32px);
    }
  }

  /* ============================================================
     FULL-WIDTH HEADER FIX
     ------------------------------------------------------------
     EDGE SPACING DECREASED (per request):
       - base padding-inline: 15px → 8px
       - custom-icon-menu-wrap layout: padding-right 5px → 2px
         (padding-left stays 0, already tight against the
         hamburger)
     Mobile (max-width: 749px) padding is untouched elsewhere in
     this file, per request.
  ============================================================ */
  @media screen and (min-width: 750px) {
    .header__columns.spacing-style,
    #header-component .header__columns {
      max-width: 100% !important;
      width: 100% !important;
      margin-inline: 0 !important;
      box-sizing: border-box !important;
    }

    .header__columns.spacing-style,
    #header-component .header__columns {
      padding-inline: 8px!important;
    }

    #header-component:has(.custom-icon-menu-wrap) .header__columns {
      padding-left: 0px !important;
            padding-right: 29px !important;

    }

    .header__row {
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .header__row.section--page-width .header__columns,
    .header__row.section--page-width {
      max-width: 100% !important;
      width: 100% !important;
      margin-inline: 0 !important;
    }
  }

  @media screen and (min-width: 750px) {
    .custom-menu-icon-img {
     
    }
  }

  @media screen and (min-width: 1700px){
  /* UPDATED: bigger adaptive-logo size to match the logo block (400x60) */
  /* EDGE SPACING DECREASED (per request): matched to the same
     reduced values used in the Liquid <style> block above (64px /
     56px), so both rules that target this selector at this
     breakpoint stay in sync instead of one silently overriding
     the other. */
#header-component:has(.custom-icon-menu-wrap) .header__columns{
  padding-left:64px !important;
  padding-right:56px !important;
}
}
 @media screen and (min-width: 750px){
.section {
  --full-page-grid-margin: 0fr !important;
  --full-page-grid-with-margins: 0fr !important;
    }}
/* END_SECTION:header */
/* START_SECTION:product-information (INDEX:44) */
@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: 1.4fr 1fr !important;
  }
}
@media screen and (min-width: 1700px){
  .product-information--media-left {
  padding-top: 80px !important;
}
#shopify-section-template--22424561942753__main .product-information__grid:not( .product-information--media-none ).product-information--media-left .product-information__media{
  padding-right: 47px !important;
  Padding-left:122px !important;
}
}

element.style {
}
@media screen and (max-width: 1300px){
#shopify-section-template--22424561942753__main :is(.rte, #shopify-section-template--22424561942753__main .shopify-policy__title) :first-child:is(p, #shopify-section-template--22424561942753__main h1, #shopify-section-template--22424561942753__main h2, #shopify-section-template--22424561942753__main h3, #shopify-section-template--22424561942753__main h4, #shopify-section-template--22424561942753__main h5, #shopify-section-template--22424561942753__main h6), #shopify-section-template--22424561942753__main :is(.rte, #shopify-section-template--22424561942753__main .shopify-policy__title) :first-child:empty + :is(p, #shopify-section-template--22424561942753__main h1, #shopify-section-template--22424561942753__main h2, #shopify-section-template--22424561942753__main h3, #shopify-section-template--22424561942753__main h4, #shopify-section-template--22424561942753__main h5, #shopify-section-template--22424561942753__main h6) {
    font-weight: 500;
    margin-block-start: 0;
    font-family: "Atkinson Hyperlegible";
    color: #424242;
    font-size: 9.9px !important;
}
}
@media screen and (min-width: 1350px){
#shopify-section-template--22424561942753__main :is(.rte, #shopify-section-template--22424561942753__main .shopify-policy__title) :first-child:is(p, #shopify-section-template--22424561942753__main h1, #shopify-section-template--22424561942753__main h2, #shopify-section-template--22424561942753__main h3, #shopify-section-template--22424561942753__main h4, #shopify-section-template--22424561942753__main h5, #shopify-section-template--22424561942753__main h6), #shopify-section-template--22424561942753__main :is(.rte, #shopify-section-template--22424561942753__main .shopify-policy__title) :first-child:empty + :is(p, #shopify-section-template--22424561942753__main h1, #shopify-section-template--22424561942753__main h2, #shopify-section-template--22424561942753__main h3, #shopify-section-template--22424561942753__main h4, #shopify-section-template--22424561942753__main h5, #shopify-section-template--22424561942753__main h6) {
    font-weight: 500;
    margin-block-start: 0;
    font-family: "Atkinson Hyperlegible";
    color: #424242;
    font-size: 13px !important;
        line-height: 18px;
}
}

/* ─────────────────────────────────────────────
   FIX: Prevent the accordion column's height
   changes from reflowing/shifting the media
   (image) column next to it. Image stays in
   normal document flow — NOT sticky/pinned.
   ───────────────────────────────────────────── */
#shopify-section-template--22424561942753__main .product-information__grid {
  align-items: start !important;
}

#shopify-section-template--22424561942753__main .product-information__media {
  align-self: start !important;
}

#shopify-section-template--22424561942753__main .product-information__blocks {
  contain: layout;
}
/* ───────────────────────────────────────────── */

/* ─── Sticky Bar Container ─── */
.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);
  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);
  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);
  }
}

/* Desktop/laptop: never show the sticky bar — mobile-only feature */
@media screen and (min-width: 750px) {
  .sticky-add-to-cart__bar {
    display: none !important;
  }
}

/* Keep the bar out of any page-level view transition (cross-fade/flip)
   the theme's own add-to-cart script may trigger — it should never be
   captured, faded out, or otherwise touched by that effect; it just
   stays on screen the whole time. */
sticky-add-to-cart,
sticky-add-to-cart * {
  view-transition-name: none !important;
}

/* Global transition/animation kill-switch — toggled by JS for a brief
   window right after an Add to Bag click. Forces every element's CSS
   transitions and animations off site-wide, so whatever pop-in/jump
   the theme's own add-to-cart handling does can't visually animate,
   regardless of which element or class triggers it. */
html.atc-no-transition,
html.atc-no-transition * {
  transition: none !important;
  animation: none !important;
}

/* Required ref for the real theme sticky-add-to-cart component —
   purely structural, always hidden. Our own confirmation text below
   the button is the visible "X quantity added" indicator. */
sticky-add-to-cart [ref="quantityDisplay"] {
  display: none !important;
}

/* Size selector slot inside the sticky bar — empty/hidden on desktop,
   filled with the real <variant-picker> and shown on mobile by
   _size-guide.liquid's script. */
.sticky-atc-size-slot {
  display: none;
}

/* "guide" link slot — empty/hidden on desktop, filled with the real
   guide button and shown on mobile by _size-guide.liquid's script. */
.sticky-atc-guide-slot {
  display: none;
  background: transparent;
}

.ens-product-title {
  margin: 0;
  font-family: "Cubao Wide" !important;
  font-weight: var(--font-weight-bold, 800);
  line-height: 1.15;
  letter-spacing: 0.05em !important;
  text-transform: none;
  width:300px;
}

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

/* ─── Product Image ─── */
.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;
}

/* ─── Product Info (title + variant) ─── */
.sticky-add-to-cart__info {
  flex: 1;
  min-width: 0;
}

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

.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-atc-variant {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  font-size: var(--font-paragraph-small--size);
  margin-top: var(--margin-3xs);
}

/* ─── Action Row ─── */
.sticky-atc-action-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ─── Price + note side by side ─── */
.sticky-atc-price-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sticky-add-to-cart__price {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  flex-shrink: 0;
}

.sticky-atc-price-note {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 3px;
  max-width: 88px;
  flex-shrink: 0;
}

.sticky-atc-price-note__slash {
  font-size: var(--font-paragraph-small--size, 11px);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.55));
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

.sticky-atc-price-note__text {
  font-size: var(--font-paragraph-small--size, 11px);
  color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text, 0.55));
  line-height: 1.4;
  white-space: normal;
  word-break: normal;
}

/* ─── Button + Confirmation stacked ─── */
.sticky-atc-button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ─── ADD TO BAG button ─── */
.sticky-add-to-cart__button {
  height: var(--height-buy-buttons);
  padding: 0 var(--padding-xl, 24px);
  border-radius: 999px;
  background-color: #111;
  color: #fff;
  font-size: var(--font-paragraph-small--size, 11px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.sticky-add-to-cart__button:hover:not(:disabled) {
  background-color: #333;
}

.sticky-add-to-cart__button:active:not(:disabled) {
  transform: scale(0.97);
}

.sticky-add-to-cart__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Quantity confirmation ───
   Appears/disappears instantly (no entrance animation). The previous
   fadeInUp animation, combined with the JS forcing a reflow to restart
   it on every click, was the source of the visible glitch/jump right
   as the theme's own add-to-cart handling ran on the same click. */
.sticky-atc-confirmation {
  font-size: var(--font-paragraph-small--size, 11px);
  color: #590025;
  text-align: center;
  white-space: nowrap;
}

@keyframes atcFadeUp {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sticky-atc-confirmation[style*="block"] {
  animation: atcFadeUp 0.25s ease forwards;
}
@media screen and (min-width: 1000px){
.product-information--media-left {
  padding-top: 50px !important;
}
}

/* ─── Blank spacer reserved just above the footer ───
   Height is kept in sync (via JS) with the sticky bar's real rendered
   height, so on mobile the fixed bar only ever sits over this blank
   buffer — never over real page content like the accordion. Inert on
   desktop, where the sticky bar never renders. */
.sticky-atc-footer-spacer {
  display: none;
  width: 100%;
  height: 0px;
}

@media screen and (max-width: 749px) {
  .sticky-atc-footer-spacer {
    display: block;
  }
}

/* ─── Docked state ───
   Swapped in for `position: fixed` at the exact moment the reserved
   spacer reaches the bottom of the viewport, and swapped back out once
   scrolled back above it. Unlike a transform recalculated on every
   scroll frame (which always lags one frame behind the browser's own
   compositor-driven scroll — that lag is what read as jitter), both
   `fixed` and this `absolute` state are handled entirely by the
   compositor with no JS involved while actively scrolling. JS only
   runs at the moment of the switch itself, computed to land exactly
   where the fixed bar would already be, so the transition is
   invisible. */
@media screen and (max-width: 749px) {
  sticky-add-to-cart.sticky-atc-docked {
    position: absolute !important;
    top: var(--sticky-atc-dock-top, auto);
    bottom: auto !important;
  }
}

/* ─── Mobile ─── */
@media screen and (max-width: 749px) {
  /* Simple, DOM-stable positioning: the bar stays exactly where the
     theme originally rendered it (no reparenting — that broke the
     size-selector script that injects the variant picker into this
     bar) and is pinned to the viewport bottom via `position: fixed`.
     JS applies a `transform: translateY()` offset, recalculated on
     scroll and on layout changes, so it slides up rather than
     overlapping the footer. See the docking script below. */
  sticky-add-to-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--layer-sticky) - 1);
    display: block;
    will-change: transform;
    /* Top edge of the whole card — sits above whichever piece happens
       to be visually first (the size bar when open, otherwise the
       guide row, otherwise the price/button bar), so the boundary with
       the rest of the page stays consistent no matter what's revealed. */
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

#shopify-section-template--22424561942753__main :is(.rte,#shopify-section-template--22424561942753__main .shopify-policy__title) :first-child:is(p,#shopify-section-template--22424561942753__main h1,#shopify-section-template--22424561942753__main h2,#shopify-section-template--22424561942753__main h3,#shopify-section-template--22424561942753__main h4,#shopify-section-template--22424561942753__main h5,#shopify-section-template--22424561942753__main h6), #shopify-section-template--22424561942753__main :is(.rte,#shopify-section-template--22424561942753__main .shopify-policy__title) :first-child:empty+:is(p,#shopify-section-template--22424561942753__main h1,#shopify-section-template--22424561942753__main h2,#shopify-section-template--22424561942753__main h3,#shopify-section-template--22424561942753__main h4,#shopify-section-template--22424561942753__main h5,#shopify-section-template--22424561942753__main h6){
  font-size:15px !important;
}
  sticky-add-to-cart:not([data-variant-available='true']) {
    display: none;
  }

  .sticky-add-to-cart__bar {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    border-radius: 0;
    flex-wrap: wrap;
    padding: 0;
    gap: 0;
    /* Flat, opaque card matching the guide row above it — the desktop
       popover's blurred-glass ::before treatment doesn't apply here. */
    background: var(--color-background, #eeeeee);

    &::before {
      display: none;
    }
  }

  /* Bar is the ONLY size/price/add-to-cart UI on mobile — always
     visible from page load, not scroll-triggered. */
  sticky-add-to-cart[data-variant-available='true'] .sticky-add-to-cart__bar {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Mockup shows size + price + button only — no thumbnail/title row */
  .sticky-add-to-cart__info,
  .sticky-add-to-cart__info[data-has-image='false'] {
    display: none !important;
  }
  

  .sticky-add-to-cart__image {
    /* Pin to a fixed, known spot near the Add to Bag button so the
       theme's fly-to-cart animation has a predictable, correct origin
       point. (position: absolute here let the browser guess a "static
       position" based on the rearranged mobile flex layout, which
       landed it somewhere random on the page instead of at the bar.) */
    visibility: hidden;
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    pointer-events: none;
  }

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

  .sticky-add-to-cart__price {
    font-size: 1.1rem;
  }

  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__button {
        padding: 0 40px !important;
        min-height: 40px !important;
        font-size: 12px !important;
    }
    .sticky-atc-price-group{
      gap: 15px !important;
      /* Let price+note compress instead of the button — this is what
         was causing "ADD TO BAG" to get clipped off the right edge:
         both this group and the button refused to shrink (flex-shrink:0
         on both), so their combined natural width overflowed the
         viewport and the button (rendered second) got cut off instead
         of the row wrapping or compressing. */
      flex-shrink: 1 !important;
      min-width: 0 !important;
    }
}

  .sticky-atc-price-note {
    max-width: 160px;
    flex-shrink: 1;
    min-width: 0;
  }

  .sticky-add-to-cart__button {
    padding: 0 32px;
    min-height: 48px;
    font-size: 12px;
  }

  .sticky-atc-action-row {
    width: 100%;
    padding: 20px 20px;
    justify-content: space-between;
  }

  /* ── "guide" link row, relocated here on mobile by
     _size-guide.liquid's script. Genuinely transparent — this is a
     separate box stacked above .sticky-add-to-cart__bar, not nested
     inside it, so there's no shared background to see through.

     Hidden until ADD TO BAG is tapped once without a size chosen — see
     __ensRevealGuideRow() in this section's {% javascript %} block.
     The data-ens-revealed attribute is only ever added, never removed,
     so once shown this stays shown until a full page refresh.

     The guide link is absolutely positioned to the right — completely
     decoupled from the label's own layout/visibility. A flex
     space-between (or even flex-end + margin-auto on the label) still
     reflows the guide link's position the instant the label's box
     appears/disappears, which is what looked like the guide link
     jumping/glitching. Absolute positioning removes it from that flow
     entirely, so it never moves no matter what the label is doing. ── */
  /* FIX: was `background: transparent`, which is what let the black
     footer flash through for a single frame during fast scrolling —
     JS scroll-driven positioning always has up to one frame (~16ms)
     of unavoidable lag behind the browser's own scroll repaint, and
     with a transparent strip here, that lag frame briefly exposed
     whatever was really behind it (the footer) instead of blending
     with the page. An opaque backdrop matching the page background
     means that lag frame is now invisible — at worst the bar is a
     fraction of a pixel off for one frame, never a black flash. */
  .sticky-atc-guide-slot {
    position: relative;
    display: none;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%;
    min-height: 20px;
    padding: 14px 20px;
    background: var(--color-background, #eeeeee);
    border-bottom: 1px solid #424242;
    border-top: 1px solid #424242;
  }

  /* Revealed once ADD TO BAG has been tapped without a size chosen.
     Slides in rather than just popping in, so the appearance reads as
     a deliberate reveal rather than a layout glitch. */
  sticky-add-to-cart[data-ens-revealed="true"] .sticky-atc-guide-slot {
    display: grid;
    animation: ensGuideSlideIn 0.3s ease;
  }

  /* Vertical divider between "select a size" and "size guide", centered
     on the grid's column boundary so both labels sit equidistant from it. */
  .sticky-atc-guide-slot::after {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 50%;
    width: 0.5px;
    background: #424242;
    transform: translateX(-50%);
  }

  @keyframes ensGuideSlideIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .sticky-atc-guide-slot .ens-size-row__guide-btn {
    justify-self: center;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #424242;
    text-decoration: none;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-weight: 500;
  }

  /* "select a size" trigger label — left half of the guide row, centered
     within it (a vertical divider sits at the row's midpoint — see
     .sticky-atc-guide-slot::after — with this and "size guide" centered
     equidistant from it). Visible by default (as soon as the row itself
     is revealed) reading "select a size". Once a size is picked, JS
     swaps its text to the chosen size (see .ens-size-chosen below) — it
     stays in exactly this same spot, same weight, so tapping it still
     re-opens the size options to let the shopper change their pick.
     Weight/size/color intentionally match .ens-size-row__guide-btn so
     both sides of the row read as one consistent style. */
  .sticky-atc-guide-slot .ens-size-row__label {
    justify-self: center;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: #424242;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-weight: 500;
    cursor: pointer;
    /* Bigger tap target without moving the visible text — padding
       expands the hit area, negative margin cancels the layout shift. */
    padding: 10px 14px;
    margin: -10px -14px;
    display: inline-block;
  }

  /* Chosen state: stays put — same position, same weight/size/color as
     "select a size" was. Text has already been swapped to the picked
     size by JS; no extra styling needed to read as a confirmed pick. */
  .sticky-atc-guide-slot .ens-size-row__label.ens-size-chosen {
    font-weight: 500;
    color: #424242;
  }

  /* ── Size selector slot: maroon segmented bar ──
     A plain block-level sibling sitting above the guide row in the DOM
     (see markup comment above) — that's what puts it visually above
     "select a size / guide" once opened, matching the reference design.
     Collapsed by default. Opened by tapping "select a size" (see
     open()/close() in _size-guide.liquid) and closed again once a size
     is chosen or the shopper taps outside/toggles it shut. */
  .sticky-atc-size-slot {
    display: block;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  }

  .sticky-atc-size-slot.sticky-atc-size-slot--open {
    max-height: 200px;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
  }

  .sticky-atc-size-slot .variant-picker,
  .sticky-atc-size-slot .variant-picker__form {
    margin: 0;
    padding: 0;
  }

  .sticky-atc-size-slot .variant-option--buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #590a2a;
  }

  .sticky-atc-size-slot .variant-option--buttons legend {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .sticky-atc-size-slot .variant-option__button-label {
    min-height: 0;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    border: none !important;
    border-right: 1px solid #eeeeee !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #eeeeee !important;
    position: relative !important;
  }

  .sticky-atc-size-slot .variant-option__button-label:last-child {
    border-right: none !important;
  }

  .sticky-atc-size-slot .variant-option__button-label::before,
  .sticky-atc-size-slot .variant-option__button-label::after,
  .sticky-atc-size-slot .variant-option__button-label__pill,
  .sticky-atc-size-slot .variant-option__button-label svg {
    display: none !important;
    content: none !important;
  }

  .sticky-atc-size-slot .variant-option__button-label__text {
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: #eeeeee !important;
  }

  /* Selected segment turns grey, text goes bold — this is the "changes
     color to grey" behaviour from the reference mockup. */
  .sticky-atc-size-slot .variant-option__button-label:has(input:checked):not(:has(input[data-option-available="false"])) {
    background: #8b8b8b !important;
  }

  .sticky-atc-size-slot .variant-option__button-label:has(input:checked) .variant-option__button-label__text {
    font-weight: 700;
  }

  /* Out-of-stock segment — grayed background + a short strike that
     hugs the size text (matches the desktop treatment in
     _size-guide.liquid: the ::after now sits on the text span itself,
     with a small few-px overhang on each side, instead of spanning the
     full width of the segment). */
  .sticky-atc-size-slot .variant-option__button-label:has(input[data-option-available="false"]) {
    background: rgba(255, 255, 255, 0.16);
  }

  .sticky-atc-size-slot .variant-option__button-label:has(input[data-option-available="false"]) .variant-option__button-label__text {
    text-decoration: none;
    opacity: 0.6;
    position: relative;
  }

  .sticky-atc-size-slot .variant-option__button-label:has(input[data-option-available="false"]) .variant-option__button-label__text::after {
    display: block !important;
    content: '' !important;
    position: absolute;
    left: -6px;
    right: -6px;
    top: 50%;
    height: 1px;
    background: #eeeeee;
    pointer-events: none;
    z-index: 2;
  }

  .sticky-atc-size-slot .variant-option__button-label input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
  }

  @keyframes atcSizeShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
  }

  .sticky-atc-size-slot--error .variant-option--buttons {
    animation: atcSizeShake 0.5s;
    outline: 2px solid #c94a1f;
    outline-offset: -2px;
  }

  /* ── Tap guard for "ADD TO BAG" + inline validation text ──────────
     Set up by _size-guide.liquid's script. The real button is never
     restyled/greyed — .sticky-atc-btn-guard is a same-size invisible
     layer directly on top of it, active only while no size is chosen,
     so taps land on the guard instead of the real button (no click
     ever reaches the real button, no theme add-to-cart handling ever
     starts, nothing to visually jump/transition). Once a size is
     picked the guard goes inert and taps pass straight through. */
  .sticky-atc-btn-holder {
    position: relative;
    display: inline-flex;
  }

  .sticky-atc-btn-guard {
    display: none;
    position: absolute;
    inset: 0;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
  }

  .sticky-atc-btn-guard--active {
    display: block;
  }

  .sticky-atc-size-required {
    font-size: 11px;
    font-weight: 700;
    color: #590025;
    text-align: center;
    white-space: nowrap;
    margin-top: -6px;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }

  .sticky-atc-size-required--visible {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

  .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
    display: block;
  }

  .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-atc-variant {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* END_SECTION:product-information */
/* START_BLOCK:_accordion-row (INDEX:55) */
.accordion {
    border-radius: 0;
  }

  @media screen and (min-width: 750px) {
    .accordion {
      max-height: 420px;
      overflow-y: auto;
      overflow-x: hidden;

      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* old Edge/IE */
    }

    .accordion::-webkit-scrollbar {
      display: none; /* Chrome, Safari, new Edge */
    }
  }

  @media screen and (max-width: 749px) {
    .accordion {
      max-height: none;
      overflow-y: visible;
      overflow-x: hidden;
    }
  }

  .details {
    contain: layout style;
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }

  .details-content {
    overflow: hidden;
    min-height: 0;
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .icon-animated svg {
    transition: transform 0.2s ease;
    display: block;
  }

  .details[open] .icon-animated svg {
    transform: rotate(180deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .icon-animated svg {
      transition: none;
    }
  }
/* END_BLOCK:_accordion-row */
/* START_BLOCK:_bring-it-back (INDEX:63) */
.ens-vote-box {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
    padding: 20px;
    gap: 16px;
  }

  .ens-vote-box__left {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ens-vote-box__heading {
    margin: 0;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #111;
  }

  .ens-vote-box__subtext {
    margin: 0;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    max-width: 260px;
  }

  .ens-vote-box__yes {
    align-self: flex-start;
    margin-top: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    color: #590a2a;
  }

  .ens-vote-box__yes:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .ens-vote-box__thanks {
    margin: 8px 0 0;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #590a2a;
  }

  .ens-vote-box__divider {
    width: 1px;
    background: rgb(var(--color-foreground-rgb) / 0.15);
    flex-shrink: 0;
  }

  .ens-vote-box__gauge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    color: #111;
  }

  .ens-vote-box__gauge img,
  .ens-vote-box__gauge svg {
    width: 100%;
    height: auto;
    display: block;
  }
/* END_BLOCK:_bring-it-back */
/* START_BLOCK:_edition-counter (INDEX:77) */
.ens-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Red all-caps collection label */
  .ens-collection-label {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #590025;
    font-family: 'Atkinson Hyperlegible';
    margin-bottom: -5px;
  }
 @media screen and (min-width: 1700px){
  .ens-collection-label {
    font-size: 18px;
    letter-spacing: 0.15em;
  }
  .ens-product-subtitle{
    font-size: 20px !important;
  }
}
  /* Title + badge on one line */
  .ens-title-row {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }

  .ens-product-title {
    margin: 0;
    /* Inherit whatever heading style the theme uses */
    font-size: var(--font-heading-h1--size, var(--font-h1--size, 2.5rem));
    font-family: var(--font-heading--family, var(--font-body--family));
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  /* [ 26 / 50 ] badge inline, nudged up above the title baseline */
  .ens-edition-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    font-family: 'Atkinson Hyperlegible';
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #590025;
    white-space: nowrap;
    /* nudge up relative to the heading baseline */
    position: relative;
    top: -0.4em;
    vertical-align: baseline;
  }

  /* Sold-out state for the badge */
  .ens-edition-badge--sold-out {
    color: #590025;
    font-weight: 700;
  }

@media screen and (min-width: 1700px){
  .ens-edition-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    font-family: 'Atkinson Hyperlegible';
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #590025;
    white-space: nowrap;
    /* nudge up relative to the heading baseline */
    position: relative;
    top: -0.4em;
    vertical-align: baseline;
  }
}

  /* ───────────────────────────────────────────────
     MOBILE ONLY: let the badge flow with the text
     so it sits next to whichever word the title
     wraps to last (e.g. "ATTACHED [26/50]"),
     instead of pinning to the first line.
     Adjust the max-width below if your theme's
     mobile breakpoint differs.
  ─────────────────────────────────────────────── */
  @media screen and (max-width: 749px) {
    .ens-title-row {
      display: block;
    }

    .ens-product-title {
      display: inline;
      /* slightly smaller on mobile so the last line has
         room to fit the badge next to it */
      font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .ens-edition-badge {
      display: inline-flex;
      position: relative;
      top: -0.19em;
      margin-left: 4px;
      gap: 3px;
      font-size: 0.9rem;
      letter-spacing: 0.02em;
    }
  }

  .ens-edition-bracket {
    
  }

  .ens-edition-num {
    display:none
  }

  .ens-edition-sep {
    opacity: 1;
    margin: 0 1px;
    display:none;
  }

  /* "boxy fit tee" subtitle — monospace / typewriter */
  .ens-product-subtitle {
    margin: -2px 0 0;
    font-size: 13px;
    font-family: 'Archivo black';
    letter-spacing: 0.32rem;
    /* text-transform: lowercase; */
    color: #424242;
  }
/* END_BLOCK:_edition-counter */
/* START_BLOCK:_header-logo (INDEX:86) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

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

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

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

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

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

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

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }
/* ── UPDATED: bigger logo on very large screens ── */
@media screen and (min-width: 1700px){
  .header-logo__image {
        height: 50px;
        width: 400px;
    }
}
  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */
/* START_BLOCK:_header-menu (INDEX:87) */
/* ============================================================
     CUSTOM ICON DROPDOWN STYLES  (tasting-menu look)
  ============================================================ */
  .cid-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0;

    /* Mockup palette. To use your brand colors instead, swap these
       for var(--color-primary), var(--color-foreground), etc. */
    --cid-maroon: #590025;  /* heading           */
    --cid-brick:  #590025;  /* "serving soon" + badge */
    --cid-ink:    #424242;  /* clickable items   */
  }

  /* Title — "THE TASTING MENU" / section titles */
  .cid-dropdown__menu-title,
  .cid-dropdown__section-title {
    font-family:'Atkinson Hyperlegible' !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #424242;
    margin: 0 0 14px;
    padding: 0;
    line-height: 1.3;
  }
  .cid-dropdown__menu-title:active,
  .cid-dropdown__section-title:active {
    color: var(--cid-maroon, #590025);
    opacity: 1;
  }
  .cid-dropdown__menu-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cid-dropdown__title-arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: 8px;
    /* Grey by default at every width — the panel's open/closed state,
       not the viewport size, decides the color. */
    filter: brightness(0) saturate(100%) invert(26%);
    transition: filter 0.2s ease, transform 0.2s ease;
    transform: rotate(180deg); /* closed (default) — points down */
  }

  /* Title text AND arrow both switch to burgundy while the panel is
     open, at every width — driven purely by aria-expanded. */
  .cid-dropdown__menu-title:has(.cid-dropdown__title-arrow-btn[aria-expanded='true']) {
    color: var(--cid-maroon, #590025);
  }

  .cid-dropdown__title-arrow-btn[aria-expanded='true'] .cid-dropdown__title-arrow {
    filter: brightness(0) saturate(100%) invert(9%) sepia(54%) saturate(3207%) hue-rotate(313deg) brightness(83%) contrast(102%);
    transform: rotate(0deg); /* open — points up */
  }

  .cid-dropdown__menu-title-link,
  .cid-dropdown__section-title-link {
    color: inherit;
    text-decoration: none;
  }

  /* Lists */
  .cid-dropdown__list--root { padding-left: 0; }
  .cid-dropdown__section { margin-bottom: 18px; }
  .cid-dropdown__section:last-child { margin-bottom: 0; }
  .cid-dropdown__section--flat { margin-bottom: 4px; }

  .cid-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .cid-dropdown__item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 0;
    margin-left: 10px;          /* clickable categories sit indented */
  }

  /* "serving soon" rows sit slightly further left, like the mockup */
  .cid-dropdown__item:has(.cid-dropdown__link--soon) {
    margin-left: 0;
  }

  /* Clickable items — currently just APPETIZERS. Kept at #424242,
     turns purple (--cid-maroon) on click/tap. */
  .cid-dropdown__link {
    font-family: var(--font-body--family, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: #424242;
    line-height: 1.2;
    transition: opacity 0.15s ease, color 0.1s ease;
    cursor: pointer !important;
    white-space: nowrap;
    display: inline-block;
  }
  .cid-dropdown__link:hover { opacity: 0.5; }
  .cid-dropdown__link:active { color: var(--cid-maroon); opacity: 1; }

  .cid-dropdown__link--toplevel {
    font-size: 12px;
    font-weight: 700;
  }

  /* "serving soon" labels — e.g. ENTREÉS, PALATE CLEANSERS, DESSERTS */
  .cid-dropdown__link--soon {
    color: #424242;
    font-weight: 100;
    cursor: pointer;
    font-family:'Atkinson Hyperlegible';
    margin-left: 10px;
  }
  .cid-dropdown__link--soon:hover { opacity: 1; }

  /* The [ serving soon ] tag */
  .cid-dropdown__badge {
    font-family: var(--font-body--family, sans-serif);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--cid-brick);
    white-space: nowrap;
  }

  /* ============================================================
     TASTING-MENU ACCORDION TOGGLE
     The list under "THE TASTING MENU" is closed by default and
     expands when EITHER the title text OR its arrow is clicked (the
     title text was previously just plain text with no click behavior
     at all — it's now wired up in JS to trigger the exact same toggle
     as the arrow). The JS force-closes this on every load/re-hydration
     so it can never render pre-opened, and also closes it automatically
     whenever a different panel (an accordion or the search field) is
     opened, and vice versa.
  ============================================================ */
  .cid-dropdown__menu-title-text {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .cid-dropdown__title-arrow-btn {
    background: none;
    border: none;
    padding: 4px;
    margin: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .cid-dropdown__list--root[data-cid-dropdown-panel] {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    /* Height is driven by inline styles set from JS (measured from the
       panel's real scrollHeight — see the <script> block above), which
       is what makes this animate proportionally to the actual content
       instead of racing toward a fixed cap. This is also why opening
       Terms of Use right after the tasting menu (or vice versa) now
       animates both panels smoothly at the same time. */
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cid-dropdown__list--root[data-cid-dropdown-panel].is-open {
    opacity: 1;
  }

  @media screen and (min-width: 1700px) {
    .cid-dropdown__menu-title,
    .cid-dropdown__section-title {
      font-family: var(--font-body--family, sans-serif);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #424242;
      margin: 0 0 14px;
      padding: 0;
      line-height: 1.3;
    }
    .cid-dropdown__link {
      font-size: 15px !important;
    }
    .cid-dropdown__badge {
      font-size: 14px;
    }
  }

  /* ============================================================
     SECONDARY DRAWER LIST (SEARCH / ACCOUNT / BAG / TERMS OF USE
     etc.)
     Search / Bag / Account are hidden on desktop (see the
     --search / --bag / --account media query further down) so they
     only ever show inside the mobile hamburger drawer. Terms of
     Use / About / Contact / Community remain visible on every
     breakpoint.
  ============================================================ */
  .cid-mobile-bottom {
    display: block;
    margin-top: 0px;
  }

  .cid-mobile-bottom__divider {
    height: 1px;
    margin-bottom: 18px;
  }

  .cid-mobile-bottom__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .cid-mobile-bottom__item + .cid-mobile-bottom__item {
    margin-top: 4px;
  }

  /* Extra breathing room specifically between "Bag" and "Terms of
     Use" — applied to the Terms of Use item so the gap sits above
     it, without touching spacing between any other items. Higher
     specificity than the default adjacent-sibling rule above so it
     wins without needing !important. */
  .cid-mobile-bottom__item + .cid-mobile-bottom__item.cid-mobile-bottom__item--extra-gap {
    margin-top: 0px;
  }

  /* Search / Bag / Account: mobile drawer only, hidden on desktop. */
  @media screen and (min-width: 750px) {
    .cid-mobile-bottom__item--search,
    .cid-mobile-bottom__item--bag,
    .cid-mobile-bottom__item--account {
      display: none;
    }
  }

  @media screen and (max-width: 750px) {
    .cid-mobile-bottom__item + .cid-mobile-bottom__item.cid-mobile-bottom__item--extra-gap {
      margin-top: 22px !important;
    }
    .cid-mobile-bottom__sublink {
      font-size: 11px !important;
      padding: 7px 0px !important;
    }
    .cid-mobile-bottom__link-text--anchor {
      font-size: 11px !important;
      margin: 0 0 0px !important;
    }
    .cid-mobile-bottom__link {
      font-size: 11px !important;
      font-family: var(--font-body--family, sans-serif);
      font-weight: 700;
      letter-spacing: .16em !important;
      text-transform: uppercase;
      color: #424242;
      margin: 0 0 8px !important;
      padding: 0;
    }

    /* Tasting menu title + its expand/collapse arrow: grey by default,
       burgundy while the panel underneath it is open. Mobile only —
       desktop keeps whatever color the earlier rules already set. */
    .cid-dropdown__menu-title {
      color: #424242 !important;
    }

    .cid-dropdown__title-arrow {
      filter: brightness(0) saturate(100%) invert(26%);
    }

    .cid-dropdown__menu-title:has(.cid-dropdown__title-arrow-btn[aria-expanded='true']) {
      color: var(--cid-maroon, #590025) !important;
    }

    .cid-dropdown__title-arrow-btn[aria-expanded='true'] .cid-dropdown__title-arrow {
      filter: brightness(0) saturate(100%) invert(9%) sepia(54%) saturate(3207%) hue-rotate(313deg) brightness(83%) contrast(102%);
    }
  }

  .cid-mobile-bottom__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: 3px 0;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    color: #424242;
  }

  /* Click / active feedback on any drawer item — turns purple. */
  .cid-mobile-bottom__link:active .cid-mobile-bottom__link-text {
    color: var(--cid-maroon, #590025);
  }

  /* Search item stays purple while its inline field is open. */
  [data-cid-mobile-search-trigger][aria-expanded='true'] .cid-mobile-bottom__link-text {
    color: var(--cid-maroon, #590025);
  }

  /* Inline search field shown under the Search item in the drawer. */
  .cid-mobile-bottom__search-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }

  .cid-mobile-bottom__search-panel.is-open {
    max-height: 80px;
    opacity: 1;
    margin-top: 10px;
  }

  .cid-mobile-bottom__search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #424242;
    padding-bottom: 3px;
  }

  .cid-mobile-bottom__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: #9a9a9a;
  }

  .cid-mobile-bottom__search-input::placeholder {
    color: #9a9a9a;
  }

  .cid-mobile-bottom__search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1;
    color: #424242;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Accordion row is now a div wrapping a real link + a separate
     arrow button, so the row itself shouldn't look clickable. */
  .cid-mobile-bottom__link--accordion {
    cursor: default;
  }

  .cid-mobile-bottom__link-text--anchor {
    font-family:'Atkinson Hyperlegible' !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #424242;
    margin: 0 0 10px;
    padding: 0;
  }

  .cid-mobile-bottom__link-text--anchor:active {
    color: var(--cid-maroon, #590025);
    opacity: 1;
  }

  /* Accordion title stays purple while its panel is open. */
  .cid-mobile-bottom__item--accordion:has([data-cid-mobile-accordion-trigger][aria-expanded='true'])
    .cid-mobile-bottom__link-text--anchor {
    color: var(--cid-maroon, #590025);
  }

  .cid-mobile-bottom__caret svg {
    width: 12px;
    height: 12px;
    transform: rotate(180deg);
  }

  /* Arrow button — the ONLY element that opens/closes the accordion.
     Uses the same technique as the tasting-menu arrow: a single icon
     that smoothly rotates and re-tints via CSS (no JS image-swapping),
     so the color/rotate change animates instead of snapping instantly. */
  .cid-mobile-bottom__arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 8px;
    margin: -8px -8px -8px 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .cid-mobile-bottom__arrow {
    display: block;
    width: 11px;
    height: 11px;
    object-fit: contain;
    /* closed (default) state — light gray, same treatment as the
       tasting-menu arrow. Rotation is 0deg (not 180deg) here because
       this icon asset's native orientation is already the "closed"
       shape — the tasting-menu icon's native orientation is the
       opposite, which is why that one uses 180deg for closed. */
    filter: brightness(0) saturate(100%) invert(26%);
    transform: rotate(0deg);
    transition: filter 0.2s ease, transform 0.2s ease;
  }

  /* Open state — smoothly fades + rotates to the same burgundy used
     by the tasting-menu arrow (identical filter values), instead of
     an instant image swap. */
  .cid-mobile-bottom__arrow-btn[aria-expanded='true'] .cid-mobile-bottom__arrow {
    filter: brightness(0) saturate(100%) invert(9%) sepia(54%) saturate(3207%) hue-rotate(313deg) brightness(83%) contrast(102%);
    transform: rotate(180deg);
  }

  .cid-mobile-bottom__submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* Height is now driven by inline styles set from JS (see the
       accordion open/close functions above), which measure the
       panel's real scrollHeight and animate to/from that value. That
       keeps this transition matched to the actual content height
       instead of racing toward a fixed cap — the same timing/easing
       as the tasting-menu panel below, so both open/close with
       identical smoothness whichever one is triggered. */
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cid-mobile-bottom__submenu.is-open {
    opacity: 1;
  }

  .cid-mobile-bottom__sublink {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    padding: 9px 0;
    margin-left: 10px;
    font-size: 11px;
    color: #424242;
    text-transform: uppercase;
    font-family:'Atkinson Hyperlegible';
  }

  /* ============================================================
     EXISTING HEADER MENU STYLES — UNTOUCHED BELOW
  ============================================================ */
  .header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

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

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

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

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }
    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }
    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }
    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }
    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }
    & a {
      color: var(--color-foreground);
    }
  }

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

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);
    display: flex;
    height: 100%;
  }

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

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

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

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

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }
    &[data-safety-box='true']::after {
      display: block;
    }
    &:hover, &:focus {
      color: var(--menu-top-level-font-color);
    }

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

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }

  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }

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

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

  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

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

  .overflow-menu::part(list) {
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));
    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

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

  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);
    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0);
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic);
  }

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

  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;
    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);
    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

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

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

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }
    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }
    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }
    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

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

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

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

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

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

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

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

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

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

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

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

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

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;
    @media screen and (min-width: 990px) { grid-column: span 2; }
  }

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

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));
    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));
    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;
    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

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

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

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

  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);
    width: 200px;
  }

  .mega-menu__submenu {
    display: contents;
  }
/* END_BLOCK:_header-menu */
/* START_BLOCK:_product-details (INDEX:100) */
/* ── Mobile: clear padding ── */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
      padding-bottom:0px !important;
    }
  }

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

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

  /* ════════════════════════════════════════════════
     PRICE ROW: price + tax note side by side
     ════════════════════════════════════════════════ */

  .product-details product-price {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 8px !important;
  }
    @media screen and (min-width: 1700px) {
        .product-information__grid:not(.product-information--media-none).product-information--media-left .product-details {
            padding-left: 37px !important;
            padding-right: 106px !important;
        }
    }
  .product-details product-price [ref="priceContainer"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    gap: 8px !important;
  }

  .product-details product-price .price__regular,
  .product-details product-price .price__sale {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: 8px;
  }

  .product-details product-price .price__hidden {
    display: none !important;
  }

  .product-details product-price .price {
    white-space: nowrap;
    font-weight: 300;
    color:#000000;
  }


  /* Hide tax note and installments from price block entirely */
  .product-details product-price .tax-note,
  .product-details product-price .installments,
  .product-details product-price shopify-payment-terms {
    display: none !important;
  }

  /* ════════════════════════════════════════════════
     PRICE + ADD TO BAG: one row, price left, button right
     ════════════════════════════════════════════════ */

  /* Price block: cap width so button sits beside it */
  .product-details product-price {
    width: 50% !important;
    max-width: 220px !important;
  }

  /* Pull buy-buttons block up to sit on same line as price */
  .product-details .buy-buttons-block {
    margin-top: -58px !important;
    margin-left: 100% !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
  }

  /* ── ADD TO BAG button: big black pill, no icon ── */
  .product-details .buy-buttons-block button[type="submit"],
  .product-details .buy-buttons-block [ref="addToCartButton"] {
    background-color: #111111 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 3px 25px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    
    text-transform: uppercase !important;
    height: 45px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    width: 210px !important;
    /* min-width: 180px !important; */
    overflow: visible !important;
    top: -12px;
    font-family: 'Archivo Black';
  }

  .product-details .buy-buttons-block button[type="submit"]:hover {
    background-color: #333333 !important;
  }

  .product-details .buy-buttons-block button[type="submit"]:disabled {
    background-color: #888888 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
  }

  .product-details .buy-buttons-block button[type="submit"][data-added="true"] {
    width: auto !important;
    min-width: 180px !important;
    padding: 15px 36px !important;
    background-color: #111111 !important;
    color: #ffffff !important;
  }

  /* The button-alignment trick above pulls this whole block up with a
     fixed -58px margin, tuned for a button-only height. The "Missed it?"
     link (added by add-to-cart-button.liquid for sold-out variants) makes
     the block taller than that — without giving the space back here,
     whatever block comes after (the vote box) gets pulled up into
     overlap along with it. */
  .product-details .buy-buttons-block:has(.ens-missed-it-link) {
    padding-bottom: 28px;
  }

  /* Hide the old checkmark burst icon */
  .product-details .buy-buttons-block .add-to-cart__added,
  .product-details .buy-buttons-block .add-to-cart__added-icon {
    display: none !important;
  }

  /* Hide the cart SVG icon inside button */
  .product-details .buy-buttons-block .add-to-cart-icon,
  .product-details .buy-buttons-block .svg-wrapper.add-to-cart-icon {
    display: none !important;
  }

  /* Hide quantity stepper */
  .product-details .buy-buttons-block quantity-input,
  .product-details .buy-buttons-block .quantity-wrapper {
    display: none !important;
  }

  /* Hide accelerated checkout (Shop Pay etc) */
  .product-details .buy-buttons-block [id*="accelerated"],
  .product-details .buy-buttons-block shopify-accelerated-checkout,
  .product-details .buy-buttons-block .shopify-payment-button {
    display: none !important;
  }

  /* ── "X quantity added" confirmation below button ── */
  .product-details .buy-buttons-block .add-to-cart-confirmation {
    font-size: 11px !important;
    color: #590025 !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin-top: -6px !important;
  }
@media screen and (min-width: 1700px){
  .product-details .buy-buttons-block .add-to-cart-confirmation {
    font-size: 15px !important;
    color: #590025 !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin-top: -26px !important;
  }
}
  @keyframes atcFadeUp {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .product-details .buy-buttons-block .add-to-cart-confirmation[style*="block"] {
    animation: atcFadeUp 0.25s ease forwards;
  }

  /* ── Mobile adjustments ── */
  @media screen and (max-width: 749px) {
    .product-details product-price {
      width: auto !important;
      max-width: none !important;
    }
.ens-product-title {
    margin: 0;
    font-family: Cubao Wide !important;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: .06em !important;
    text-transform: none;
    width: 228px;
    font-size:2rem !important
}
.ens-collection-label{
  margin: 0 0 -5px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #590025;
    font-family: Atkinson Hyperlegible;
}
    .product-details .buy-buttons-block {
      margin-top: 0 !important;
      margin-left: 0 !important;
      width: 100% !important;
      align-items: stretch !important;
    }

    .product-details .buy-buttons-block button[type="submit"],
    .product-details .buy-buttons-block [ref="addToCartButton"] {
      width: 100% !important;
    }

    /* Sticky bar owns size + price + Add to Cart on mobile now — hide
       the in-page copy so it isn't duplicated. The real button stays
       queryable/clickable (just not visible), which is all the sticky
       bar's button needs to trigger a real add-to-cart. */
    .product-details product-price,
    .product-details .buy-buttons-block {
      display: none !important;
      position: static !important;
      top: auto !important;
    }

    /* GUARD: this block (and its sticky-desktop variant) must never
       pin itself to the top of the screen on mobile. Whatever toggles
       that state on add-to-cart, this forces it back to normal flow
       and kills any transition/animation on the change — that pin-in
       jump was the "add to bag transition" glitch. The bottom sticky
       bar is the only add-to-bag UI on mobile; nothing here should
       ever move. */
    .product-details,
    .product-details.sticky-content--desktop,
    .product-details.full-height--desktop {
      position: static !important;
      top: auto !important;
      bottom: auto !important;
      align-self: auto !important;
      transition: none !important;
      animation: none !important;
    }
  }
  @media screen and (min-width: 1700px){
  #shopify-section-template--22424561942753__main :is(.rte, #shopify-section-template--22424561942753__main .shopify-policy__title) :first-child:is(p, #shopify-section-template--22424561942753__main h1, #shopify-section-template--22424561942753__main h2, #shopify-section-template--22424561942753__main h3, #shopify-section-template--22424561942753__main h4, #shopify-section-template--22424561942753__main h5, #shopify-section-template--22424561942753__main h6), #shopify-section-template--22424561942753__main :is(.rte, #shopify-section-template--22424561942753__main .shopify-policy__title) :first-child:empty + :is(p, #shopify-section-template--22424561942753__main h1, #shopify-section-template--22424561942753__main h2, #shopify-section-template--22424561942753__main h3, #shopify-section-template--22424561942753__main h4, #shopify-section-template--22424561942753__main h5, #shopify-section-template--22424561942753__main h6){
font-size:16px !important;
line-height: 1.5rem;
}
.product-details>.group-block{
  padding-top:40px;
}

  .ens-product-title {
    margin: 0;
    font-family: Cubao Wide !important;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: .06em !important;
    text-transform: none;
    width: 438px;
    font-size:2.9rem !important
}}
/* END_BLOCK:_product-details */
/* START_BLOCK:_size-guide (INDEX:106) */
/* ─────────────────────────────────────────────────────────────────
ANTI-FLASH (desktop only, in practice): collapse the raw
<variant-picker> element before JS enhances it, so nothing flashes
Shopify's default pill buttons on refresh/late hydration. JS lifts
this by adding "ens-size-ready" once placement is settled. ── */
.shopify-section:has(.ens-size-row) variant-picker:not(.ens-size-ready) {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ─────────────────────────────────────────────────────────────────
MOBILE: the real, theme-owned <variant-picker> is left completely
alone architecturally and simply hidden here. It's still
fetched/morphed by the theme exactly as normal in the background —
we just never display it, since our own independent
.ens-mobile-size-bar (below) is what's shown instead. ── */
@media screen and (max-width: 749px) {
  .shopify-section:has(.ens-size-row) variant-picker {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
Our own mobile size bar. Pure static markup we fully own — never a
morph target, so nothing here needs a !important guarantee against
an external re-render. Visually matches the previous maroon
segmented-bar design. ── */
.ens-mobile-size-bar {
display: flex;
flex-wrap: nowrap;
width: 100%;
background: #590a2a;
}

.ens-mobile-size-option {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
margin: 0;
border: none;
border-right: 1px solid #eeeeee;
border-radius: 0;
background: transparent;
cursor: pointer;
position: relative;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}

.ens-mobile-size-option {
border-right: none;
}

.ens-mobile-size-option__text {
font-family: 'Atkinson Hyperlegible', sans-serif;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: lowercase;
color: #eeeeee;
font-weight: 400;
}

.ens-mobile-size-option.is-checked {
background: #8b8b8b;
}

.ens-mobile-size-option.is-checked .ens-mobile-size-option__text {
font-weight: 700;
}

.ens-mobile-size-option.is-unavailable .ens-mobile-size-option__text {
opacity: 0.6;
position: relative;
}

.ens-mobile-size-option.is-unavailable .ens-mobile-size-option__text::after {
content: '';
position: absolute;
left: -6px;
right: -6px;
top: 50%;
height: 1px;
background: #eeeeee;
pointer-events: none;
}

@keyframes ensMobileSizeShake {
10%, 90% { transform: translateX(-2px); }
20%, 80% { transform: translateX(3px); }
30%, 50%, 70% { transform: translateX(-5px); }
40%, 60% { transform: translateX(5px); }
}

.sticky-atc-size-slot--error .ens-mobile-size-bar {
animation: ensMobileSizeShake 0.5s;
outline: 2px solid #c94a1f;
outline-offset: -2px;
}

/* ── Trigger row ── */
.ens-size-row {
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1.5px solid rgb(var(--color-foreground-rgb) / 0.18);
width: 100%;
height:30px;
cursor: pointer;
}

/* Mobile: sticky bar is the only size picker — hide the in-page row */
@media screen and (max-width: 749px) {
.ens-size-row {
display: none !important;
}
}

.ens-size-row__label {
font-size: 15px;
letter-spacing: 0.06em;
color: rgb(var(--color-foreground-rgb) / 0.5);
white-space: nowrap;
font-family: var(--font-label, 'Archivo Narrow Regular'), sans-serif;
}

/* Make "select a size" feel clickable once wired up */
.ens-size-row__label[data-ens-size-trigger] {
cursor: pointer;
transition: color 0.2s;
}
.ens-size-row__label[data-ens-size-trigger] {
}

.ens-size-row__line {
flex: 1;
height: 1px;
background: transparent;
}

.ens-size-row__guide-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 15px;
letter-spacing: 0.06em;
color: rgb(var(--color-foreground-rgb) / 0.5);
font-family: var(--font-label, 'Archivo Narrow Regular'), sans-serif;
white-space: nowrap;
transition: color 0.2s;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}

.ens-size-row__guide-btn {

}

/* ───────────────────────────────────────────────────────────────
SIZE BAR — override the theme's pill buttons into a maroon bar
that collapses/expands. Only applies once JS adds .ens-size-enhanced.
(Desktop/tablet only — on mobile the picker lives in
.sticky-atc-size-slot instead, styled in product-information.liquid.)
─────────────────────────────────────────────────────────────── */

/* Hide the variant picker's own "Size" legend — the row above is the label */
variant-picker.ens-size-enhanced .variant-option--buttons legend {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}

/* The button group becomes a collapsible maroon bar that SLIDES
open and closed.
- .ens-size-enhanced (closed): height animated down to 0, faded out.
- .ens-size-open: height animated up to its content, faded in.
- .ens-size-collapsed: added by JS only AFTER the slide-up finishes —
takes the element out of the flex flow entirely so it can't consume
a gap slot in the parent group while it sits closed. JS removes it
right before opening so the slide-down animates from the flow.

 FLUSH FIT: `padding: 0 !important` kills the picker's own inline
 spacing-style padding, and the negative top margin cancels the parent
 flex group's gap (measured by JS into --ens-gap-pull), so the open bar
 sits directly against the "select a size" row with no space between. */

variant-picker.ens-size-enhanced {
position: relative;
width: 100%;
overflow: hidden;
max-height: 0;
opacity: 0;
pointer-events: none;
padding: 0 !important;
margin-top: calc(-1 * var(--ens-gap-pull, 0px)) !important;
transition:
max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.45s ease;
}

variant-picker.ens-size-enhanced.ens-size-open {
max-height: 200px;
opacity: 1;
pointer-events: auto;
}

variant-picker.ens-size-enhanced.ens-size-collapsed {
position: absolute !important;
margin-top: 0 !important;
}

variant-picker.ens-size-enhanced .variant-picker__form {
margin: 0 !important;
padding: 0 !important;
}

variant-picker.ens-size-enhanced .variant-option--buttons {
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: #590a2a;
}

/* Each option becomes an equal-width segment. Background is always the
bar's burgundy — hover/selected states below layer a grey background
ON TOP of individual segments; sold-out segments stay burgundy too and
are only marked by the strikethrough on their text. */
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label {
flex: 1 1 0 !important;
min-width: 0 !important;
min-height: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 5px 10px !important;
margin: 0 !important;
border: none !important;
border-right: 1px solid #eeeeee !important;
border-radius: 0 !important;
background: transparent !important;
color: #eeeeee !important;
overflow: visible !important;
position: relative !important;
transition: background-color 0.15s ease;
-webkit-tap-highlight-color: transparent !important;
}
@media screen and (min-width: 1700px){
.size-guide-dialog__note-heading{
font-size:15px !important;
}
.size-guide-dialog__note-content{
font-size: 15px !important;

}
.size-guide-dialog__note{
padding-top:40px !important ;
padding-bottom:40px !important;
}
.size-guide-dialog__note-content li {
padding-left: 12px;
position: relative;
line-height: 25px !important;

}
.size-guide-dialog__note-content ul {
max-width: 480px !important;
margin: 0;
padding: 0;
list-style: none;
}
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label {
flex: 1 1 0 !important;
min-width: 0 !important;
min-height: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 10px 10px !important;
margin: 0 !important;
border: none !important;
border-right: 1px solid #eeeeee !important;
border-radius: 0 !important;
background: transparent !important;
color: #eeeeee !important;
overflow: visible !important;
position: relative !important;
font-size: 17px;
}
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label__text {
font-size: 17px !important;
}
}
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label {
border-right: none !important;
}

/* Kill the theme's drawn pill outline + sliding pill + strikethrough svg */
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label::before {
display: none !important;
content: none !important;
}
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label__pill {
display: none !important;
}
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label svg {
display: none !important;
}

variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label__text {
font-family: var(--font-body, 'Atkinson Hyperlegible'), sans-serif;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: lowercase;
color: #eeeeee !important;
z-index: 1;
font-weight: 400;
position: relative;
display: inline-block;
}

/* Clickable invisible radio fills each segment — keeps the whole size
cell (not just the label text) tappable/selectable. */
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label input {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
margin: 0 !important;
cursor: pointer !important;
-webkit-appearance: none !important;
appearance: none !important;
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
}

/* Hover — grey background, text weight stays regular. Skipped on
sold-out segments since those aren't selectable. */
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label(input([data-option-available="false"])) {
background: var(--ensne-grey, #8b8b8b) !important;
}

/* Selected segment — grey background + bold text, same burgundy bar */
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label(input) {
background: var(--ensne-grey, #8b8b8b) !important;
}
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label(input) .variant-option__button-label__text {
font-weight: 700;
}

/* Out-of-stock segment — background stays burgundy like every other
segment (no grey fill). The strike is drawn as a small pseudo-element
sized to the word itself (via the text span's own box) plus a few
px of overhang on each side, so it reads as a deliberate strike
across "small" / "medium" / "large" rather than exactly clipping
the glyphs — but still stops well short of the full cell width. */
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label(input[data-option-available="false"]) .variant-option__button-label__text {
opacity: 0.6;
}
variant-picker.ens-size-enhanced .variant-option--buttons .variant-option__button-label(input[data-option-available="false"]) .variant-option__button-label__text::after {
content: '';
position: absolute;
left: -8px;
right: -8px;
top: 50%;
height: 1px;
background: #eeeeee;
pointer-events: none;
}

/* ── NEW: Add to Bag button while the variant-picker's own fetch+morph
is still settling after a size change (see markFormUpdating() in the
script above). Purely visual — the JS click-gate is what actually
defers the add; this just stops the button from looking fully
"ready" during that short window. ── */
product-form-component.ens-add-updating [ref="addToCartButton"],
product-form-component.ens-add-updating button[type="submit"] {
opacity: 0.55 !important;
transition: opacity 0.15s ease !important;
}

/* "Please select a size" error + checkout gate */
.ens-size-error {
display: block;
margin-top: 5px;
font-family: var(--font-menu, 'Atkinson Hyperlegible'), sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: #590a2a;
}
.ens-size-error[hidden] { display: none; }

product-form-component.ens-needs-selection .shopify-payment-button,
product-form-component.ens-needs-selection .additional-checkout-buttons {
display: none !important;
}

/* ── Dialog: slides in from right ── */
.size-guide-dialog {
position: fixed;
inset: 0 0 0 auto;
margin: 0;
padding: 0;
width: 35%;
height: 100dvh;
max-height: 100dvh;
border: none;
background: #eeeeee;
box-shadow: -4px 0 40px rgba(0,0,0,0.14);
overflow-y: auto;
transform: translateX(100%);
transition:
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
overlay 0.35s allow-discrete,
display 0.35s allow-discrete;
}

.size-guide-dialog[open] {
transform: translateX(0);
}

@starting-style {
.size-guide-dialog[open] { transform: translateX(100%); }
}

.size-guide-dialog::backdrop {
background: rgba(0,0,0,0.45);
opacity: 0;
transition:
opacity 0.35s ease,
overlay 0.35s allow-discrete,
display 0.35s allow-discrete;
}

.size-guide-dialog[open]::backdrop { opacity: 1; }

@starting-style {
.size-guide-dialog[open]::backdrop { opacity: 0; }
}

/* ── Inner wrapper ── */
.size-guide-dialog__inner {
display: flex;
flex-direction: column;
min-height: 100%;
position: relative;
}

/* ── Close button — large X, top right, absolute ──
iOS FIX: iOS Safari draws its own default button chrome/border and a
tap-highlight rectangle around <button> elements unless it is
explicitly reset. -webkit-appearance/appearance, border, outline
(including // states) and
-webkit-tap-highlight-color are all reset below so the ✕ never shows
a border/box on iOS while tapping. ── */
.size-guide-dialog__close {
position: absolute;
top: 24px;
right: 24px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #111;
opacity: 0.75;
transition: opacity 0.2s;
border-radius: 4px;
z-index: 1;
width: 40px;
height: 40px;
-webkit-appearance: none;
appearance: none;
outline: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}

.size-guide-dialog__close,
.size-guide-dialog__close,
.size-guide-dialog__close {
outline: none !important;
border: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
}

.size-guide-dialog__close svg {
width: 22px;
height: 22px;
-webkit-tap-highlight-color: transparent;
}

.size-guide-dialog__close { opacity: 1; }

/* ── Header block: SIZE GUIDE + unit note ── */
.size-guide-dialog__header {
padding: 100px 60px 8px 60px;
display: flex;
flex-direction: column;
}

.size-guide-dialog__label {
margin: 0;
font-family: 'Atkinson Hyperlegible';
font-size: 17px;
font-weight: bold;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #111;
line-height: 1.2;
margin-bottom: 5px;
}
@media screen and (max-width: 750px){
.size-guide-dialog__label {
margin: 0;
font-family: 'Archivo Black';
font-size: 12px !important;
font-weight: 400;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #111;
line-height: 1.2;
margin-bottom: 5px;
}
.size-guide-dialog__unit-note{
font-size: 10px !important;
}
.size-guide-imggrid__cell--head {
font-size: 10px !important;}
.size-guide-imggrid__cell{
font-size: 10px !important;
}
.size-guide-dialog__table-wrapper {
padding: 50px 30px 40px 10px !important;
flex: 1;
}
.size-guide-dialog__note-content {
font-size: 10px !important;
}
}
@media screen and (min-width: 1700px){
.size-guide-dialog__label {
margin: 0;
font-family: var(--font-heading, 'Archivo Black'), sans-serif;
font-size: 23px;
font-weight: 400;
letter-spacing: 0.10em;
text-transform: uppercase;
color: #111;
line-height: 1.2;
margin-bottom: 5px;
}
.size-guide-dialog__unit-note {
font-size: 16px;}
}
.size-guide-dialog__unit-note {
margin: 0;
font-family: 'Atkinson Hyperlegible';
font-size: 13px;
font-weight: 400;
color: rgba(0,0,0,0.45);
line-height: 1.4;
}

/* ── Measurement diagram (line image) + detail ── */
.size-guide-dialog__diagram {
padding: 0 40px 10px 40px;
display: flex;
flex-direction: column;
gap: 18px;
}

.size-guide-dialog__diagram-media {
width: 100%;
}

.size-guide-dialog__diagram-media img {
display: block;
width: 100%;
height: auto;
max-width: 460px;
}

.size-guide-dialog__diagram-heading {
margin: 0 0 6px;
font-family: var(--font-menu, 'Atkinson Hyperlegible'), sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #111;
}

.size-guide-dialog__diagram-text {
font-family: var(--font-body, 'Atkinson Hyperlegible'), sans-serif;
font-size: 13px;
line-height: 1.7;
letter-spacing: 0.04em;
color: rgba(0,0,0,0.6);
}

.size-guide-dialog__diagram-text ul {
margin: 0;
padding: 0;
list-style: none;
}

.size-guide-dialog__diagram-text li {
padding-left: 14px;
position: relative;
}

.size-guide-dialog__diagram-text li::before {
content: '•';
position: absolute;
left: 0;
color: rgba(0,0,0,0.4);
}

/* ── Size chart laid inside the line image ── */
.size-guide-imggrid {
width: 100%;
display: grid;
grid-template-columns: 17.9% 27.7% 28.7% 25.7%;
grid-template-rows: 17.7% 23% 23% 23% 13.3%;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
}
.size-guide-imggrid--5 {
  grid-template-rows:
    15.23%
    14.77%
    15.08%
    14.62%
    14.92%
    14.92%;
}


.size-guide-imggrid__cell {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-body, 'Atkinson Hyperlegible'), sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.06em;
color: #111;
padding: 4px;
}

.size-guide-imggrid__cell--head {
align-items: flex-end;
padding-bottom: 14px;
font-family: var(--font-menu, 'Atkinson Hyperlegible'), sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
@media screen and (min-width: 1500px){
.size-guide-imggrid__cell--head{
align-items: flex-end;
padding-bottom: 14px;
font-family: var(--font-menu, 'Atkinson Hyperlegible'), sans-serif;
font-size: 15px;
font-weight: 700 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.size-guide-imggrid__cell {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--font-body, 'Atkinson Hyperlegible'), sans-serif;
font-size: 15px !important;
font-weight: 400;
letter-spacing: 0.06em;
color: #111;
padding: 4px;
}
.size-guide-dialog__table-wrapper {
padding: 50px 60px 40px 60px !important;
flex: 1;
}
}
/* ── Table wrapper ── */
.size-guide-dialog__table-wrapper {
padding: 30px 40px 40px 40px;
flex: 1;
}

/* ── Table ── */
.size-guide-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body, 'Atkinson Hyperlegible'), sans-serif;
font-size: 15px;
}

.size-guide-table thead tr {
border-bottom: 2px solid rgba(0,0,0,0.2);
}

.size-guide-table th {
text-align: center;
padding: 0 20px 18px;
font-family: var(--font-menu, 'Atkinson Hyperlegible'), sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: black;
border-right: 2px solid rgba(0,0,0,0.2);
}

.size-guide-table th { border-right: none; }

.size-guide-table th {
text-align: center;
padding-left: 0;
}

.size-guide-table tbody tr {
border-bottom: 2px solid rgba(0,0,0,0.2);
}

.size-guide-table tbody tr {
border-bottom: 2px solid rgba(0,0,0,0.2);
}

.size-guide-table td {
text-align: center;
padding: 22px 20px;
font-size: 15px;
font-weight: 400;
color: #111;
border-right: 2px solid rgba(0,0,0,0.2);
}

.size-guide-table td { border-right: none; }

.size-guide-table td {
text-align: center;
padding-left: 0;
font-weight: 400;
letter-spacing: 0.06em;
font-size: 15px;
}

/* ── Note section — sticky bottom ── */
.size-guide-dialog__note {
margin-top: auto;
padding: 28px 60px 32px;
position: sticky;
bottom: 0;
}

.size-guide-dialog__note-heading {
font-family: var(--font-menu, 'Atkinson Hyperlegible'), sans-serif;
margin: 0 0 5px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #929292
}

.size-guide-dialog__note-content {
font-family: var(--font-body, 'Atkinson Hyperlegible'), sans-serif;
font-size: 12px;
line-height: 1.75;
letter-spacing: 0.08em;
color: #929292;
}

.size-guide-dialog__note-content ul {
max-width: 390px;
margin: 0;
padding: 0;
list-style: none;
}

.size-guide-dialog__note-content li {
padding-left: 12px;
position: relative;
line-height: 15px;
}

.size-guide-dialog__note-content li::before {
content: '•';
position: absolute;
left: 0;
color: #929292;
}

/* ── Mobile ── */
@media screen and (max-width: 749px) {
.size-guide-dialog { width: 100vw; }
.size-guide-dialog__header,
.size-guide-dialog__diagram,
.size-guide-dialog__table-wrapper,
.size-guide-dialog__note {
padding-left: 20px;
padding-right: 20px;
}
.size-guide-dialog__header {
padding-top: 76px;
}
}
@media screen and (min-width: 1700px){
.ens-size-row__label {
font-size: 18px;}
.ens-size-row__guide-btn{
font-size: 18px;
}

}
/* Hide first fieldset ONLY on products that have multiple variant option rows */
variant-picker.ens-size-enhanced
.variant-picker__form:has(fieldset.variant-option--buttons:nth-of-type(2))
fieldset.variant-option--buttons:first-of-type {
  display: none !important;
}
/* END_BLOCK:_size-guide */
/* START_BLOCK:accordion (INDEX:110) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: 1px solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  /* Sits on the <details> wrapper (summary + content) so it always
     falls below whatever is currently visible: right under the
     heading when closed, and below the description once opened. */
  .accordion .details {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.18);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: 'archivo black';
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
    letter-spacing: 0.35rem;
    /* Kill the default blue/grey tap-highlight flash on mobile —
       it was showing up as an extra "glitch" layered on top of the
       accordion's own open/close animation. */
    -webkit-tap-highlight-color: transparent;
  }
  @media screen and (min-width: 1700px){
     .accordion .details__header {
    font-family: 'archivo black';
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: 16px;
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }}
  @media screen and (max-width: 749px) {
    .accordion {
    overflow-x: hidden;
  }
    .accordion .details__header {
    font-family: 'archivo black';
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: 13px !important;
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
    letter-spacing: 0.2rem;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
  }
  }
  summary {
  display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding-block: 18px;
  }}
/* END_BLOCK:accordion */
/* START_BLOCK:logo (INDEX:131) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: 300px !important;
      padding-bottom:10px;
    }
     
  }
  @media screen and (max-width: 749px) {
  .logo-block__image-wrapper {
    display: flex;
    width: 200px !important;
    max-width: 100%;
    max-height: 100%;
  }
}
@media screen and (min-width: 1700px){
  .logo-block {
    width:700px;}
}

  .logo-block__link {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    color: inherit;
    text-decoration: none;
    justify-content: center;
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 500px;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */
/* START_BLOCK:menu (INDEX:132) */
.menu {
    width: 100%;
  }

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

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

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

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  .menu__heading__link {
    text-decoration: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }
.menu__heading__link {
    text-decoration: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    font-size: 15px;
}
    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

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

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

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

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

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }

    /* ── Mobile-only center alignment ── */
    .menu {
      text-align: center;
    }

    .menu .menu__heading {
      justify-content: center;
    }

    .menu .menu__heading__accordion {
      justify-content: center;
    }

    .menu .details-content {
      display: flex;
      justify-content: center;
    }

    .menu .list-unstyled {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .menu__item {
      text-align: center;
    }
  }
/* END_BLOCK:menu */
/* START_BLOCK:price (INDEX:138) */
/* Make the product-price element itself inline so it sits next to the button */
  .price-with-note {
    display: inline-flex !important;
    align-items: center;
    flex: 1 1 auto;
  }

  /* Price + note on same row */
  .price-with-note .price-note-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
  }

  .price-note-row__price {
    flex-shrink: 0;
  }

  /* Match price font size to h4 preset */
  .price-with-note .price {
    font-size: 28px;
    font-weight: var(--font-weight-semibold, 600);
    white-space: nowrap;
    letter-spacing: 0;
  }

  .price-note-row__note {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    max-width: 50%;
    flex-shrink: 0;
    padding-top: 1px;
    height: 40px;
}

  .price-note-row__slash {
    font-size: 15px;
    color: rgb(var(--color-foreground-rgb) / 0.45);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
    font-weight: 400;
  }

  .price-note-row__text {
    font-size: 12px;
    color: rgb(var(--color-foreground-rgb) / 0.45);
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
    font-weight: 400;
    letter-spacing: 0;
    font-family: 'Atkinson Hyperlegible' !important;
  }
  @media screen and (min-width: 1700px){
    .price-note-row__note {
    gap: 18px;
    max-width: 75%;
}
.price-with-note .price {
    font-size: 2.2rem;
}
.price-note-row__text{
  font-size:17px;
}
.product-details .buy-buttons-block button[type=submit], .product-details .buy-buttons-block [ref=addToCartButton]{
  background-color: #111 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 3px 40px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    height: 55px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background .2s ease !important;
    width: 240px !important;
    overflow: visible !important;
    top: -20px;
    font-family: Archivo Black;
}
  }
/* END_BLOCK:price */
/* START_SNIPPET:accordion-custom-component (INDEX:154) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

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

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

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

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

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

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

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */
/* START_SNIPPET:add-to-cart-button (INDEX:155) */
/* ── ADD TO BAG button: clean pill, no icon ── */
  .buy-buttons-block add-to-cart-component .button,
  add-to-cart-component [ref="addToCartButton"] {
    /* Remove the checkmark burst states entirely */
    overflow: visible !important;
  }

  /* Hide the old checkmark burst icon if it somehow persists */
  add-to-cart-component .add-to-cart__added {
    display: none !important;
  }

  /* Remove data-added animation state — we don't want button to collapse */
  add-to-cart-component [ref="addToCartButton"][data-added="true"] {
    /* Override any theme animation that collapses the button */
    width: auto !important;
    min-width: inherit !important;
    padding: inherit !important;
    background-color: #111111 !important;
    color: #ffffff !important;
  }

  /* Quantity confirmation text below button */
  .add-to-cart-confirmation {
    font-size: 11px;
    color: #c94a1f;
    text-align: center;
    white-space: nowrap;
    margin-top: 6px;
    animation: atcFadeUp 0.25s ease forwards;
  }

  @keyframes atcFadeUp {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* "Missed it? Help us bring it back." link, shown below a sold-out button */
  .ens-missed-it-link {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #590025;
    text-decoration: underline;
  }
/* END_SNIPPET:add-to-cart-button */
/* START_SNIPPET:background-media (INDEX:156) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:buy-buttons-styles (INDEX:161) */
.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:163) */
.cart-bubble {
    /* Desktop / default size. Mobile overrides this below so the
       bubble renders identically everywhere the snippet is used —
       header (any layout), cart drawer, search page, etc. — instead
       of only matching the header's custom-icon mobile layout. */
    --cart-bubble-size: 20px;

    position: relative;
    width: var(--cart-bubble-size);
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    color: var(--color-primary-button-text);
  }

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

  /* ══════════════════════════════════════════
     FIX — number was drifting off-center (biased
     right within the circle).
     ------------------------------------------------------------
     Root cause: .cart-bubble used a horizontal-only
     `padding-inline` on a flex container that also had
     `aspect-ratio: 1` and default `box-sizing: content-box`.
     .cart-bubble__text was a normal in-flow flex child inside
     that padded box, so it centered itself relative to a content
     box whose effective size/offset didn't actually line up with
     the visible circle (.cart-bubble__background, which is
     absolutely positioned and always fills the full box).
     Padding is asymmetric in axis (inline only, no block padding),
     so the "content box" the text centered in wasn't the same box
     as the circle it sits on top of.

     Fix: pin .cart-bubble__text to the exact same box as the
     circle — position:absolute + inset:0 on the same positioned
     ancestor (.cart-bubble) — then flex-center inside THAT. This
     guarantees the digit is centered on the visible circle itself,
     independent of padding, aspect-ratio, or box-sizing math.
     padding-inline has been removed from .cart-bubble since the
     text layer no longer depends on it for inset spacing.
  ══════════════════════════════════════════ */
  .cart-bubble__text {
    position: absolute;
    inset: 0;
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-bubble__text-count {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════
     MOBILE — matches the compact badge treatment
     previously scoped only to the header's custom-icon
     layout (#header-component:has(.custom-icon-menu-wrap)).
     Now applied globally to every .cart-bubble instance on
     mobile, so the header (any variant), cart drawer, and
     search page all show the exact same size/position.

     NOTE: position:absolute here positions the bubble against
     the nearest `position: relative` ancestor — typically the
     icon wrapper (e.g. .header-actions__cart-icon). Make sure
     wherever you render this snippet, that wrapper also has
     position: relative on mobile.
  ══════════════════════════════════════════ */
  @media screen and (max-width: 749px) {
    .cart-bubble {
      --cart-bubble-size: 14px;
      position: absolute;
      top: 3px;
      right: -7px;
      transform: none;
    }

    .cart-bubble__text {
      font-size: 7px;
    }

    .cart-bubble:has(.cart-bubble__text-count:empty) {
      display: none;
    }
  }
/* END_SNIPPET:cart-bubble */
/* START_SNIPPET:cart-items-component (INDEX:164) */
.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:group (INDEX:181) */
.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:182) */
.ens-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: var(--cart-drawer-padding);
    padding-bottom: 10px !important;
    border-bottom: none !important;
    background-color: var(--color-background) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
  }

  @media screen and (min-width: 750px) {
    .ens-drawer-header {
      padding-inline: var(--cart-drawer-padding-desktop) !important;
      padding-bottom: 0px !important;
    }
  }

  .ens-drawer-title-block {
    margin-top: 30px;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
  }
@media screen and (min-width: 1700px){
  .ens-drawer-title-block {
    margin-top: 50px;
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
  }
  .ens-drawer-header{
    margin-left:20px
  }
}
  .ens-drawer-bag-text {
    font-family: 'Archivo Black', 'Arial Black', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #111 !important;
    line-height: 1.2 !important;
  }

  .ens-drawer-count {
    font-family: 'Atkinson Hyperlegible' !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    color: #5c1a2e !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: baseline !important;
  }

  .ens-drawer-count-num {
    color: #5c1a2e !important;
    font-weight: 400 !important;
    font-size: 13px !important;
  }

  .ens-drawer-divider {
    display: block !important;
    width: auto !important;
    height: 1px !important;
    background-color: rgba(0, 0, 0, 0.10) !important;
    flex-shrink: 0 !important;
    margin-block: 0 !important;
    margin-inline: var(--cart-drawer-padding) !important;
    padding: 0 !important;
    border: none !important;
  }

  @media screen and (min-width: 750px) {
    .ens-drawer-divider {
      margin-inline: var(--cart-drawer-padding-desktop) !important;
    }
  }

  .ens-drawer-tagline-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    padding: 6px var(--cart-drawer-padding) 0 var(--cart-drawer-padding) !important;
    margin: 0 !important;
    background: transparent !important;
  }

  @media screen and (min-width: 750px) {
    .ens-drawer-tagline-row {
      padding-inline: var(--cart-drawer-padding-desktop) !important;
    }
  }

  .ens-drawer-tagline {
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #5c1a2e !important;
    white-space: nowrap !important;
    letter-spacing: 0em !important;
  }

  .cart-drawer__dialog:not(.cart-drawer--empty) .cart-drawer__heading,
  .cart-drawer__dialog:not(.cart-drawer--empty) h2.cart-drawer__heading {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .ens-drawer-header .cart-bubble,
  .ens-drawer-header .cart-count {
    display: none !important;
  }

  .ens-close-btn {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    top: -15px !important;
    color: #424242;

    -webkit-appearance: none !important;
    appearance: none !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  .ens-close-btn:focus,
  .ens-close-btn:focus-visible,
  .ens-close-btn:active,
  .ens-close-btn:hover {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .ens-close-btn .svg-wrapper {
    pointer-events: none !important;
    background: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  a.account-button {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-account-icon, var(--color-foreground));
    transition:
      color 0.4s ease,
      opacity 0.2s ease;
  }

  a.account-button:hover {
    opacity: 0.7;
  }

  .cart-drawer__dialog {
   transition:
     transform 0s cubic-bezier(0.16, 1, 0.3, 1) !important,
     opacity 0s ease !important;
}

  cart-icon.header-actions__cart-icon--text {
    --cart-bubble-size: 14px;

    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  button:has(> cart-icon.header-actions__cart-icon--text),
  .header-actions__action:has(cart-icon.header-actions__cart-icon--text) {
    overflow: visible !important;
  }

  cart-icon.header-actions__cart-icon--text .cart-bubble {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    width: var(--cart-bubble-size, 14px) !important;
    height: var(--cart-bubble-size, 14px) !important;
    min-width: var(--cart-bubble-size, 14px) !important;
    aspect-ratio: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  cart-icon.header-actions__cart-icon--text .cart-bubble .cart-bubble__background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
  }

  cart-icon.header-actions__cart-icon--text .cart-bubble__text {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: 9px !important;
    transform: none !important;
    padding-left:1px !important;
    padding-top:1px;
  }

  .custom-bag-icon-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .custom-bag-icon-img {
    width: var(--custom-bag-icon-size, 22px);
    height: var(--custom-bag-icon-size, 22px);
    object-fit: contain;
    display: block;
  }

  .ens-mobile-bag-icon .custom-bag-icon-img {
    width: var(--ens-mobile-bag-icon-size, 22px);
    height: var(--ens-mobile-bag-icon-size, 22px);
  }

  .ens-mobile-bag-icon {
    display: flex !important;
  }

  @media screen and (min-width: 750px) {
    .ens-mobile-bag-icon {
      display: none !important;
    }
  }

  .ens-desktop-bag-icon {
    display: none !important;
  }

  @media screen and (min-width: 750px) {
    .ens-desktop-bag-icon {
      display: flex !important;
    }

    .ens-desktop-bag-icon--force-hidden {
      display: none !important;
    }
  }

  .ens-bag-text {
    display: none !important;
  }

  @media screen and (min-width: 750px) {
    .ens-bag-text {
      display: inline !important;
    }

    .ens-bag-text--force-hidden {
      display: none !important;
    }
  }

  .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 {
    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;
      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: 28%;
      max-width: 95vw;
    }
  }

  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
    width: 28%;
  }
  @media screen and (max-width: 749px){
    .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
    width: 90%;
  }
  }

  @media screen and (min-width: 1500px) {
    .cart-drawer__dialog:modal {
      max-height: 100dvh;
      overflow-y: hidden;
      width: 28%;
    }
  }

  .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);
      width: 15px;
      height: 15px;
    }
  }

  .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);
    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: stretch;
    justify-content: flex-start;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: space-between;
    border-bottom: none;
    padding-bottom: 10px;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

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

  .cart-drawer__content--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    padding: 0 var(--cart-drawer-padding) 32px;
    text-align: center;
    padding-bottom:40px;
  }

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

  .ens-empty-cart-illustration-link {
    display: block;
    width: 92%;
    max-width: 480px;
    margin: 0 auto;
  }

  @media screen and (min-width: 1700px) {
    .ens-empty-cart-illustration-link {
      max-width: 560px;
    }
  }

  .ens-empty-cart-illustration {
    width: 100%;
    height: auto;
    display: block;
  }

  .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: none;
    position: sticky;
    top: 0;
    z-index: 1;

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

  header-actions {
    display: flex;

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

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: 3.5rem;
    }

    .header-actions__text-style {
      font-size: 12px !important;
      font-family: 'Atkinson Hyperlegible';
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
      letter-spacing: 2px;
      margin-top:-5px
    }
  }
@media screen and (min-width: 1700px){
      .header-actions__text-style{
       font-size:19px !important;
       letter-spacing: 0.2rem;
      }
      .ens-drawer-count-num {
    color: #5c1a2e !important;
    font-weight: 400 !important;
    font-size: 19px !important;
}
      .header-actions--text{
    gap: 5.5rem;
  }
      .ens-drawer-count{
        font-size:19px !important;
      }
      .ens-drawer-bag-text{
         font-size:20px !important;
      }
      .ens-drawer-tagline{
        font-size:15px !important;
      }
        .cart-drawer__items {
margin-left:20px;}

      cart-icon.header-actions__cart-icon--text {
        --cart-bubble-size: 22px !important;
        gap: 9px !important;
      }
      cart-icon.header-actions__cart-icon--text .cart-bubble {
        width: var(--cart-bubble-size, 22px) !important;
        height: var(--cart-bubble-size, 22px) !important;
        min-width: var(--cart-bubble-size, 22px) !important;
        padding: 3px !important;
      }
      cart-icon.header-actions__cart-icon--text .cart-bubble__text {
        font-size: 13px !important;
      }

  }
  #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);
    height: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-actions__cart-icon .cart-bubble__text {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
  }

  .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 {
    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;
    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 {
    display: none !important;
  }

  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;
    }
  }
  @media screen and (max-width: 750px) {
  .ens-drawer-tagline-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    padding: 6px var(--cart-drawer-padding) 0 var(--cart-drawer-padding) !important;
    margin: 0 !important;
    background: transparent !important;
    padding-right:20px !important;
  }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:183) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

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

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

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

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

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

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

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

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

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

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

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

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

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

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

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

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

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

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

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */
/* START_SNIPPET:predictive-search-styles (INDEX:204) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

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

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

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

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

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

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

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

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

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

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

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

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

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

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

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

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

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:product-information-content (INDEX:210) */
.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: 50px;
         padding-left:100px;
        }

        .product-details {
          padding-left: 30px;
          padding-right: 70px;
        }
@media screen and (min-width: 1700px){
  .product-details {
          padding-left: 20px;
          padding-right: 100px;
        }
        .product-information__media {
          padding-right: 47px;
         padding-left:115px;
        }
}
        &: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:211) */
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:212) */
.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 {
      /* Allow horizontal swipe/scroll between zoomed images. Only the
         page/dialog's own scroll chaining is contained (so a swipe
         doesn't bubble into a background scroll) - the axis the user
         is actually dragging along stays fully scrollable natively,
         which is what makes swipe-to-change-image work here. */
      overscroll-behavior: contain;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      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;
        }
      }
    }
  }

  /* ── Zoom dialog top bar: centered logo + small close (X) button ──
     Matches the rickowens.eu reference: a thin, small close icon in
     the top-right corner, and the brand wordmark centered above the
     product image. Both are pinned via position: fixed to the
     viewport so they stay put regardless of scroll/gallery content. */

  .dialog-zoomed-gallery__logo {
    position: fixed;
    top: var(--padding-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--layer-raised);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Auto-invert against whatever is behind it: mix-blend-mode: difference
     inverts the logo's pixels against the backdrop, so a dark logo mark
     reads dark on a light background and automatically flips to read
     light on a dark background — no separate "inverse logo" asset or
     light/dark theme setting needed. Same trick already used on the
     close button below. (No isolation property here on purpose — that
     would scope the blend to just this element's own subtree, cutting
     it off from the actual photo behind it and leaving it permanently
     flat white instead of adapting.) */
  .dialog-zoomed-gallery__logo-image,
  .dialog-zoomed-gallery__logo-text {
    mix-blend-mode: difference;
  }

  .dialog-zoomed-gallery__logo-image {
    display: block;
    height: auto;
    max-height: 22px;
    width: auto;
    /* Turn the uploaded logo (whatever its original color) into a
       solid white silhouette: brightness(0) crushes every opaque
       pixel to black regardless of source color, invert(1) then
       flips that black shape to pure white. mix-blend-mode: difference
       (set above) needs a pure-white source to invert correctly —
       same requirement the close button's white SVG already satisfies. */
    filter: brightness(0) invert(1);
  }

  .dialog-zoomed-gallery__logo-text {
    font-family: var(--font-heading, serif);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #fff;
    white-space: nowrap;
  }

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

    /* Shrink from the theme's default close-button size down to a
       small, thin icon in the corner (reference target: ~16px glyph
       inside a ~32px tap target, ~24px inset from the edges). */
    position: fixed;
    top: var(--padding-lg);
    right: var(--padding-lg);
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Strip the theme's default circular pill (background fill +
       border) that .close-button normally draws behind the icon —
       we only want the bare X glyph, no circle around it. */
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .dialog-zoomed-gallery__close-button svg {
    width: 16px;
    height: 16px;
  }

  .dialog-zoomed-gallery__close-button:hover,
  .dialog-zoomed-gallery__close-button:focus-visible {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

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

    /* Keep the logo/close bar comfortably inside the notch/status-bar
       area on small screens. */
    .dialog-zoomed-gallery__logo {
      top: var(--padding-md);
    }

    .dialog-zoomed-gallery__close-button {
      top: 8.5px;
      right: var(--padding-md);
    }
  }

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

  /* ── Fit-to-screen sizing for the zoomed image ──
     Instead of the image always filling 100% of the dialog's width/
     height (edge-to-edge), constrain it to a responsive box that
     scales down at every viewport size — leaving consistent breathing
     room around the garment, top/bottom and side to side, the way the
     rickowens.eu reference does. clamp() interpolates the cap smoothly
     between small and large viewports rather than jumping at fixed
     breakpoints. Reserves space at the top (logo/close bar) and
     bottom (thumbnail rail) via the vh subtraction. */
  @media screen and (min-width: 750px) {
    /* Force a true full-viewport box for the dialog on desktop. Without
       an explicit height here, "height: 100%" on the <ul> and its <li>
       slides below has nothing definite to resolve against, so each
       slide silently collapses to just its image's own height instead
       of a full screen — what looked like a stray gap under the image
       was actually the START of the next slide bleeding through, not
       padding. */
    .dialog-zoomed-gallery__dialog {
      width: 100vw;
      height: 100dvh;
      max-width: 100vw;
      max-height: 100dvh;
      margin: 0;
      overflow: hidden;
    }

    /* One image per screen, rest on scroll ── the <ul> itself becomes
       the scrollable, vertically snapping viewport: each <li> (one per
       media item) is locked to exactly the dialog's full height via
       scroll-snap-align, so only one image is ever fully in view at a
       time. */
    .dialog-zoomed-gallery {
      display: block;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
    }

    .dialog-zoomed-gallery::-webkit-scrollbar {
      display: none;
      width: 0;
    }

    .dialog-zoomed-gallery .product-media-container {
      height: 100% !important;
      min-height: 100% !important;
      max-height: 100% !important;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--image {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: 100% !important;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      /* Fixed frame — identical for every slide, regardless of that
         image's own aspect ratio. (Previously this took --ratio from
         each media item, so a portrait shot and a landscape shot ended
         up in differently-shaped, differently-sized boxes.) The image
         itself still keeps its own proportions inside this box via
         object-fit: contain below — nothing gets stretched. */
      width: clamp(480px, 82vw, 1160px);
        height: calc(100dvh - 10px);
        max-width: 92vw;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media__image {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      position: static;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery .product-media-container--image .product-media {
      display: flex;
      align-items: center;
      justify-content: center;
      /* Full-bleed: no reserved top/bottom space. The logo, close
         button, and thumbnail rail are all position: fixed above the
         gallery in the stacking order, so they float on top of the
         photo instead of needing room carved out beneath them. */
      padding-block: 0;
      box-sizing: border-box;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media__image {
      /* Fill the screen completely, edge to edge. object-fit: cover
         crops whatever overflows instead of letterboxing, so there's
         no white space left/right or top/bottom no matter the photo's
         own aspect ratio. */
      width: 100% !important;
      height: 100% !important;
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }
  }

  .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:213) */
.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:quick-add-modal-styles (INDEX:215) */
#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:219) */
.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:224) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    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: #00000073;
    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:search (INDEX:225) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);
    display: flex;
    align-items: center;
  }

  /* Custom search icon image — replaces icon-search.svg. Sized to fill
     whatever box the .svg-wrapper around it already occupies (that sizing
     comes from the shared header-actions__action / mobile CSS elsewhere),
     so it drops into the same slot the SVG used to. */
  .search-action .search-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  @media screen and (max-width: 749px) {
    .search-action .search-icon-img {
      width: 16px;
      height: 16px;
    }
  }

  /* ══════════════════════════════════════════
     TRIGGER ICON SWAP — search glyph <-> cross
     The cross is hidden by default everywhere
     (desktop + mobile). It's only ever revealed
     when the trigger carries .is-search-open,
     which JS only ever adds on mobile (desktop
     uses the inline expanding bar instead, and
     hides the trigger completely while open via
     .ens-search-trigger--hidden further below).
  ══════════════════════════════════════════ */
  .ens-search-trigger__close {
    display: none;
  }

  .ens-search-trigger.is-search-open .ens-search-trigger__close {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ens-search-trigger.is-search-open .ens-search-trigger__close svg,
  .ens-search-trigger.is-search-open .ens-search-trigger__close .svg-wrapper {
    width: 16px;
    height: 16px;
  }

  .ens-search-trigger.is-search-open .ens-search-trigger__icon,
  .ens-search-trigger.is-search-open .ens-search-trigger__label {
    display: none;
  }

  /* ══════════════════════════════════════════
     ENS: INLINE HEADER SEARCH BAR — DESKTOP, UNCHANGED
  ══════════════════════════════════════════ */

  .ens-search-trigger--hidden {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
  }

  .ens-inline-search {
    display: none;
    align-items: center;
    background: Transparent;
    border-bottom: 1px solid Black;
    border-radius: 0px;
    padding: 0 10px;
    height: 38px;
    width: 220px;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
  }

  .ens-inline-search.is-open {
    display: flex;
  }

  .ens-inline-search__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: rgb(0 0 0 / 0.35);
    margin-right: 8px;
    display: none;
  }

  .ens-inline-search__icon svg,
  .ens-inline-search__icon .search-icon-img {
    width: 14px;
    height: 14px;
  }

  .ens-inline-search__input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 13px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    color: #00000073 !important;
    min-width: 0;
    height: 100%;
    line-height: 38px;
  }

  .ens-inline-search__input::placeholder {
    color: rgb(0 0 0 / 0.38);
    font-size: 13px;
  }

  .ens-inline-search__input::-webkit-search-cancel-button,
  .ens-inline-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .ens-inline-search__input:hover {
    background: transparent !important;
  }

  .ens-inline-search__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: #424242 !important;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 4px;
  }

  .ens-inline-search__close:hover {
    opacity: 1;
  }

  .ens-inline-search__close .svg-wrapper,
  .ens-inline-search__close svg {
    width: 12px;
    height: 12px;
  }

  @media screen and (max-width: 749px) {
    .ens-inline-search {
      width: 160px;
      height: 34px;
      padding: 0 8px;
    }

    .ens-inline-search__input {
      font-size: 12px;
      line-height: 34px;
    }
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }

  /* ══════════════════════════════════════════════════════════
     ENS: MOBILE SEARCH OVERLAY PANEL
     Opens BELOW the real header — offset by --header-height —
     so the header is never covered, re-built, or altered. It
     just stays visible above this panel exactly as it always
     renders. Desktop-hidden by a hard display:none as a second
     safety net on top of only ever being opened on mobile via JS.
  ══════════════════════════════════════════════════════════ */

  .ens-mobile-search {
    --ens-search-bg: #ececea;      /* background — matches reference */
    --ens-search-fg: #000000;      /* text/icons */
    --ens-search-accent: #a03a52;
    --ens-search-border: rgba(0,0,0,0.18);
  }

  @media screen and (min-width: 750px) {
    .ens-mobile-search {
      display: none !important;
    }
  }

  /* ══════════════════════════════════════════════════════════
     While the mobile search panel is open, tint the header's own
     top bar to match the panel's background (#eeeeee) so the two
     read as one continuous surface. Keyed off the dialog's native
     [open] attribute (set automatically by the browser while it's
     showing), so it reverts on its own the moment the panel closes
     — no JS needed, and the header's normal color scheme is fully
     restored the instant it does. Scoped to mobile only. */
  @media screen and (max-width: 749px) {
    #header-component:has(.ens-mobile-search__dialog[open]) .header__row--top,
    #header-component:has(.ens-mobile-search__dialog[open]) .header__underlay-closed,
    #header-component:has(.ens-mobile-search__dialog[open]) .header__underlay-open {
      background: #eeeeee !important;
    }
  }

  .ens-mobile-search__dialog {
    /* --ens-mobile-search-top is set in JS right before the dialog
       opens, from the header's actual measured position on screen —
       see applyHeaderOffset() above. --header-height is kept only as
       a fallback for the very first paint before JS runs; it can't be
       trusted on its own because the homepage's scroll-reveal CSS
       intentionally forces it to 0px (see theme.liquid). */
    position: fixed;
    padding: 0;
    margin: 0;
    border: none;
    top: var(--ens-mobile-search-top, var(--header-height, 60px));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: calc(100vh - var(--ens-mobile-search-top, var(--header-height, 60px)));
    height: calc(100dvh - var(--ens-mobile-search-top, var(--header-height, 60px)));
    max-width: 100vw;
    max-height: calc(100vh - var(--ens-mobile-search-top, var(--header-height, 60px)));
    max-height: calc(100dvh - var(--ens-mobile-search-top, var(--header-height, 60px)));
    background: var(--ens-search-bg);
    color: var(--ens-search-fg);
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Transparent — the header sits above this panel and must stay
     fully visible and unaltered while the overlay is open, so the
     native dialog backdrop is not allowed to dim/tint it. */
  .ens-mobile-search__dialog::backdrop {
    background: transparent;
  }

  .ens-mobile-search__dialog[open] {
    display: flex;
    flex-direction: column;
  }

  /* Keep the body completely empty until the shopper submits a search
     (button click or Enter) — not on every keystroke. The .has-searched
     class is toggled by JS on form submit / reset, so results only show
     up after an intentional search, and typing again immediately hides
     the previous (now stale) results rather than swapping them live. */
  .ens-mobile-search__results-wrapper {
    display: none;
  }

  .ens-mobile-search__form.has-searched .ens-mobile-search__results-wrapper {
    display: block;
  }

  /* ── Search field ── */
  .ens-mobile-search__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 24px 26px 0;
  }

  .ens-mobile-search__field {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--ens-search-border);
    padding-bottom: 6px;
    margin-top: 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
  }

  .ens-mobile-search__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 2px 0;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--ens-search-fg);
    text-align:center;
  }

  .ens-mobile-search__input::placeholder {
    color: rgb(from var(--ens-search-fg) r g b / 0.45);
    text-transform: lowercase;
  }

  .ens-mobile-search__input::-webkit-search-cancel-button,
  .ens-mobile-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .ens-mobile-search__submit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 4px;
    margin-right: 4px;
    color: var(--ens-search-fg);
    opacity: 0.7;
    cursor: pointer;
  }

  .ens-mobile-search__submit .search-icon-img {
    width: 15px;
    height: 15px;
  }

  .ens-mobile-search__reset {
    background: transparent;
    border: none;
    padding: 4px;
    color: var(--ens-search-fg);
    opacity: 0.6;
    cursor: pointer;
  }

  /* .button-unstyled sets display:block, which silently overrides the
     browser's built-in [hidden] behaviour (same CSS specificity, later
     in source order). Without this, the clear (×) button stays visible
     even when the search field is empty. */
  .ens-mobile-search__reset[hidden] {
    display: none !important;
  }

  .ens-mobile-search__reset .svg-wrapper,
  .ens-mobile-search__reset svg {
    width: 14px;
    height: 14px;
  }

  /* ── Results area ── */
  /* Removed: the mobile search no longer shows results inline — submitting
     now navigates to the real search results page (routes.search_url). */
/* END_SNIPPET:search */
/* START_SNIPPET:section (INDEX:226) */
.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:228) */
.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-controls (INDEX:232) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

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

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

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */
/* START_SNIPPET:slideshow-styles (INDEX:234) */
/*
   * 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:244) */
: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:253) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
   
  }
@media screen and (min-width: 1700px){
  .variant-picker__form {
    width: 100%;
    margin-top: 0px;
  }}
  .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;
  }
   @media screen and (min-width: 1700px){
    .variant-picker{
    }
   }

  /* Bold only the middle "Medium" size value; all others stay regular weight, same font size */
  .variant-option__button-label__text {
    font-weight: 400;
  }

  .variant-option__button-label__text--bold {
    font-weight: 700;
  }
  /* ENSNE Back Print selector — clean version */

.ens-back-print {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
}

.ens-back-print > legend {
  display: none !important;
}

.ens-back-print__label {
  flex: 1 1 50%;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  margin: 0;
  padding: 12px 16px;

  border: 1px solid currentColor;
  border-radius: 2px;

  cursor: pointer;
  text-align: center;
}

.ens-back-print__label input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.ens-back-print__label {
  background: #b5b5b5 !important;
  color: #eeeeee !important;
  border-color: #b5b5b5 !important;
}

.ens-back-print__label:has(> input[type="radio"]:checked) {
  background: #590a2a !important;
  color: #eeeeee !important;
  border-color: #590a2a !important;
}

.ens-back-print__label .variant-option__button-label__text {
  font-weight: 400;
  text-transform: lowercase;
}

.ens-back-print__label:has(input:checked) .variant-option__button-label__text {
  font-weight: 700;
}
/* END_SNIPPET:variant-main-picker */
/* START_SNIPPET:video (INDEX:255) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */