/** Shopify CDN: Minification failed

Line 1748:2 Unexpected "}"

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

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

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

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

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

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :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;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 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;
      }
    }
  }

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

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

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

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

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

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

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

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

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

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

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

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

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

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

  /* Header styling matched to pashmoda.com: white/black scheme-2 (see header-group.json),
     native 1px border via border_width setting, Instrument Sans nav type, stock icon sizing. */

  /* Gap between logo and first menu item, matching the 2.5rem gap between menu items */
  #header-component .header__column--left {
    gap: 2.5rem;
  }

  #header-component header-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 40px;
    align-items: center;
    column-gap: 0.5rem;
    margin-inline-start: 0;
    padding: 0;
  }

  /* Bigger icons than the theme default, matching cart/search/hamburger sizes */
  #header-component .header-actions__action:not(.account-button) svg,
  #header-component .header-actions__action:not(.account-button) .svg-wrapper svg,
  #header-component .header__icon--menu svg {
    width: 26px;
    height: 26px;
  }

  #header-component .account-button__icon {
    width: 26px;
    height: 26px;
  }

  #header-component header-actions > *,
  #header-component header-actions .header-actions__action {
    margin: 0 !important;
  }

  /* Account stays hidden on mobile (bottom nav covers it) - see the
     account-only hide rule in layout/theme.liquid. Wishlist and cart show
     here in the top header too now. */

  #header-component .header__columns {
    padding-inline: 1.25rem;
    --header-padding: 1rem;
  }

  @media screen and (min-width: 700px) {
    #header-component .header__columns {
      padding-inline: 2rem;
    }
  }

  @media screen and (min-width: 1000px) {
    #header-component .header__columns {
      padding-inline: 3rem;
      --header-padding: 1.6rem;
    }
  }

  #header-component .header-logo img {
    max-height: 40px;
    width: auto;
  }

  @media screen and (max-width: 699px) {
    #header-component .header-logo img {
      max-height: 28px;
    }
  }

  @media screen and (min-width: 700px) {
    #header-component .header-logo img {
      max-height: 40px;
    }
  }

  #header-component .menu-list__link {
    color: #000000;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5;
    letter-spacing: 1px;
    text-transform: none;
    padding-block: .5rem;
    position: relative;
  }

  #header-component button.menu-list__link {
    cursor: default;
  }

  /* The <li> itself is only as tall as its own text (vertically centered
     inside the taller nav row) - it does NOT actually span the full row
     height despite what the previous version of this comment assumed, so
     bottom:0 landed the bar mid-row instead of at the header's real bottom
     edge. --pv-underline-offset is measured at runtime (see the script near
     the end of this file) as the real gap between the <li>'s own bottom and
     the header's true bottom edge, and applied here as a negative bottom
     value to push the bar down to match. Purely visual/decorative fix -
     doesn't touch hover detection, the submenu, or any interactive state. */
  #header-component .menu-list__list-item::before {
    content: '';
    position: absolute;
    inset-inline: .65rem;
    bottom: var(--pv-underline-offset, 0px);
    height: 2px;
    background: #000000;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
  }

  /* For items with a submenu, widen the underline to match the submenu's
     own rendered width (measured by the same script, since submenus are
     visibility:visible in the DOM at all times - just invisible via
     opacity - so their real width is measurable without waiting for hover). */
  #header-component .menu-list__list-item:has(> .menu-list__submenu)::before {
    /* The base rule's inset-inline:.65rem sets both left and right - reset
       right to auto so it doesn't fight with the explicit width below
       (having left+width+right all set at once is over-constrained). */
    inset-inline-start: 0;
    inset-inline-end: auto;
    /* width:auto computes to ~0px for this empty content:'' element, so
       before the JS measurement runs (or if it's ever delayed) the line
       would flash invisible/zero-width. 13rem matches the submenu's own
       min-width, so the fallback is never a visible jump either. */
    width: var(--pv-underline-width, 13rem);
  }

  /* Only checking .menu-list__link-title:hover meant the bar dropped the
     instant the cursor left the (small) text and moved onto the submenu
     below, even while the submenu was still open. The submenu is a DOM
     descendant of this <li> (just visually positioned outside its box via
     position:absolute), so hovering it also satisfies .menu-list__list-item
     :hover directly - keep the bar up for that case too, and for
     aria-expanded (keyboard focus / the brief moment right on activation). */
  #header-component .menu-list__list-item:has(.menu-list__link-title:hover)::before,
  #header-component .menu-list__list-item:has([aria-expanded='true'])::before,
  #header-component .menu-list__list-item:has(> .menu-list__submenu:hover)::before {
    transform: scaleX(1);
  }

  #header-component .header-actions__action {
    color: #000000;
    border: 0;
    border-radius: 0;
    align-items: center;
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
    -webkit-tap-highlight-color: transparent;
    /* .button-unstyled never resets appearance, so some mobile browsers
       still paint the native OS button widget underneath (often a grey
       rounded/circular shape for a compact square icon button) regardless
       of the background-color CSS set on top of it. */
    appearance: none;
    -webkit-appearance: none;
    background: none !important;
  }

  #header-component .header-actions__action:hover,
  #header-component .header-actions__action:active,
  #header-component .header-actions__action:focus,
  #header-component .header-actions__action:focus-visible {
    color: #000000;
    background: transparent !important;
    border-color: transparent;
    outline: none;
    box-shadow: none;
    transform: none;
  }

  /* Force pure white header background regardless of the assigned color scheme -
     also cover #header-component and #header-group directly (not just the
     underlay layers) so this stays solid white on mobile too, where the
     header sits inside a fixed #header-group wrapper */
  #header-component,
  #header-component .header__underlay-closed,
  #header-component .header__underlay-open,
  #header-group {
    background: rgb(255 255 255 / 1) !important;
  }

  /* This stock element grows to --full-open-header-height (header + open
     submenu height) with its own full-width background, meant to visually
     extend the header's color behind an open mega-menu on themes with a
     non-white header. Since it's forced white here (matching the page bg
     above), it just reads as a second, unexplained blank band below the
     header whenever a submenu opens - the compact-dropdown design this
     store uses doesn't need it at all. */
  #header-component .header__underlay-open {
    height: 0 !important;
    display: none !important;
  }

  /* Readable, compact item counts on the white header - matched exactly to
     the cart bubble's box model (padding:0, same width/height) so both
     badges render as identical circles instead of this one being a wider
     pill/oval for single-digit counts. */
  #header-component .header-actions__wishlist-count {
    display: flex !important;
    position: absolute;
    top: -5px;
    right: -7px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #000000;
    border-radius: 999px;
    background: #000000;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    box-sizing: border-box;
  }

  /* This used to be two contradicting rule sets - one hid .cart-bubble__background
     and gave .cart-bubble itself the circle; a second, later one (further down,
     now removed) forced .cart-bubble__background back to display:block with
     its own black circle at a different position, so both layers rendered at
     once as a mismatched double circle. Kept just this one, single definition. */
  #header-component .header-actions__cart-icon .cart-bubble {
    display: flex !important;
    position: absolute;
    top: -5px;
    right: -7px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #000000;
    border-radius: 999px;
    background: #000000;
    color: #ffffff;
    box-sizing: border-box;
    overflow: visible;
  }

  #header-component .header-actions__cart-icon .cart-bubble__background {
    display: none;
  }

  /* Keep the header visually stable while the search modal is open */
  body:has(#search-modal dialog[open]) #header-component,
  body:has(#search-modal dialog[open]) #header-component .header__row,
  body:has(#search-modal dialog[open]) #header-component .header__underlay-closed,
  body:has(#search-modal dialog[open]) #header-component .header__underlay-open {
    --color-foreground: rgb(0 0 0 / 1) !important;
    --color-foreground-rgb: 0 0 0 !important;
    --color-background: rgb(255 255 255 / 1) !important;
    --color-background-rgb: 255 255 255 !important;
    --color-border: rgb(221 221 221 / 1) !important;
    --color-border-rgb: 221 221 221 !important;
    background: rgb(255 255 255 / 1) !important;
  }

  body:has(#search-modal dialog[open]) #header-component {
    pointer-events: none;
  }

  body:has(#search-modal dialog[open]) #header-component .header-actions__action,
  body:has(#search-modal dialog[open]) #header-component .search-action,
  body:has(#search-modal dialog[open]) #header-component button,
  body:has(#search-modal dialog[open]) #header-component a {
    pointer-events: none !important;
  }

  #header-component .header-actions__cart-icon .cart-bubble__text,
  #header-component .header-actions__cart-icon .cart-bubble__text-count {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
  }

  #header-component cart-icon.header-actions__cart-icon .cart-bubble__text-count.hidden,
  #header-component cart-icon.header-actions__cart-icon .cart-bubble__text-count.visually-hidden {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #header-component cart-icon.header-actions__cart-icon {
    position: relative !important;
    display: inline-flex !important;
    width: 26px !important;
    height: 26px !important;
    overflow: visible !important;
    align-items: center;
    justify-content: center;
  }

  #header-component cart-drawer-component,
  #header-component cart-drawer-component > .header-actions__action {
    overflow: visible !important;
  }

  #header-component cart-icon.header-actions__cart-icon .cart-bubble__text {
    min-width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
  }

  #header-component .header-actions__cart-icon,
  #header-component .header-actions__cart-icon .cart-bubble__text,
  #header-component .header-actions__cart-icon .cart-bubble__text-count {
    overflow: visible !important;
  }


  /* Keep the wishlist drawer independent from header icon styling. */
  #header-component .wishlist-drawer {
    color: #000000 !important;
    background: #ffffff !important;
    opacity: 1 !important;
    position: fixed !important;
    inset-block: 0 !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  @media screen and (min-width: 750px) {
    #header-component .wishlist-drawer {
      width: min(var(--sidebar-width), 95vw) !important;
      max-width: 420px !important;
    }
  }

  #header-component .wishlist-drawer__header h2,
  #header-component .wishlist-drawer__content,
  #header-component .wishlist-drawer__content [data-wishlist-empty] {
    color: #000000 !important;
  }

  #header-component .wishlist-drawer__header p {
    color: #000000 !important;
  }

  #header-component .wishlist-drawer__view {
    color: #ffffff !important;
    border-radius: var(--style-border-radius-buttons-primary) !important;
  }

  #header-component .wishlist-drawer__header button {
    color: #000000 !important;
  }

  #header-component .header__column--center {
    justify-content: center;
  }

  @media screen and (max-width: 749px) {
    #header-component header-menu {
      display: none !important;
      visibility: hidden !important;
    }

    #header-component header-actions { grid-auto-columns: 38px; column-gap: .625rem; margin-inline-start: 0; }

    #header-component .header-actions__action:not(.account-button) svg,
    #header-component .header-actions__action:not(.account-button) .svg-wrapper svg,
    #header-component .header__icon--menu svg {
      width: 24px;
      height: 24px;
    }

    /* The hamburger's own wrapper span is capped at --icon-size-xs (13.6px)
       in header-drawer.liquid, which clips the svg below the 24px above via
       max-width:100% - widen the wrapper itself to match. */
    #header-component .header__icon--summary .header-drawer-icon {
      width: 24px;
      height: 24px;
    }

    #header-component .header__icon--menu svg path {
      stroke-width: 1px !important;
    }
  }

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

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

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

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

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

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

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

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */
/* START_SECTION:main-page (INDEX:26) */
main[data-template="page.contact"] .section-background,
  main[data-template="page.contact"] .page-width-content {
    background: #ffffff !important;
  }
/* END_SECTION:main-page */
/* START_SECTION:pv-announcement-bar (INDEX:38) */
.pv-announce{
    overflow:hidden;
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,0.12);
    background:#000000 !important;
  }
  .pv-announce__track{
    display:flex;
    width:max-content;
    will-change:transform;
    animation-name:pv-marquee;
    animation-duration:34s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-play-state:running !important;
  }
  .pv-announce__item{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    font-family:'Instrument Sans', sans-serif;
    font-size:clamp(0.625rem, 0.55rem + 0.3vw, 0.75rem);
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:#ffffff !important;
    padding:0 28px;
    font-weight:300;
  }
  @media screen and (max-width: 749px){
    .pv-announce{
      padding:6px 0;
    }
    .pv-announce__item{
      font-size:9px !important;
    }
  }
  .pv-announce__dot{
    margin-left:28px;
    color:#ffffff !important;
    opacity:0.5;
    font-size:8px;
  }
  @keyframes pv-marquee{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
  }
/* END_SECTION:pv-announcement-bar */
/* START_BLOCK:_header-logo (INDEX:91) */
.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);
    }
  }

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

/* Reverted: stretching the <li> to the full header height (for underline/submenu
   positioning) also expanded the actual hover/open hit-area to the whole header
   height, since hover is detected on the <li>/link itself, not just its text -
   that's a bigger problem than an imperfectly-flush underline, so back it out. */

.menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu {
  width: auto !important;
  min-width: 13rem !important;
  left: 0 !important;
  /* --pv-underline-offset (measured in header.liquid, negative = the gap
     between the <li>'s own bottom and the header's true bottom edge) is
     reused here from the underline fix - same gap, same fix, and staying
     position:absolute means horizontal alignment to the <li> still works
     automatically, unlike the earlier position:fixed attempt. */
  top: calc(100% - var(--pv-underline-offset, 0px)) !important;
  clip-path: none !important;
  position: absolute !important;
  z-index: 999 !important;
  visibility: visible !important;
  /* Stock (sections/header.liquid) sets content-visibility:auto + a 0px-wide
     contain-intrinsic-size on this element as a perf optimization, kept
     "visible" only via a [data-active] attribute that header-menu.js's
     deactivate() strips SYNCHRONOUSLY the instant the pointer leaves the
     trigger - before any opacity/pointer-events delay even starts. That
     collapses the submenu's real layout size to 0px wide immediately, so
     there's nothing left to hover onto no matter how fast the cursor moves.
     Forcing content-visibility:visible permanently disables that containment
     trick, so the submenu always keeps its real, hoverable size. */
  content-visibility: visible !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  /* Restricting the hover hit-area to just the link text (see the "Reverted"
     note above) means there's a brief moment moving from text to dropdown
     where neither is hovered and aria-expanded has already gone false -
     pointer-events:none applied instantly there (even though opacity was
     still mid-fade) made the dropdown ungrabbable before the cursor
     arrived. Delaying just the pointer-events change keeps it clickable
     for the same window the fade-out takes, so there's time to reach it.
     Bumped from .2s to 1s since the submenu now sits further down (fixed
     to the header's real bottom edge, not the <li>'s), a real gap to
     travel, not just a couple of px. */
  /* !important is load-bearing: a later stock rule targeting this same
     selector sets its own `transition: clip-path ...` (transition is a
     shorthand, so whichever declaration wins replaces the WHOLE thing) -
     without !important here, that later rule silently wiped out this
     opacity/pointer-events transition, making pointer-events snap to
     'none' the instant the trigger is left with zero grace period, no
     matter how the delay above was tuned. */
  transition: opacity .2s ease, transform .2s ease, pointer-events 0s linear 1s !important;
}

/* The real reason the submenu kept dying mid-crossing: deactivate() (in
   header-menu.js) flips aria-expanded to false the instant the pointer
   leaves the trigger text, for plain mouse movement none of its "still
   moving within the menu" guards ever match. Everything above only buys
   time via a fade + delayed pointer-events - but the space between the
   trigger and the dropdown box has nothing hoverable in it, so if crossing
   it takes even a bit longer than that window, the cursor never touches
   the submenu and it's gone. This pseudo-element extends the submenu's own
   hoverable area upward until it touches the trigger, closing that dead
   zone completely so hover transfers to the submenu (re-triggering the
   :is(:hover) rule below) before it ever gets the chance to finish fading. */
.menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: max(28px, calc(-1 * var(--pv-underline-offset, 0px)));
}

/* Fade + slide the dropdown in on the same triggers stock already uses to open it */
.menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
.menu-list__submenu:is(:hover) {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0);
  animation: pv-header-dropdown-enter .35s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes pv-header-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-list__submenu-inner {
  transform: none !important;
  padding: 14px 20px !important;
  max-height: none !important;
  overflow: visible !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
  border: none !important;
  border-radius: 2px !important;
  width: max-content !important;
  display: block !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Plain link-list dropdowns (no mega-menu grid inside): keep compact, left-aligned */
.menu-list__submenu-inner:not(:has(.mega-menu)) {
  min-width: 13rem;
}

.mega-menu {
  --mega-menu-panel-width: 160px;
  width: var(--mega-menu-panel-width) !important;
  min-width: var(--mega-menu-panel-width) !important;
  max-width: min(20rem, 80vw) !important;
  display: block !important;
  text-align: left !important;
}

.mega-menu__grid {
  grid-template-columns: 1fr !important;
  width: var(--mega-menu-panel-width) !important;
  justify-content: start !important;
  justify-items: start !important;
  /* base.css's .section--full-width.section--full-width-margin > * rule (which
     .mega-menu wraps this grid with) adds a left page-margin here that reads as
     a stray left gap in the compact dropdown. Cancel it for this context only. */
  padding-left: 0 !important;
}

.mega-menu__column {
  grid-column: span 1 !important;
  width: var(--mega-menu-panel-width) !important;
}

.mega-menu__column > div {
  width: var(--mega-menu-panel-width);
}

/* Flatten any nested subgrid/spans so they can't request more implicit
   columns than the single explicit column above (that mismatch was what
   pushed content right and left a gap on the left edge) */
.mega-menu__list,
.mega-menu__content {
  grid-column: span 1 !important;
  grid-template-columns: 1fr !important;
}

.mega-menu__content-list {
  justify-content: start !important;
}

.mega-menu__link:not(:has(.mega-menu__link-image)) {
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  display: block !important;
  padding: 6px 0 !important;
}

.mega-menu__link {
  font-family: 'Instrument Sans', sans-serif !important;
  color: #000000 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  transition: color .15s ease;
}

.mega-menu__link:hover {
  color: rgba(0, 0, 0, 0.5) !important;
  text-decoration: none !important;
}

/* Keep category groups compact and open their children in an adjacent panel. */
.mega-menu__column > div {
  position: relative;
}

/* Bridge the first panel's inner padding so Shawls/Stoles stay hovered while
   the pointer moves from the arrow into the adjacent flyout. */
.mega-menu__column > div::after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  bottom: 0;
  width: 20px;
  z-index: 3;
}

.mega-menu__column > div > .mega-menu__link--parent {
  position: relative;
  width: 100% !important;
  font-size: 14px !important;
  padding-right: 24px !important;
  justify-content: space-between;
}

.mega-menu__column > div > .mega-menu__link--parent::after {
  content: '›';
  position: absolute;
  right: 2px;
  color: #9b9b9b;
  font-size: 18px;
  line-height: 1;
}

.mega-menu__column > div:hover > .mega-menu__submenu-list,
.mega-menu__column > div:focus-within > .mega-menu__submenu-list {
  display: block;
}

.mega-menu__nested-item {
  position: relative;
}

/* Keep the category row hoverable while the pointer crosses into its
   adjacent subcategory panel. */
.mega-menu__nested-item::after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  bottom: 0;
  width: 20px;
  z-index: 1;
}

.mega-menu__nested-item > .mega-menu__link {
  position: relative;
  padding-right: 24px !important;
}

.mega-menu__nested-item > .mega-menu__link::after {
  content: '›';
  position: absolute;
  right: 2px;
  color: #9b9b9b;
  font-size: 18px;
  line-height: 1;
}

.mega-menu__submenu-list {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: -14px;
  /* Account for the first panel's inner padding so the panels touch without
     overlapping while the row bridge keeps the hover path continuous. */
  left: calc(var(--mega-menu-panel-width) + 20px);
  min-width: 222px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid rgba(35, 31, 28, .08);
  box-shadow: 0 16px 36px rgba(35, 31, 28, .14);
  transform: translateY(-12px);
  transform-origin: top center;
  will-change: opacity, transform;
  transition: opacity .32s ease-out, transform .4s cubic-bezier(.22, 1, .36, 1), visibility .4s ease;
}

.mega-menu__nested-item:hover > .mega-menu__submenu-list,
.mega-menu__nested-item:focus-within > .mega-menu__submenu-list {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  animation: pv-header-dropdown-enter .35s cubic-bezier(.22, 1, .36, 1) both;
}

.mega-menu__column > div:hover > .mega-menu__submenu-list,
.mega-menu__column > div:focus-within > .mega-menu__submenu-list {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  animation: pv-header-dropdown-enter .35s cubic-bezier(.22, 1, .36, 1) both;
}

.mega-menu__submenu-list > li {
  white-space: nowrap;
}

.mega-menu__submenu-list .mega-menu__link {
  padding: 6px 0 !important;
}

/* Match the active underline to the compact dropdown's visible width. */
#header-component .menu-list__list-item:has(> .menu-list__submenu)::before {
  width: calc(var(--mega-menu-panel-width, 160px) + 40px) !important;
}

.header-component,
#header-component {
  height: auto !important;
}

/* Removed: this forced --submenu-height to always be 0 and
   --full-open-header-height to always equal the collapsed header height,
   with !important - both override the real values header-menu.js computes
   per-submenu (via ResizeObserver-driven style.setProperty calls) and that
   the submenu's own top/clip-path formulas depend on. With these forced to
   static, wrong values, every submenu's calculated top position came out
   too high, overlapping the header instead of sitting flush below it. */

#header-component {
  overflow: visible !important;
}

.header__row {
  overflow: visible !important;
}

/* Reverted: making header-menu/.header-menu__inner stretch to the full header
   height let stock's own .menu-list__list-item{height:100%} actually resolve
   for the first time, which stretched the hover/open hit-area to the whole
   header height too - the underline landing mid-row is a smaller problem than
   the submenu opening when hovering empty space below the text. */


  .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;
    height: 100%;
    align-items: center;
    position: relative;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }
/* The top-level nav renders inside an <overflow-list> web component's shadow
   DOM, so a plain CSS rule on .menu-list__list never reaches its real layout.
   --menu-horizontal-gap is the custom property the component actually reads
   for its internal gap, and custom properties do inherit through shadow
   boundaries, so overriding it here is what actually changes the spacing. */
#header-component .menu-list,
#header-component nav.menu-list {
  --menu-horizontal-gap: 2.5rem !important;
}

/* Row spacing inside submenu/mega-menu lists (pashmoda packs items closer
   together than the theme's default --gap-xl row gap, but with a bit more
   breathing room than the original 4px so items don't feel cramped) */
#header-component .menu-list__submenu {
  --menu-vertical-gap: 10px !important;
}

.menu-list__list {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Keep the navigation labels centered in the header row without expanding
   the individual link hit areas used by the dropdown hover behavior. */
#header-component .header-menu,
#header-component .header-menu__inner,
#header-component .menu-list,
#header-component .menu-list__list,
#header-component .menu-list__list-item {
  align-items: center;
}

/* This is the actual flex container the nav items lay out in (exposed from
   the <overflow-list> component's shadow DOM). Stock hardcodes gap:0 and
   spaces items via each link's own padding + a compensating negative margin
   instead - switch that off and use a real gap here so items get equal
   spacing between them, not padding inside each item. */
#header-component .overflow-menu::part(list) {
  gap: 2.5rem !important;
  margin-inline: 0 !important;
  /* This <ul part="list"> (inside <overflow-list>'s shadow root, see
     overflow-list.css) ships with overflow-y:hidden - every submenu dropdown
     is a slotted descendant of this exact element, so the moment it extends
     below the row's own short height it was being CLIPPED, not closed. That's
     the real reason moving the cursor even slightly below the menu text made
     it vanish, independent of any hover/JS timing. Both axes have to be set
     together - overflow-x:auto alone would force overflow-y back to 'auto'
     (which still clips) per the CSS overflow computed-value rule. */
  overflow: visible !important;
}

.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);
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  height: auto;
  padding-inline: 0;
  padding-block: 0;
}

/* Keep the gender labels visually aligned with the other top-level links. */
.menu-list__list-item--gender > .menu-list__link {
  font-size: calc(var(--menu-top-level-font-size) - 1px) !important;
}

/* on:pointerenter/pointerleave are bound to this exact element (see the
   "Reverted" note above about the hit-area being restricted to just the
   text) - so header-menu.js's deactivate() fires the instant the cursor
   drops below this box, before it ever reaches the submenu underneath.
   Growing the hoverable area itself (rather than patching the dropdown's
   fade/timing after the fact) is the real fix: this pseudo-element is
   part of this same link's rendered box, so hovering it keeps the link's
   own :hover true and pointerleave simply never fires while crossing the
   gap. It's zero-height (no footprint, can't block clicks on the page
   below) until :hover/aria-expanded make it grow to bridge the exact gap
   down to the submenu - same measured gap the submenu position uses. */
.menu-list__list-item:where(:not([slot='overflow'])) > [ref='menuitem']::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
}

.menu-list__list-item:where(:not([slot='overflow'])) > [ref='menuitem']:hover::before,
.menu-list__list-item:where(:not([slot='overflow'])) > [ref='menuitem'][aria-expanded='true']::before {
  height: max(28px, calc(-1 * var(--pv-underline-offset, 0px)));
}

.menu-list__link--highlight .menu-list__link-title {
  color: var(--pv-gold);
  font-weight: 600;
}
.menu-list__link--highlight .menu-list__link-title::after {
  content: ' ✦';
  font-size: 0.8em;
}
.menu-list__link--highlight:hover .menu-list__link-title {
  color: var(--pv-maroon);
}


.menu-list__link:hover::after,
.menu-list__link[aria-expanded='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: .2rem;
}
  [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));
  }


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

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

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

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

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

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

    background-color: transparent;
  }

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

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

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

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

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

    visibility: visible;
  }

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

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

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

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

    display: contents;
    white-space: normal;

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

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

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

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

  /* Reverted - using --top-row-height here fed back into the header's own
     measured height (it's watched by a ResizeObserver), growing the whole
     header taller. Not worth it for the underline/submenu positioning. */
  .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);
    /* --submenu-content-animation only ever includes "opacity" - the
       transform below (translateY, driven by --submenu-height /
       --full-open-header-height, both of which header-menu.js's deactivate()
       sets to 0 instantly on pointerleave) had NO transition at all, so the
       actual content snapped/jumped the moment you left the trigger, even
       while the outer wrapper was still mid-fade. That abrupt content jump -
       not the outer opacity fade - is what made the dropdown unreachable.
       Explicitly extending the transition to include transform fixes it. */
    transition: var(--submenu-content-animation), transform .3s ease !important;
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

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

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

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

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

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

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

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

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

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

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

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

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), 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 more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */
/* START_SNIPPET:accordion-custom-component (INDEX:155) */
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:cart-bubble (INDEX:166) */
.cart-bubble {
    --cart-padding: 0.2em;

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

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

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

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-button-background);
    border-radius: var(--style-border-radius-lg);
  }

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

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

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

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

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

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

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

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

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */
/* START_SNIPPET:cart-products (INDEX:168) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

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

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

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

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

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

  .cart-items__table * {
    margin: 0;
  }

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

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

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

    .cart-items__details {
      display: contents;
    }

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

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

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

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

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

  /* Cart drawer: the unit-price row (next to the title/variant details) and the
     line-total price column show the same number for qty 1 - the common case.
     Keep just the unit-price row and drop the isolated total column, at every
     screen size (not just mobile), so it can't reappear on wider viewports. */
  .cart-drawer .cart-items__price {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .cart-drawer .cart-items__title {
      font-size: var(--font-size--sm);
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

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

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

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

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

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

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

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

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


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  .cart-items__empty-recs {
    margin-top: var(--margin-2xl, 32px);
    width: 100%;
  }
  .cart-items__empty-recs-heading {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pv-text-soft, #6E6156);
    text-align: center;
    margin: 0 0 14px;
  }
  .cart-items__empty-recs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .cart-items__empty-rec {
    text-decoration: none;
    display: block;
  }
  .cart-items__empty-rec-img {
    aspect-ratio: 3/4;
    background: var(--pv-cream-dark, #F1E8D8);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
  }
  .cart-items__empty-rec-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cart-items__empty-rec-title {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    color: var(--pv-text, #2B2320);
    margin: 0 0 2px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cart-items__empty-rec-price {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--pv-text, #2B2320);
    margin: 0;
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

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

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */
/* START_SNIPPET:header-actions (INDEX:185) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: black;
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

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

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

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

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

  .header-actions__wishlist { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
  .header-actions__wishlist-icon { position: relative; display: inline-flex; }
  .header-actions__wishlist-count[hidden] {
    display: flex !important;
    opacity: 0 !important;
    visibility: visible !important;
  }


  .header-actions__wishlist.is-receiving { animation: wishlist-header-pop 560ms cubic-bezier(.2,.8,.2,1); color: #b91c1c; }
  .wishlist-fly-heart { position: fixed !important; z-index: 2147483647 !important; width: 2.6rem !important; height: 2.6rem !important; padding: 0 !important; border: 1px solid #efb5b5 !important; border-radius: 50% !important; background: #fff !important; color: #b91c1c !important; pointer-events: none !important; box-shadow: 0 10px 28px #5c16163d !important; transition: left 950ms cubic-bezier(.16,1,.3,1), top 950ms cubic-bezier(.16,1,.3,1), transform 950ms cubic-bezier(.16,1,.3,1), opacity 950ms ease !important; }
  @keyframes wishlist-header-pop { 0%,100%{transform:scale(1)} 35%{transform:scale(1.28)} 65%{transform:scale(.94)} }
  .wishlist-drawer { width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: hidden; background: #ffffff; box-shadow: var(--shadow-drawer); }
  @media screen and (min-width: 750px) { .wishlist-drawer { width: var(--sidebar-width) !important; max-width: 95vw !important; margin-inline-start: auto !important; } }
  .wishlist-drawer__panel { display: flex; flex-direction: column; height: 100%; }
  .wishlist-drawer__header { display: flex; justify-content: space-between; padding: 1.7rem 1.4rem 1.2rem; border-bottom: 1px solid #eee; }
  .wishlist-drawer__header p { margin: 0 0 .35rem; color: #000000; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
  .wishlist-drawer__header h2 { margin: 0; font-size: 1.55rem; color: #000000; }
  .wishlist-drawer__header button { border: 0; background: transparent; color: #000000; font-size: 1.7rem; cursor: pointer; }
  .wishlist-drawer__content { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; }
  .wishlist-drawer__content [data-wishlist-empty][hidden] { display: none; }
  .wishlist-drawer__list { display: grid; gap: 1rem; }
  .wishlist-drawer .wishlist-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: .8rem; align-items: start; }
  .wishlist-drawer .wishlist-item__image-link img { width: 76px; height: 98px; object-fit: cover; }
  .wishlist-drawer .wishlist-item__title { color: #000000; text-decoration: none; font-size: .86rem; }
  .wishlist-drawer .wishlist-item__price { margin: .3rem 0 0; font-size: .8rem; color: #000000; }
  .wishlist-drawer .wishlist-item__remove { border: 0; background: transparent; color: #000000; cursor: pointer; }
  .wishlist-drawer__view { margin: 1.4rem; padding: .85rem; border: 1px solid #000000; background: #000000; color: #ffffff; text-align: center; text-decoration: none; }
  body.wishlist-drawer-open { overflow: hidden; scrollbar-gutter: stable; }

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

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

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

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

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

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

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

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

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

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

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

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

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

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

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

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

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

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

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

  header-actions {
    display: flex;

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

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

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

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

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

    position: relative;
  }

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

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

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

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

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

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

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

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

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

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

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

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

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

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

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

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }

  .cart-drawer__shipping-bar {
    padding: var(--padding-md) var(--padding-lg);
    margin-bottom: var(--margin-sm);
    border-bottom: 1px solid var(--color-border);
  }

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

  .cart-drawer__shipping-bar-text {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin: 0;
    font-size: var(--font-paragraph-small--size);
  }

  .cart-drawer__shipping-bar-text--done {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
  }

  .cart-drawer__shipping-bar-text--done .svg-wrapper {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  .cart-drawer__shipping-bar-text--done .svg-wrapper svg {
    width: 100%;
    height: 100%;
  }

  .cart-drawer__delivery-estimate {
    padding: 0 var(--padding-lg) var(--padding-md);
    margin: 0;
    font-size: var(--font-paragraph-small--size);
    opacity: 0.75;
  }

  .cart-drawer__cross-sell {
    padding: var(--padding-md) var(--padding-lg);
    border-top: 1px solid var(--color-border);
  }

  .cart-drawer__cross-sell-heading {
    margin: 0 0 var(--margin-sm);
    font-size: var(--font-paragraph-small--size);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .cart-drawer__cross-sell-list {
    display: flex;
    gap: var(--gap-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--padding-2xs);
  }

  .cart-drawer__cross-sell-item {
    flex: 0 0 110px;
    scroll-snap-align: start;
    text-decoration: none;
    color: var(--color-foreground);
  }

  .cart-drawer__cross-sell-image {
    width: 110px;
    height: 110px;
    background: var(--color-background-secondary, rgb(var(--color-foreground-rgb) / 0.05));
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    margin-bottom: var(--margin-3xs);
  }

  .cart-drawer__cross-sell-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-drawer__cross-sell-title {
    margin: 0;
    font-size: var(--font-size--2xs);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cart-drawer__cross-sell-price {
    margin: var(--margin-3xs) 0 0;
    font-size: var(--font-size--2xs);
    font-weight: var(--font-weight-semibold);
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:186) */
.header__icon--menu {
    position: initial;
  }

  .pv-mobile-drawer-contact { display:none; }

  /* Belongs to the root category list only - shouldn't show (or leave a gap
     for) while a drill-down submenu screen is open on top of it. */
  body:has(details.menu-drawer__menu-container.menu-open) .pv-mobile-drawer-contact {
    display: none !important;
  }

  /* Keep this always visible (including while a submenu is open) - stays in
     normal flow (not absolute, avoids the earlier left/right conflict) but
     needs position:relative for z-index to take effect, so it paints above
     the submenu's own overlay (z-index:5) instead of being covered by it. */
  .menu-drawer__nav-buttons--root {
    position: relative;
    z-index: 6;
  }

  @media screen and (max-width: 749px) {
    .pv-mobile-drawer-contact {
      display:block;
      border-top:1px solid rgba(0,0,0,.08);
      background:#ffffff !important;
    }
    .pv-mobile-drawer-contact__account,
    .pv-mobile-drawer-contact__help a,
    .pv-mobile-drawer-contact__help .pv-mobile-drawer-contact__detail {
      display:flex;
      align-items:center;
      gap:10px;
      color:inherit;
      text-decoration:none;
    }
    .pv-mobile-drawer-contact__account {
      min-height:44px;
      padding:0 20px;
      border-bottom:1px solid rgba(0,0,0,.08);
      font-size:0.8rem;
    }
    .pv-mobile-drawer-contact__help { padding:14px 20px 18px; }
    .pv-mobile-drawer-contact__help p { margin:0 0 8px; font-size:0.8rem; }
    .pv-mobile-drawer-contact__help a,
    .pv-mobile-drawer-contact__help .pv-mobile-drawer-contact__detail { margin-top:8px; font-size:0.8rem; }
    .pv-mobile-drawer-contact__help .pv-mobile-drawer-contact__detail:first-of-type { margin-top:0; }
  }

  .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;
    margin: 0;
    border: 0;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    /* Slightly narrower than the shared --drawer-width/--drawer-max-width
       (used by other drawers like filters/cart too, so overridden locally
       here rather than changing those globals). */
    width: 90vw;
    max-width: 460px;
    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: 26rem;
    }
  }

  /* 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;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    background: rgb(20 12 15 / 28%);
    backdrop-filter: blur(8px) brightness(0.72);
    -webkit-backdrop-filter: blur(8px) brightness(0.72);
    z-index: var(--layer-heightened);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--drawer-animation-speed) ease;
    touch-action: none;

    .menu-open & {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .menu-drawer-container[open] > .menu-drawer__backdrop {
    z-index: 2147483646 !important;
  }

  /* Drawer must stack above its own backdrop once both are portaled to
     <body> - --layer-menu-drawer (18) is nowhere near the backdrop's raised
     2147483646 in that context, so the backdrop was rendering on top. */
  .menu-drawer-container[open] > .menu-drawer {
    z-index: 2147483647 !important;
  }

  .menu-drawer {
    touch-action: auto !important;
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    /* Match the cart/wishlist drawer's easing (ease-in-out) instead of
       plain ease - ease starts fast then decelerates, which reads as an
       abrupt snap at the start of the slide; ease-in-out eases in first,
       which is what made cart/wishlist feel smoother. */
    transition: transform var(--drawer-animation-speed) ease-in-out, visibility var(--drawer-animation-speed) ease-in-out,
      opacity var(--drawer-animation-speed) ease-in-out;
  }

  /* .menu-drawer's own transform is driven entirely via the Web Animations
     API in header-drawer.js now - an !important transform here would win
     over the in-progress animation's frames (CSS animations rank below
     author !important), snapping it straight to its end value instead of
     letting the slide play. */
  .menu-open > .menu-drawer,
  .menu-drawer-container[open] > .menu-drawer {
    visibility: visible !important;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  /* Submenu transform/opacity/visibility are driven via the Web Animations
     API in header-drawer.js now, same reasoning as .menu-drawer above. */
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    display: flex;
    flex-direction: column;
  }

  .menu-drawer-container[open] > .menu-drawer__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  #MainContent {
    transition: filter var(--drawer-animation-speed) ease-in-out;
  }

  body:has(#Details-menu-drawer-container[open]) #MainContent,
  body:has(details.menu-open) #MainContent {
    filter: blur(6px);
  }

  html:has(#Details-menu-drawer-container[open]),
  html:has(details.menu-open),
  body:has(#Details-menu-drawer-container[open]),
  body:has(details.menu-open) {
    overflow: hidden !important;
  }

  body:has(#Details-menu-drawer-container[open]) #header-group > .header-section,
  body:has(details.menu-open) #header-group > .header-section,
  body:has(#Details-menu-drawer-container[open]) #header-component,
  body:has(details.menu-open) #header-component {
    position: relative !important;
    z-index: 2147483646 !important;
  }

  #header-component:has(#Details-menu-drawer-container[open]) .header,
  #header-component:has(details.menu-open) .header {
    contain: none !important;
  }

  body:has(#Details-menu-drawer-container[open]) .pv-mobile-search-trigger,
  body:has(details.menu-open) .pv-mobile-search-trigger {
    filter: blur(6px);
  }

  .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;
    padding-inline-end: 20px;
    /* Fixed height so the root screen's row (just a 32px close button) and
       the submenu's row (back button + text, ~20px content) end up
       identical regardless of their different content - otherwise the list
       below starts at a different Y on each screen. */
    min-height: 62px;
    box-sizing: border-box;
    /* Same divider line style as the list items below, so both screens'
       header rows are followed by an identical line before the list starts. */
    border-block-end: 1px solid var(--color-border);
  }

  /* Match the root screen's list-item vertical padding (15px, from
     .menu-drawer__menu-item in base.css) instead of the back-button's
     usual --padding-md (12.8px), so the submenu's top row sits at the same
     vertical position as the first screen's items. */
  .menu-drawer__nav-buttons .menu-drawer__back-button {
    padding-block: 15px;
    /* .menu-drawer__menu-item-text (used elsewhere for the 0.8rem list
       items) doesn't get that size here since this button isn't a
       .menu-drawer__menu-item - it inherited a larger default instead. */
    font-size: 0.8rem;
    font-weight: 500;
  }

  .menu-drawer__nav-buttons .menu-drawer__back-button .menu-drawer__menu-item-text {
    color: rgb(var(--color-foreground-rgb) / 0.65);
  }

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

  /* The row's min-height (see --mainlist above) is sized around
     --icon-size-xs, but this caret defaulted to .svg-wrapper's
     --icon-size-sm (20px vs 13.6px) with no override of its own - the
     larger icon pushed rows with a submenu taller than plain link rows. */
  .menu-drawer__menu-item .icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .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 !important;
    width: 100% !important;
    top: 0 !important;
    height: 100dvh !important;
    left: 0 !important;
    background-color: var(--color-background);
    z-index: 5 !important;
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

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

  .menu-drawer__submenu-title {
    display: block;
    padding: 0.9rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-foreground);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .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:pashmina-tips-content (INDEX:203) */
.pashmina-article { width: 100%; color: #29241f; background: #ffffff; }
  .pashmina-article__header { padding: 28px max(28px, 8vw) 24px; background: #f4f4f2; text-align: left; }
  .pashmina-article__header > p, .pashmina-article__eyebrow { margin: 0 0 16px; color: #000000; font-size: 10px; letter-spacing: .18em; line-height: 1.4; }
  .pashmina-article h1, .pashmina-article h2, .pashmina-article h3 { font-family: var(--font-heading--family), Georgia, serif; font-weight: 400; }
  .pashmina-article h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); letter-spacing: -.04em; line-height: 1; }
  .pashmina-article__header h2 { margin: 10px 0 0; color: #000000; font-size: 16px; font-style: italic; }
  .pashmina-article__content { width: 100%; max-width: none; margin: 0; padding: 18px max(28px, 8vw) 52px; box-sizing: border-box; }
  .pashmina-article__content section { padding: 24px 0; border-bottom: 1px solid #ddd3c8; }
  .pashmina-article__content h3 { margin: 0; font-size: clamp(24px, 2.7vw, 34px); letter-spacing: -.025em; line-height: 1.08; }
  .pashmina-article__content section > p:last-child { max-width: none; margin: 10px 0 0; color: #71695f; font-size: 15px; line-height: 1.75; }
  .pashmina-article__promise { margin-top: 18px; padding: 28px 30px !important; border: 0 !important; background: #401a2a; color: #fff; }
  .pashmina-article__promise .pashmina-article__eyebrow { color: #dfb89c; }
  .pashmina-article__promise h3 { color: #fff; }
  .pashmina-article__promise section > p:last-child, .pashmina-article__promise > p:last-child { color: #eaded5 !important; }
  @media (max-width: 749px) { .pashmina-article__header { padding: 26px 20px 22px; } .pashmina-article__content { padding: 12px 20px 46px; } .pashmina-article__content section { padding: 22px 0; } .pashmina-article__content h3 { font-size: 26px; } .pashmina-article__promise { padding: 26px 22px !important; } }
/* END_SNIPPET:pashmina-tips-content */
/* START_SNIPPET:predictive-search-styles (INDEX:208) */
/* 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);
  }

  /* ... Keep existing keyframe animations ... */
  @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; }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:product-media-gallery-content-styles (INDEX:216) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */
/* START_SNIPPET:quick-add-modal-styles (INDEX:227) */
#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:search-modal (INDEX:237) */
/* Search modal style */
  .search-modal {
    --search-border-radius: 0;
    --search-border-width: 0;
  }

  /* "Clear" text button removed from view - kept in the DOM (JS references
     it as a required ref and toggles its `hidden` property during search),
     just never shown visually. */
  .search-modal .predictive-search__reset-button {
    display: none !important;
  }

  /* Force pure white background (matching the header), overriding whatever
     popover color scheme (currently #f5f5f5) is assigned to it */
  .search-modal .search-modal__content,
  .search-modal .predictive-search {
    --color-background: rgb(255 255 255 / 1) !important;
    --color-background-rgb: 255 255 255 !important;
    background-color: rgb(255 255 255 / 1) !important;
  }

  .search-modal__content {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
    
    @media screen and (min-width: 750px) {
      position: fixed;
      top: var(--header-group-height, var(--header-height, 0px));
      left: 0;
      right: 0;
      width: 100%;
      max-width: 100%;
      transform: none;
      margin-top: 0;
      overflow: hidden;
    }
  }

  /* Note: actual positioning for this modal is handled by the higher-specificity
     rules in assets/base.css ("FULL-WIDTH SEARCH MODAL" section), which win over
     anything set here - see that file for the sticky/non-sticky top offset logic. */

  /* Hide the default dialog backdrop on small screens */
  .search-modal__content::backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    opacity: 0 !important;
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: top center;
    animation: search-element-slide-in-bottom 180ms var(--ease-out-quad) forwards;
    border-radius: 0;
    box-shadow: none;

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

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 140ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
    width: 100%;
    /* Default align-items (normal/stretch) was squeezing predictive-search-
       component to this dialog's own capped height (~572px on a typical
       phone), even though its actual content needed more (759px measured
       on Products). A stretched flex item with taller, overflow:visible
       content inside is a known case where the browser can miscalculate
       how much is scrollable - sizing to content here instead lets the
       dialog's own overflow-y:auto scroll the correct, full amount. */
    align-items: flex-start;
  }

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

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

  /* The dialog itself is display:flex when open (see [open] rule below), so
     by default this stretches to match the dialog's full max-height (nearly
     the whole viewport) even when the actual form content inside is much
     shorter - that stretch showed as a large empty area (same background
     color, so invisible as a "box" but very visible as blank space) below
     short tab panels like Products. Pin it to its own content height. */
  .search-modal predictive-search-component {
    align-items: flex-start !important;
    height: auto !important;
  }

  .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;
    background: var(--color-background);
    padding-left: 45px;
    padding-right: 45px;
  }

  /* The header row (search input + close button) should stay flush with the
     original right edge - cancel the form's new right padding just for this
     row so the close button's position doesn't shift. Only the content
     below (results/suggestions) picks up the symmetric right inset. */
  .predictive-search-form__header {
    margin-right: -45px;
  }

  /* This used to scroll independently (max-height + overflow-y:auto), but
     the outer .dialog-modal (assets/base.css, "FULL-WIDTH SEARCH MODAL")
     already scrolls the whole modal - having both meant two nested
     scrollbars. This one now just flows naturally; the outer dialog is the
     single scroll container. */
  .predictive-search-form__content {
    background-color: var(--color-background);
  }

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

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

  /* This used to be overflow:hidden with a max-height cap (either the
     shared --modal-max-height, or 95dvh via the !important override right
     below) - that silently clipped anything taller than the cap (e.g. the
     "View all" button at the end of a long Products list) instead of
     letting the outer .dialog-modal (assets/base.css) scroll down to it.
     That dialog is the single intended scroll container now, so this
     wrapper just needs to stay visible and let content flow through it. */
  .search-modal .predictive-search-form__content-wrapper {
    overflow: visible !important;
  }

  /* Small bottom breathing room below the last row of results - was
     var(--padding-6xl) (4rem/64px), sized for a floating gradient "view all"
     footer bar that has since been removed from the markup (the view-all
     button now lives statically inside the Products tab panel), so that
     much clearance is no longer needed and only added a large empty gap at
     the bottom on scroll. */
  .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-lg);
  }

  .predictive-search-form__header-inner {
    color: var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 0.75rem;
    padding-inline: 1.25rem 1rem;

    @media screen and (max-width: 749px) {
      padding-inline: 1rem 0.75rem;
    }
  }

  .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-background);
    border-top: 1px solid rgb(var(--color-border-rgb) / 0.55);
    border-bottom: 1px solid rgb(var(--color-border-rgb) / 0.55);
    border-radius: 0;
    min-height: 60px;
    padding: 0;

    @media screen and (max-width: 749px) {
      min-height: 56px;
    }
  }

  .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: 0;
    padding-block: 0;
    font-size: 1rem;
    width: 100%;
    color: var(--color-foreground);
    padding-inline: 2rem 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
    height: 100%;
    min-height: 60px;

    @media screen and (max-width: 749px) {
      min-height: 56px;
      padding-inline-start: 1.75rem;
    }
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / 0.55);
  }

  .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: 0.1rem;
    top: auto;
    width: 1.5rem;
    height: 1.5rem;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  .predictive-search__icon > svg {
    width: 1.4rem;
    height: 1.4rem;
  }

  .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: 1.75rem;
    height: 1.75rem;
    margin-inline-start: auto;
    margin-inline-end: -2.5rem;
    padding: 0;
    box-shadow: none;
    color: rgb(var(--color-foreground-rgb) / 0.75);

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

    .svg-wrapper,
    svg {
      width: 1.35rem;
      height: 1.35rem;
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */
/* START_SNIPPET:search (INDEX:238) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */
/* START_SNIPPET:skip-to-content-link (INDEX:243) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */
/* START_SNIPPET:slideshow-styles (INDEX:249) */
/*
   * 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;
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: transform, opacity;

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

    &[hidden][reveal] {
      display: block;
      opacity: 0;
      animation: slideshow-slide-fade-in 240ms ease-in-out forwards;
    }

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

  @keyframes slideshow-slide-fade-in {
    from {
      opacity: 0;
      transform: translateY(2px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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